LayoutNG, que se lanzará en Chrome 76, es un nuevo motor de diseño que se está implementando después de varios años de trabajo. Hay varias mejoras inmediatas interesantes, y se agregarán más mejoras de rendimiento y funciones de diseño avanzadas.
Novedades
- Mejora el aislamiento del rendimiento.
- Mayor compatibilidad con alfabetos que no sean latinos.
- Se corrigieron muchos problemas relacionados con los anuncios flotantes y los márgenes.
- Se corrigieron muchos problemas de compatibilidad web.
Ten en cuenta que LayoutNG se lanzará por etapas. En Chrome 76, LayoutNG se usa para el diseño intercalado y de bloque. Otras primitivas de diseño (como la tabla, el flexbox, la cuadrícula y la fragmentación de bloques) se reemplazarán en versiones posteriores.
Cambios visibles para el desarrollador
Si bien el impacto visible para el usuario debe ser mínimo, LayoutNG cambia algunos comportamientos de maneras muy sutiles, soluciona cientos de pruebas y mejora la compatibilidad con otros navegadores. A pesar de nuestros esfuerzos, es probable que esto provoque que ciertos sitios y aplicaciones se procesen o se comporten de una forma ligeramente diferente.
Las características de rendimiento también son bastante diferentes. Si bien el rendimiento general es similar o ligeramente mejor que antes, es probable que ciertos casos de uso vean mejoras en el rendimiento, mientras que se espera que otros retrocedan un poco, al menos a corto plazo.
Anuncio flotante
LayoutNG vuelve a implementar la compatibilidad con elementos flotantes (float: left; y float: right;) y corrige varios problemas de precisión relacionados con la ubicación de los elementos flotantes en relación con otro contenido.
Contenido superpuesto
La implementación heredada de flotante no tenía en cuenta correctamente los márgenes cuando se colocaba contenido alrededor de un elemento flotante, lo que provocaba que el contenido se superpusiera parcialmente o por completo con el flotante. La manifestación más común de este error aparece cuando se coloca una imagen junto a un párrafo en el que la lógica de evitación no tiene en cuenta la altura de una línea. (consulta el error #861540 de Chromium).
El texto se superpone con la imagen flotante a la derecha.
El texto se ubica junto a la imagen flotante a la derecha.
Es posible que se produzca el mismo problema dentro de 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 elemento flotante.
El texto se superpone con el elemento naranja flotante.
El texto se ubica junto al elemento naranja flotante.
Posicionamiento del contexto de formato
Cuando se establece el tamaño de un elemento que forma un contexto de formato de bloque junto a números de punto flotante, el motor de diseño heredado intentará establecer 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 coincidía con otras implementaciones. En LayoutNG, se tienen en cuenta todos los números de punto flotante cuando se establece el tamaño del bloque. (consulta el error #548033 de Chromium).
El posicionamiento absoluto y fijo ahora cumple mejor con las especificaciones del W3C y coincide mejor con el comportamiento en otros navegadores. Las diferencias entre ambos son más visibles en dos casos:
- Bloques intercalados de varias líneas
Si un bloque intercalado con una posición absoluta abarca varias líneas, es posible que el motor heredado use de forma incorrecta solo un subconjunto de las líneas para calcular los límites del bloque intercalado. - Modos de escritura vertical
El motor heredado tenía muchos problemas para colocar 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 con el modo de escritura.
Idiomas de derecha a izquierda (RTL) y modos de escritura vertical
LayoutNG se diseñó desde cero para admitir modos de escritura vertical y 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 vinculados (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 con posición absoluta y el tamaño de los cuadros de flujo ortogonales (especialmente cuando se usa el porcentaje). De las 1,258 pruebas de los conjuntos de pruebas del W3C, 103 pruebas que fallaron en el motor de diseño anterior pasaron en LayoutNG.
Dimensionamiento 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 de texto y división de líneas
El motor de diseño heredado de Chromium distribuía el texto elemento por elemento y línea por línea. Este enfoque funcionó bien en la mayoría de los casos, pero requirió mucha complejidad adicional para admitir secuencias de comandos y lograr un buen rendimiento. También era propenso a inconsistencias de medición, lo que generaba diferencias sutiles en el tamaño de los contenedores de tamaño a contenido y su contenido, o bien saltos de línea innecesarios.
En LayoutNG, el texto se organiza a nivel del párrafo y, luego, se divide en líneas. Esto permite un mejor rendimiento, una renderización de texto de mayor calidad y una división de líneas más coherente. A continuación, se detallan las diferencias más notables.
Unión entre límites de elementos
En algunas escrituras, ciertos caracteres se pueden unir visualmente cuando están adyacentes. Consulta este ejemplo en árabe:
En LayoutNG, la unión ahora funciona incluso si los caracteres están en diferentes elementos. Las uniones incluso se conservarán cuando se apliquen diferentes diseños. (consulta el error #6122 de Chromium).
Un grafema es la unidad más pequeña del sistema de escritura de un idioma. Por ejemplo, en inglés y otros idiomas que usan el alfabeto latino, cada letra es un grafema.
En las siguientes imágenes, se muestra la renderización del siguiente código HTML en el motor de diseño heredado y LayoutNG, respectivamente:
<div>نسق</div>
<div>نس<span>ق</span></div>
Observa cómo cambia la forma de la segunda letra.
Las dos versiones ahora son idénticas.
Ligaduras de chino, japonés y coreano (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 quita estas restricciones y admite ligaduras independientemente de la escritura.
En el siguiente ejemplo, se muestra la renderización de tres ligaduras discrecionales con la fuente Adobe SourceHanSansJP:
MHz forma correctamente una ligadura
pero マンション y 10点 no
Los tres grupos forman ligaduras como se espera
Elementos de tamaño a contenido
En el caso de los elementos que se ajustan al contenido (como los bloques intercalados), el motor de diseño actual primero calcula el tamaño del bloque y, luego, realiza el diseño en el contenido. En algunos casos, como cuando una fuente se une de forma agresiva, esto puede generar una discrepancia entre el tamaño del contenido y el bloque. En LayoutNG, se eliminó este modo de falla, ya que el tamaño del bloque se basa en el contenido real.
En el siguiente ejemplo, se muestra un bloque amarillo del tamaño del contenido. Usa la fuente Lato, que usa elkerning para ajustar el espaciado entre T y -. Los límites del cuadro amarillo deben coincidir con los límites del texto.
Observa el espacio en blanco final después de la última T.
Observa cómo los bordes izquierdo y derecho del cuadro coinciden con los límites del texto.
Ajuste de línea
Al igual que el problema descrito anteriormente, si el contenido de un bloque de tamaño a contenido es más grande (más ancho) que el bloque, el contenido a veces puede unirse de forma innecesaria. Esto es bastante raro, pero a veces ocurre en el contenido de direccionalidad mixta.
Observa el corte de línea innecesario y el espacio adicional a la derecha.
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 y los errores específicos que corrigió LayoutNG, consulta los problemas vinculados anteriormente o busca errores marcados como Fixed-In-LayoutNG en la base de datos de errores de Chromium.
Si sospechas que LayoutNG pudo provocar daños en un sitio web, envía un informe de errores para que lo investiguemos.