LayoutNG

LayoutNG es un nuevo motor de diseño, programado para lanzarse en Chrome 76, y que sale de un esfuerzo de varios años. Hay varias mejoras inmediatas emocionantes, además de mejoras de rendimiento adicionales y funciones de diseño avanzadas.

Novedades

  1. Mejora el aislamiento del rendimiento.
  2. Mejor compatibilidad con alfabetos que no sean el latín
  3. Corrige muchos problemas relacionados con los números de punto flotante y los márgenes.
  4. Corrige una gran cantidad de problemas de compatibilidad web.

Ten en cuenta que LayoutNG se lanzará en etapas. En Chrome 76, LayoutNG se usa para el diseño intercalado y en bloque. En las versiones posteriores, se reemplazarán otras primitivas de diseño (como la fragmentación de tablas, Flexbox, cuadrícula y bloques).

Cambios visibles para desarrolladores

Si bien el impacto visible para el usuario debe ser mínimo, LayoutNG cambia algunos comportamientos de maneras muy sutiles, corrige cientos de pruebas y mejora la compatibilidad con otros navegadores. A pesar de nuestros mejores esfuerzos, es probable que esto provoque que algunos sitios y aplicaciones se rendericen o se comporten de forma ligeramente diferente.

Las características de rendimiento también son muy diferentes; aunque el rendimiento en su conjunto es similar o ligeramente mejor que antes, es probable que ciertos casos de uso experimenten mejoras en el rendimiento, mientras que se espera que otros experimenten una regresión en cierta medida, al menos a corto plazo.

Anuncio flotante

LayoutNG vuelve a implementar la compatibilidad con los elementos flotantes (float: left; y float: right;), lo que corrige varios problemas de corrección relacionados con la posición de los números de punto flotantes en relación con otro contenido.

Contenido superpuesto

La implementación de los números de punto flotantes heredados no tenía en cuenta los márgenes correctamente cuando se colocaba contenido alrededor de un elemento flotante, lo que provocaba que el contenido se superpusiera parcial o totalmente con el número de punto flotante. La manifestación más común de este error aparece cuando una imagen se coloca junto a un párrafo en el que la lógica de evasión no tiene en cuenta la altura de una línea. (Consulta el error #861540 de Chromium).

línea de texto superior que se muestra superpuesta a una imagen flotante
Fig. 1a, Motor de diseño heredado
El texto se superpone a la imagen flotante hacia la derecha
el texto correcto a la izquierda y la imagen flotante a la derecha
Fig 1b, LayoutNG
El texto se coloca junto a la imagen flotante, a la derecha.

El mismo problema puede ocurrir en una sola línea. En el siguiente ejemplo, se muestra un elemento de bloque con un margen negativo después de un elemento flotante (#895962). El texto no debe superponerse con el número de punto flotante.

línea de texto superpuesta sobre un cuadro naranja
Fig. 2a, Motor de diseño heredado
El texto se superpone con el elemento naranja flotante
texto correcto a la derecha del cuadro naranja
Fig 2b, LayoutNG
El texto se coloca junto al elemento naranja flotante

Cómo dar formato al posicionamiento del contexto

Cuando un elemento que forma un contexto de formato de bloque tiene el tamaño junto a los números de punto flotante, el motor de diseño heredado intentará ajustar el tamaño del bloque una cantidad fija de veces antes de darse por vencido. Este enfoque generó un comportamiento impredecible e inestable y no coincidió con otras implementaciones. En LayoutNG, todos los números de punto flotante se tienen en cuenta a la hora de ajustar el tamaño del bloque. (Consulta el error #548033 de Chromium).

El posicionamiento absoluto y el fijo ahora cumplen mejor con las especificaciones W3C y se ajustan mejor al comportamiento en otros navegadores. Las diferencias entre los dos son más visibles en dos casos:

  • Intercalado de varias líneas que contiene bloques
    Si un bloque que contiene una posición absoluta abarca varias líneas, es posible que el motor heredado solo use un subconjunto de las líneas de manera incorrecta para calcular los límites del bloque contenedor.
  • Modos de escritura vertical
    El motor heredado tenía muchos problemas al colocar los elementos fuera del flujo en la posición predeterminada en los modos de escritura vertical. Consulta la siguiente sección para obtener más detalles sobre la compatibilidad mejorada del modo de escritura.

Idiomas que se escriben de derecha a izquierda (RTL) y modos de escritura vertical

LayoutNG se diseñó desde cero para admitir modos de escritura vertical e idiomas RTL, incluido el contenido bidireccional.

Texto bidireccional

LayoutNG admite el algoritmo bidireccional más actualizado definido por El estándar Unicode. Esta actualización no solo corrige varios errores de renderización, sino que también incluye funciones faltantes, como la compatibilidad con corchetes emparejados (consulta el error #302469 de Chromium).

Flujos ortogonales

LayoutNG mejora la precisión del diseño de flujo vertical, lo que incluye, por ejemplo, la ubicación de objetos absolutamente posicionados y el tamaño de los cuadros de flujo ortogonales (especialmente cuando se usa porcentaje). De las 1,258 pruebas de los paquetes de pruebas del W3C, 103 pruebas que fallaron en el motor de diseño anterior pasaron en LayoutNG.

Tamaño intrínseco

Los tamaños intrínsecos ahora se calculan correctamente cuando un bloque contiene elementos secundarios en un modo de escritura ortogonal.

Diseño del texto y salto de línea

El motor de diseño de Chromium heredado presentaba texto elemento por elemento y línea por línea. Este enfoque funcionó bien en la mayoría de los casos, pero requería mucha complejidad adicional para admitir secuencias de comandos y lograr un buen rendimiento. También era propenso a inconsistencias en la medición, lo que generaba diferencias sutiles en el tamaño de los contenedores de tamaño por contenido y su contenido o saltos de línea innecesarios.

En LayoutNG, el texto se dispone a nivel de párrafo y, luego, se divide en líneas. Esto permite un mejor rendimiento, una renderización de texto de mayor calidad y un salto de línea más coherente. A continuación, se detallan las diferencias más notables.

Unión entre los límites de los elementos

En algunas secuencias de comandos, ciertos caracteres se pueden unir visualmente cuando están adyacentes. Echa un vistazo a este ejemplo en árabe:

En LayoutNG, la unión ahora funciona incluso si los caracteres están en elementos diferentes. Las uniones incluso se conservarán cuando se apliquen estilos diferentes. (Consulta el error #6122 de Chromium).

Un grafema es la unidad más pequeña del sistema de escritura de un lenguaje. Por ejemplo, en inglés y en otros idiomas que usan el alfabeto latino, cada letra es un grafema.

En las siguientes imágenes, se muestra la renderización del siguiente HTML en el motor de diseño heredado y en LayoutNG, respectivamente:

<div>&#1606;&#1587;&#1602;</div>
<div>&#1606;&#1587;<span>&#1602;</span></div>
el grafema adecuado a la izquierda y la representación incorrecta separada a la derecha.
Fig. 3a, Motor de diseño heredado
Observa cómo cambia la forma de la segunda letra
se muestran los grafemas combinados apropiados
Fig 3b, LayoutNG
Las dos versiones ahora son idénticas

ligaturas china, japonesa y coreana (CJK)

Aunque Chromium ya admite ligaduras y las habilita de forma predeterminada, existen algunas limitaciones: las ligaduras que involucran varios puntos de código CJK no son compatibles con el motor de diseño heredado debido a una optimización de renderización. LayoutNG elimina estas restricciones y admite ligaduras independientemente de la secuencia de comandos.

En el siguiente ejemplo, se muestra la renderización de tres ligaduras discrecionales con la fuente Adobe SourceHanSansJP:

la combinación de caracteres del medio no forma la ligadura
Fig 4a, motor de diseño heredado
MHz forma correctamente una ligadura,
pero マンテョン y 10点 no
.
las ligaduras adecuadas que se muestran
Fig 4b, LayoutNG
Los tres grupos forman ligaduras como se espera.

Elementos de tamaño según el contenido

En el caso de los elementos que ajustan su tamaño según el contenido (como los bloques intercalados), el motor de diseño actual calcula primero el tamaño del bloque y, luego, realiza el diseño en el contenido. En algunos casos, como cuando una fuente se inserta de forma agresiva, puede generar una discrepancia entre el tamaño del contenido y el bloque. En LayoutNG, este modo de falla se eliminó, ya que el tamaño del bloque se basa en el contenido real.

En el siguiente ejemplo, se muestra un bloque amarillo cuyo tamaño se ajusta al contenido. Usa la fuente Lato, que utiliza el interletraje para ajustar el espaciado entre T y -. Los límites del cuadro amarillo deben coincidir con los límites del texto.

espacio en blanco al final del contenedor de texto
Figura 5a, Motor de diseño heredado
Observa el espacio en blanco final después de la última T.
los límites de texto no tienen espacio adicional
Fig 5b, LayoutNG
Observa cómo los bordes izquierdo y derecho del cuadro coinciden con los límites del texto.

Ajuste de línea

De manera similar al problema descrito anteriormente, si el contenido de un bloque de tamaño a contenido es más grande (más ancho) que el bloque, a veces el contenido se puede unir de forma innecesaria. Esto es poco frecuente, pero a veces sucede con contenido de direccionalidad mixta.

se muestra un salto de línea prematuro que provoca espacio adicional
Fig 6a, Motor de diseño heredado
Observa el salto de línea innecesario y el espacio adicional a la derecha
No se muestran espacios ni saltos de línea innecesarios.
Fig 6b, LayoutNG
Observa cómo los bordes izquierdo y derecho del cuadro coinciden con los límites del texto.

Más información

Para obtener información más detallada sobre los problemas de compatibilidad específicos y los errores que corrigió LayoutNG, consulta los problemas vinculados más arriba o busca errores marcados como Fixed-In-LayoutNG en la base de datos de errores de Chromium.

Si sospechas que LayoutNG causó la falla de un sitio web, envía un informe de errores y lo investigaremos.