Programado para ser lançado no Chrome 76, o LayoutNG é um novo mecanismo de layout que sai de uma iniciativa de vários anos. Há várias melhorias imediatas empolgantes, além de ganhos de desempenho adicionais e recursos avançados de layout que serão lançados.
Novidades?
- Melhora o isolamento de desempenho.
- suporte melhor para scripts diferentes do latim.
- Corrige vários problemas com pontos flutuantes e margens
- Corrige um grande número de problemas de compatibilidade com a Web.
O LayoutNG será lançado em etapas. No Chrome 76, o LayoutNG é usado para layout inline e de blocos. Outros primitivos de layout (como fragmentação de tabela, flexbox, grade e blocos) vão ser substituídos em versões subsequentes.
Mudanças visíveis pelo desenvolvedor
Embora o impacto visível ao usuário seja mínimo, o LayoutNG muda alguns comportamentos de maneiras muito sutis, corrige centenas de testes e melhora a compatibilidade com outros navegadores. Apesar de todos os nossos esforços, é provável que isso faça com que alguns sites e aplicativos sejam renderizados ou se comportem de maneira um pouco diferente.
As características de desempenho também são muito diferentes. Embora o desempenho geral seja semelhante ou um pouco melhor do que antes, é provável que alguns casos de uso apresentem melhorias, enquanto outros podem regredir um pouco, pelo menos em curto prazo.
Variações
O LayoutNG reimplementa o suporte a elementos flutuantes (float: left; e float: right;),
corrigindo vários problemas de correção no posicionamento
de pontos flutuantes em relação a outros conteúdos.
Conteúdo sobreposto
A implementação de pontos flutuantes legada não considerou corretamente as margens ao posicionar conteúdo em torno de um elemento flutuante, resultando na sobreposição parcial ou total do próprio ponto 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 prevenção não considera a altura de uma linha. Consulte o bug 861540 do Chromium.
O texto sobrepõe a 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 após um elemento flutuante (895962, link em inglês). O texto não deve se sobrepor ao ponto flutuante.
O texto se sobrepõe ao elemento laranja flutuante
O texto é posicionado ao lado do elemento laranja flutuante
Como formatar o posicionamento de contexto
Quando um elemento que forma um contexto de formatação de bloco é dimensionado ao lado de pontos flutuantes, 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 correspondeu a outras implementações. No LayoutNG, todos os pontos flutuantes são considerados no dimensionamento do bloco. Consulte o bug no 548033 do Chromium.
O posicionamento absoluto e fixo agora está mais em conformidade 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 que contêm inline várias linhas
Se um bloco que contém uma posição absolutamente abrange várias linhas, o mecanismo legado pode usar incorretamente apenas um subconjunto das linhas para calcular os limites do bloco. - Modos de gravação verticais
O mecanismo legado tinha muitos problemas para posicionar elementos fora do fluxo na posição padrão nos modos de gravação vertical. Consulte a próxima seção para saber mais sobre o suporte aprimorado ao modo de escrita.
Idiomas da direita para a esquerda (RTL, na sigla em inglês) 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 de acordo com o padrão Unicode (em inglês). Essa atualização não apenas corrige vários erros de renderização, mas também inclui recursos ausentes, como suporte a colchetes pareados (consulte o bug no 302469 do Chromium).
Fluxos ortogonais
O LayoutNG melhora a precisão do layout de fluxo vertical, incluindo, por exemplo, a colocação de objetos posicionados absolutamente e o dimensionamento de caixas de fluxo ortogonais (especialmente quando a porcentagem é usada). Dos 1.258 testes nos pacotes do W3C, 103 que falharam no antigo mecanismo de layout são aprovados no LayoutNG.
Dimensionamento intrínseco
Agora, os tamanhos intrínsecos são calculados corretamente quando um bloco contém filhos em um modo de escrita ortogonal
Layout de texto e quebra de linhas
O mecanismo de layout legado do Chromium organizou o texto elemento por elemento e linha por linha. Essa abordagem funcionou bem na maioria dos casos, mas exigia muita complexidade para oferecer suporte a scripts e alcançar um bom desempenho. Ela também estava propensa a inconsistências de medição, o que levou a diferenças sutis no dimensionamento dos contêineres de tamanho e conteúdo e ao conteúdo deles, ou a quebras de linha desnecessárias.
No LayoutNG, o texto é disposto no nível do parágrafo e, em seguida, dividido em linhas. Isso permite melhor desempenho, maior qualidade de renderização de texto e quebra de linha mais consistente. As diferenças mais notáveis estão detalhadas abaixo.
Mesclagem entre limites de elementos
Em alguns scripts, determinados caracteres podem ser combinados visualmente quando são adjacentes. Veja este exemplo em árabe:
No LayoutNG, a mesclagem agora funciona mesmo que os personagens estejam em elementos diferentes. As mesclagens serão preservadas até quando um estilo diferente for aplicado. Consulte o bug 6122 do Chromium.
Um grafema é a menor unidade do sistema de escrita de uma linguagem. Por exemplo, no 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: ligaduras envolvendo vários codepoints CJK não têm suporte no mecanismo de layout legado devido a uma otimização de renderização. O LayoutNG remove essas restrições e oferece suporte a ligaduras, independente do script.
O exemplo abaixo mostra a renderização de três ligaduras discricionárias usando a fonte Adobe SourceHanSansJP:
MHz forma corretamente uma ligadura
, mas マンldョン e 10点 não
Todos os três grupos formam ligaduras como esperado
Elementos de tamanho de conteúdo
Para elementos desse tipo, 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 muda de forma agressiva, isso pode resultar em uma incompatibilidade entre o tamanho do conteúdo e do bloco. No LayoutNG, esse modo de falha foi eliminado, já que o bloco é dimensionado com base no conteúdo real.
O exemplo abaixo mostra um bloco amarelo dimensionado de acordo com o conteúdo. Ela usa a fonte Lato, que usa kerning para ajustar o espaçamento entre T e -. Os limites da caixa amarela precisam 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
Assim como o problema descrito acima, se o conteúdo de um bloco de tamanho para conteúdo for maior (mais largo) que o bloco, às vezes ele pode ser agrupado desnecessariamente. Isso é raro, mas às vezes acontece com conteúdo de direção mista.
Observe a quebra de linha desnecessária e espaço extra à direita
Observe como as bordas esquerda e direita da caixa correspondem aos limites do texto
Mais informações
Para informações mais detalhadas sobre os problemas específicos de compatibilidade e bugs corrigidos pelo LayoutNG, consulte os problemas nos links acima ou pesquise no banco de dados de bugs do Chromium para encontrar bugs marcados como Fixed-In-LayoutNG.
Se você suspeita que o LayoutNG pode ter causado a falha de um site, envie um relatório do bug para que possamos investigar.