Prévu pour être publié dans Chrome 76, LayoutNG est un nouveau moteur de mise en page issu d'un effort de plusieurs années. Plusieurs améliorations immédiates intéressantes sont disponibles, et d'autres gains de performances et fonctionnalités de mise en page avancées seront bientôt disponibles.
Nouveautés
- Améliore l'isolation des performances.
- Meilleure compatibilité avec les scripts autres que latins.
- Correction de nombreux problèmes liés aux éléments flottants et aux marges.
- Correction d'un grand nombre de problèmes de compatibilité Web.
Veuillez noter que LayoutNG sera lancé par étapes. Dans Chrome 76, LayoutNG est utilisé pour la mise en page en ligne et en bloc. D'autres primitives de mise en page (telles que la table, la grille, la fragmentation de blocs et la flexbox) seront remplacées dans les versions ultérieures.
Modifications visibles par les développeurs
Bien que l'impact visible par l'utilisateur soit minime, LayoutNG modifie certains comportements de manière très subtile, corrige des centaines de tests et améliore la compatibilité avec d'autres navigateurs. Malgré tous nos efforts, il est probable que certains sites et certaines applications s'affichent ou se comportent un peu différemment.
Les caractéristiques de performances sont également très différentes. Bien que les performances globales soient similaires ou légèrement meilleures qu'auparavant, certains cas d'utilisation devraient voir leurs performances s'améliorer, tandis que d'autres devraient régresser quelque peu, du moins à court terme.
Nombres décimaux
LayoutNG réimplémente la prise en charge des éléments flottants (float: left; et float: right;) et corrige un certain nombre de problèmes d'exactitude concernant l'emplacement des flottants par rapport à d'autres contenus.
Contenu superposé
L'ancienne implémentation de la flottaison ne tenait pas correctement compte des marges lors de la mise en place du contenu autour d'un élément flottant, ce qui entraînait un chevauchement partiel ou total du contenu avec la flottaison elle-même. La manifestation la plus courante de ce bug se produit lorsqu'une image est placée à côté d'un paragraphe, où la logique d'évitement ne tient pas compte de la hauteur d'une ligne. (Voir le bug 861540 de Chromium.)
Le texte chevauche l'image flottante à droite
Le texte est positionné à côté de l'image flottante à droite
Le même problème peut se produire sur une seule ligne. L'exemple ci-dessous montre un élément de bloc avec une marge négative après un élément flottant (895962). Le texte ne doit pas chevaucher le flottement.
Le texte chevauche l'élément orange flottant
Le texte est positionné à côté de l'élément orange flottant
Positionnement du contexte de mise en forme
Lorsqu'un élément formant un contexte de mise en forme de bloc est dimensionné à côté de flottants, l'ancien moteur de mise en page essayait de dimensionner le bloc un nombre fixe de fois avant d'abandonner. Cette approche a entraîné un comportement imprévisible et instable, et ne correspondait pas aux autres implémentations. Dans LayoutNG, tous les flottants sont pris en compte lors de la mise à l'échelle du bloc. (Voir le bug 548033 de Chromium.)
Le positionnement absolu et fixe est désormais plus conforme aux spécifications du W3C et correspond davantage au comportement dans d'autres navigateurs. Les différences entre les deux sont les plus visibles dans deux cas:
- Blocs contenant intégrés multilignes
Si un bloc contenant positionné de manière absolue s'étendait sur plusieurs lignes, l'ancien moteur pouvait n'utiliser de manière incorrecte qu'un sous-ensemble des lignes pour calculer les limites du bloc contenant. - Modes d'écriture verticale
L'ancien moteur rencontrait de nombreux problèmes pour placer les éléments hors flux à la position par défaut en mode d'écriture verticale. Pour en savoir plus sur l'amélioration de la prise en charge du mode d'écriture, consultez la section suivante.
Langues de droite à gauche (RTL) et modes d'écriture verticale
LayoutNG a été conçu dès le départ pour prendre en charge les modes d'écriture verticale et les langues RTL, y compris le contenu bidirectionnel.
Texte bidirectionnel
LayoutNG est compatible avec l'algorithme bidirectionnel le plus récent défini par la norme Unicode. Cette mise à jour corrige non seulement diverses erreurs de rendu, mais inclut également des fonctionnalités manquantes, telles que la prise en charge des crochets associés (voir le bug 302469 de Chromium).
Flux orthogonaux
LayoutNG améliore la précision de la mise en page en flux vertical, y compris, par exemple, le positionnement d'objets positionnés de manière absolue et la mise à l'échelle des boîtes de flux orthogonales (en particulier lorsque des pourcentages sont utilisés). Sur les 1 258 tests des suites de tests du W3C, 103 tests qui ont échoué dans l'ancien moteur de mise en page passent dans LayoutNG.
Dimensionnement intrinsèque
Les tailles intrinsèques sont désormais calculées correctement lorsqu'un bloc contient des enfants dans un mode d'écriture orthogonal.
Mise en page du texte et retour à la ligne
L'ancien moteur de mise en page Chromium disposait le texte par élément et par ligne. Cette approche fonctionnait bien dans la plupart des cas, mais nécessitait beaucoup de complexité supplémentaire pour prendre en charge les scripts et obtenir de bonnes performances. Il était également sujet à des incohérences de mesure, ce qui entraînait de légères différences dans la taille des conteneurs de taille par rapport au contenu et leur contenu, ou des sauts de ligne inutiles.
Dans LayoutNG, le texte est mis en page au niveau du paragraphe, puis divisé en lignes. Cela permet d'améliorer les performances, la qualité du rendu du texte et la cohérence des coupures de ligne. Les différences les plus notables sont détaillées ci-dessous.
Rassembler des éléments au-delà des limites
Dans certains scripts, certains caractères peuvent être visuellement joints lorsqu'ils sont adjacents. Voici un exemple en arabe:
Dans LayoutNG, la jonction fonctionne désormais même si les caractères se trouvent dans des éléments différents. Les jointures sont même conservées lorsque vous appliquez un style différent. (Consultez le bug 6122 de Chromium.)
Un grapheme est la plus petite unité du système d'écriture d'une langue. Par exemple, en anglais et dans d'autres langues qui utilisent l'alphabet latin, chaque lettre est un graphème.
Les images ci-dessous montrent le rendu du code HTML suivant dans l'ancien moteur de mise en page et dans LayoutNG, respectivement:
<div>نسق</div>
<div>نس<span>ق</span></div>
Notez comment la forme de la deuxième lettre change.
Les deux versions sont désormais identiques.
Ligatures chinois, japonais et coréen (CJK)
Bien que Chromium accepte déjà les ligatures et les active par défaut, il existe certaines limites: les ligatures impliquant plusieurs points de code CJK ne sont pas compatibles avec l'ancien moteur de mise en page en raison d'une optimisation du rendu. LayoutNG supprime ces restrictions et prend en charge les ligatures, quel que soit le script.
L'exemple ci-dessous montre le rendu de trois ligatures facultatives à l'aide de la police Adobe SourceHanSansJP:
Le groupe MHz forme correctement une ligature
mais マンション et 10点 ne le font pas
Les trois groupes forment des ligatures comme prévu
Éléments de taille par rapport au contenu
Pour les éléments dont la taille est adaptée au contenu (comme les blocs intégrés), le moteur de mise en page actuel calcule d'abord la taille du bloc, puis effectue la mise en page du contenu. Dans certains cas, par exemple lorsqu'une police effectue un kerning agressif, cela peut entraîner un décalage entre la taille du contenu et le bloc. Dans LayoutNG, ce mode de défaillance a été éliminé, car la taille du bloc est basée sur le contenu réel.
L'exemple ci-dessous montre un bloc jaune adapté au contenu. Il utilise la police Lato, qui utilise l'espacement entre les caractères pour ajuster l'espacement entre le T et le -. Les limites de la zone jaune doivent correspondre aux limites du texte.
Notez l'espace vide à la fin du dernier T.
Notez que les bords gauche et droit de la zone correspondent aux limites du texte.
Renvoi à la ligne automatique
Comme pour le problème décrit ci-dessus, si le contenu d'un bloc de taille adaptée au contenu est plus grand (plus large) que le bloc, le contenu peut parfois être mis en forme de manière inutile. Cela est assez rare, mais cela se produit parfois pour les contenus à double sens.
Notez le saut de ligne inutile et l'espace supplémentaire à droite.
Notez que les bords gauche et droit de la zone correspondent aux limites du texte.
Informations supplémentaires
Pour en savoir plus sur les problèmes de compatibilité et les bugs spécifiques résolus par LayoutNG, veuillez consulter les problèmes indiqués dans les liens ci-dessus ou rechercher dans la base de données de bugs Chromium les bugs marqués comme Fixed-In-LayoutNG (Corrigé dans LayoutNG).
Si vous pensez que LayoutNG a pu empêcher un site Web de fonctionner, veuillez remplir un rapport de bug et nous examinerons le problème.