O LayoutNG, que será lançado no Chrome 76, é um novo mecanismo de layout que está saindo de um esforço de vários anos. Há várias melhorias imediatas interessantes, e outros ganhos de desempenho e recursos avançados de layout serão lançados em breve.
O que há de novo?
- Melhora o isolamento de desempenho.
- Melhor suporte para scripts que não sejam latinos.
- Correções de vários problemas com elementos flutuantes e margens.
- Correções de vários problemas de compatibilidade na Web.
O LayoutNG será lançado em etapas. No Chrome 76, o LayoutNG é usado para layout inline e de bloco. Outras primitivas de layout (como tabela, flexbox, grade e fragmentação de bloco) serão substituídas em versões posteriores.
Mudanças visíveis para desenvolvedores
Embora o impacto para os usuários seja mínimo, o LayoutNG altera alguns comportamentos de maneira sutil, corrige diversos testes e melhora a compatibilidade com outros navegadores. Fizemos o melhor possível, mas é provável que esse novo recurso faça com que alguns sites e apps apresentem uma renderização ou um comportamento um pouco fora do normal.
As características de desempenho também são bastante diferentes. Embora o desempenho como um todo seja semelhante ou um pouco melhor do que antes, é provável que alguns casos de uso tenham melhorias de desempenho, enquanto outros podem regredir um pouco, pelo menos a curto prazo.
Variações
O LayoutNG reimplementa o suporte a elementos flutuantes (float: left; e float: right;),
corrigindo vários problemas de correção relacionados ao posicionamento
de elementos flutuantes em relação a outro conteúdo.
Conteúdo sobreposto
A implementação de flutuação legada não considerava corretamente as margens ao posicionar o conteúdo ao redor de um elemento flutuante, resultando no conteúdo parcial ou totalmente sobreposto ao flutuante. A manifestação mais comum desse bug aparece quando uma imagem é posicionada ao lado de um parágrafo em que a lógica de evitação não considera a altura de uma linha. Consulte o bug do Chromium #861540.
O texto se sobrepõe à imagem flutuante à direita
O texto é posicionado ao lado da imagem flutuante à direita
O mesmo problema pode ocorrer em uma única linha. O exemplo abaixo mostra um elemento de bloco com uma margem negativa seguindo um elemento flutuante (#895962). O texto não deve se sobrepor ao flutuador.
O texto se sobrepõe ao elemento laranja flutuante
O texto é posicionado ao lado do elemento laranja flutuante
Formatação do posicionamento do contexto
Quando um elemento que forma um contexto de formatação de bloco é dimensionado ao lado de flutuações, o mecanismo de layout legado tenta dimensionar o bloco um número fixo de vezes antes de desistir. Essa abordagem levou a um comportamento imprevisível e instável e não correspondia a outras implementações. No LayoutNG, todos os elementos flutuantes são considerados ao dimensionar o bloco. Consulte o bug do Chromium #548033.
O posicionamento absoluto e fixo agora é mais compatível com as especificações do W3C e corresponde melhor ao comportamento em outros navegadores. As diferenças entre os dois são mais visíveis em dois casos:
- Blocos contendo inlines de várias linhas
Se um bloco contendo posicionado de forma absoluta abranger várias linhas, o mecanismo legado poderá usar incorretamente apenas um subconjunto das linhas para calcular os limites do bloco contendo. - Modos de gravação vertical
O mecanismo legada tinha muitos problemas ao colocar elementos fora do fluxo na posição padrão nos modos de gravação vertical. Consulte a próxima seção para mais detalhes sobre o suporte aprimorado ao modo de escrita.
Idiomas da direita para a esquerda (RTL) e modos de escrita vertical
O LayoutNG foi projetado do zero para oferecer suporte a modos de escrita vertical e idiomas RTL, incluindo conteúdo bidirecional.
Texto bidirecional
O LayoutNG oferece suporte ao algoritmo bidirecional mais atualizado definido pelo padrão Unicode. Além de corrigir vários erros de renderização, essa atualização também inclui recursos ausentes, como suporte a colchetes pareados (consulte o bug do Chromium #302469).
Fluxos ortogonais
O LayoutNG melhora a precisão do layout de fluxo vertical, incluindo, por exemplo, a colocação de objetos posicionados de forma absoluta e o dimensionamento de caixas de fluxo ortogonais (especialmente quando a porcentagem é usada). Dos 1.258 testes nos conjuntos de testes do W3C, 103 falharam na passagem do mecanismo de layout antigo no LayoutNG.
Dimensionamento intrínseco
Os tamanhos intrínsecos agora são calculados corretamente quando um bloco contém filhos em um modo de gravação ortogonal.
Layout de texto e quebra de linha
O mecanismo de layout legado do Chromium dispunha os elementos de texto um por um e linha por linha. Essa abordagem funcionou bem na maioria dos casos, mas exigiu muita complexidade extra para oferecer suporte a scripts e alcançar um bom desempenho. Ele também era propenso a inconsistências de medição, o que levava a diferenças sutis no tamanho de contêineres de tamanho para conteúdo e o conteúdo deles ou quebras de linha desnecessárias.
No LayoutNG, o texto é organizado no nível do parágrafo e depois dividido em linhas. Isso permite melhor desempenho, renderização de texto de maior qualidade e quebra de linha mais consistente. Confira abaixo as diferenças mais importantes.
Como unir elementos
Em alguns scripts, alguns caracteres podem ser visualmente unidos quando estão adjacentes. Confira este exemplo em árabe:
No LayoutNG, a mesclagem agora funciona mesmo que os caracteres estejam em elementos diferentes. As mesclagens são preservadas mesmo quando estilos diferentes são aplicados. Consulte o bug do Chromium #6122.
Um grafema é a menor unidade do sistema de escrita de um idioma. Por exemplo, em inglês e em outros idiomas que usam o alfabeto latino, cada letra é um grafema.
As imagens abaixo mostram a renderização do seguinte HTML no mecanismo de layout legado e no LayoutNG, respectivamente:
<div>نسق</div>
<div>نس<span>ق</span></div>
Observe como a forma da segunda letra muda
As duas versões agora são idênticas
Ligaduras chinesas, japonesas e coreanas (CJK)
Embora o Chromium já ofereça suporte a ligaduras e as ative por padrão, há algumas limitações: as ligaduras que envolvem vários codepoints CJK não são compatíveis com o mecanismo de layout legado devido a uma otimização de renderização. O LayoutNG remove essas restrições e oferece suporte a ligaduras, independentemente do script.
O exemplo abaixo mostra a renderização de três ligaduras opcionais usando a fonte Adobe SourceHanSansJP:
MHz forma corretamente uma ligadura
mas マンション e 10点 não
Os três grupos formam ligaduras como esperado
Elementos de tamanho do conteúdo
Para elementos que dimensionam o conteúdo (como blocos inline), o mecanismo de layout atual calcula o tamanho do bloco primeiro e depois executa o layout no conteúdo. Em alguns casos, como quando uma fonte é kernada agressivamente, isso pode resultar em uma incompatibilidade entre o tamanho do conteúdo e o bloco. No LayoutNG, esse modo de falha foi eliminado porque o tamanho do bloco é definido com base no conteúdo real.
O exemplo abaixo mostra um bloco amarelo dimensionado para o conteúdo. Ele usa a fonte Lato, que usa a justificação para ajustar o espaçamento entre T e -. Os limites da caixa amarela devem corresponder aos limites do texto.
Observe o espaço em branco após o último T
Observe como as bordas esquerda e direita da caixa correspondem aos limites do texto
Quebra de linha
Semelhante ao problema descrito acima, se o conteúdo de um bloco de tamanho for maior (mais largo) do que o bloco, o conteúdo poderá ser quebrado desnecessariamente. Isso é bastante raro, mas às vezes acontece com conteúdo de direcionalidade mista.
Observe a quebra de linha desnecessária e o espaço extra à direita
Observe como as bordas esquerda e direita da caixa correspondem aos limites do texto
Mais informações
Para mais informações detalhadas sobre os problemas de compatibilidade e bugs específicos corrigidos pelo LayoutNG, consulte os problemas vinculados acima ou pesquise o banco de dados de bugs do Chromium em busca de bugs marcados como Fixed-In-LayoutNG.
Se você suspeitar que o LayoutNG pode ter causado a falha de um site, envie um relatório do bug para que possamos investigar.