Prévu pour Chrome 76, LayoutNG est un nouveau moteur de mise en page qui s'est achevé sur plusieurs années. Il existe plusieurs améliorations immédiates intéressantes, ainsi que d'autres gains de performances et fonctionnalités de mise en page avancées.
Nouveautés
- Améliore l'isolation des performances.
- Meilleure compatibilité avec les scripts autres que latins.
- Correction de nombreux problèmes liés aux flottants et aux marges
- Résolve 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 intégrée et en bloc. D'autres primitives de mise en page (telles que la fragmentation de table, Flexbox, grille et bloc) seront remplacées dans les versions suivantes.
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 légèrement différemment.
Les caractéristiques de performances sont également assez différentes. Bien que les performances dans l'ensemble soient semblables ou légèrement meilleures qu'avant, certains cas d'utilisation sont susceptibles d'améliorer les performances, tandis que d'autres sont susceptibles de diminuer légèrement, au moins à court terme.
Nombres décimaux
LayoutNG réimplémente la prise en charge des éléments flottants (float: left; et float: right;), ce qui corrige un certain nombre de problèmes d'exactitude autour du placement des floats par rapport à d'autres contenus.
Contenu superposé
L'ancienne implémentation de Flash transparent ne prenait pas correctement en compte les marges lors du placement du contenu autour d'un élément flottant, ce qui entraînait un chevauchement partiel ou complet de la création flottante elle-même. La manifestation la plus courante de ce bug apparaît lorsqu'une image est positionnée à côté d'un paragraphe où la logique d'évitement ne tient pas compte de la hauteur d'une ligne. Consultez le bug Chromium n° 861540.
Le texte chevauche l'image flottante vers la droite
Le texte est placé à droite de l'image flottante
Le même problème peut survenir 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 float.
Le texte chevauche l'élément orange flottant
Le texte est placé à côté de l'élément orange flottant
Mettre en forme le positionnement contextuel
Lorsqu'un élément constituant un contexte de mise en forme de bloc est dimensionné à côté des floats, l'ancien moteur de mise en page essaie de dimensionner le bloc un certain nombre de fois avant d'abandonner. Cette approche entraînait un comportement imprévisible et instable, et ne correspondait pas à d'autres implémentations. Dans LayoutNG, toutes les valeurs flottantes sont prises en compte lors du dimensionnement du bloc. Consultez le bug Chromium n° 548033.
Les positionnements absolus et fixes sont désormais conformes aux spécifications W3C et correspondent mieux au comportement dans d'autres navigateurs. Les différences entre les deux sont particulièrement visibles dans deux cas:
- Blocs intégrés multilignes contenant des blocs
Si un bloc contenant plusieurs lignes et positionné de façon absolue s'étendait sur plusieurs lignes, l'ancien moteur risque de n'utiliser, par erreur, qu'un sous-ensemble des lignes pour calculer les limites du bloc qui le contient. - Modes d'écriture verticales
L'ancien moteur rencontrait de nombreux problèmes pour placer les éléments en dehors du flux à la position par défaut dans les modes d'écriture verticales. Consultez la section suivante pour en savoir plus sur l'amélioration de la prise en charge du mode écriture.
Langues de droite à gauche 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 qui se lisent de droite à gauche, 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 elle inclut également des fonctionnalités manquantes telles que la compatibilité avec les crochets (voir le bug de Chromium n° 302469).
Flux orthogonaux
LayoutNG améliore la précision de la mise en page de flux vertical, y compris, par exemple, le placement d'objets positionnés de façon absolue et le dimensionnement des boîtes de flux orthogonales (en particulier lorsqu'un pourcentage est utilisé). Sur les 1 258 tests effectués dans les suites de tests du W3C, 103 tests ayant échoué dans l'ancien moteur de mise en page ont réussi 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 saut de ligne
L'ancien moteur de mise en page Chromium présentait le texte élément par élément et ligne par ligne. Cette approche fonctionnait bien dans la plupart des cas, mais a nécessité beaucoup plus de complexité pour prendre en charge les scripts et obtenir de bonnes performances. Elle était également sujette à des incohérences au niveau des mesures, ce qui entraînait de légères différences au niveau de la taille des conteneurs taille/contenu et de leur contenu, ou des sauts de ligne inutiles.
Dans LayoutNG, le texte est disposé au niveau du paragraphe, puis divisé en lignes. Cela permet d'améliorer les performances, le rendu du texte de meilleure qualité et les sauts de ligne plus cohérents. Les différences les plus notables sont détaillées ci-dessous.
Joindre au-delà des limites des éléments
Dans certains scripts, il est possible de joindre visuellement certains caractères s'ils sont adjacents. Regardez cet exemple en arabe:
Dans LayoutNG, la jointure fonctionne désormais même si les caractères se trouvent dans des éléments différents. Si un style différent est appliqué, les jointures sont même conservées. Consultez le bug Chromium n° 6122.
Le grapheme est la plus petite unité du système d'écriture d'un langage. Par exemple, en anglais et dans d'autres langues qui utilisent l'alphabet latin, chaque lettre est un graphique.
Les images ci-dessous montrent le rendu du code HTML suivant dans l'ancien moteur de mise en page et LayoutNG, respectivement:
<div>نسق</div>
<div>نس<span>ق</span></div>
Notez que la forme de la deuxième lettre change
Les deux versions sont désormais identiques
Ligatures chinoise, japonaise et coréenne (CJK)
Bien que Chromium soit déjà compatible avec 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 de l'affichage. LayoutNG supprime ces restrictions et prend en charge les ligatures, quel que soit le script.
L'exemple ci-dessous illustre le rendu de trois ligatures discrétionnaires à l'aide de la police Adobe SourceHanSansJP:
MHz forme correctement une ligature
, mais マンッテン et 10点 ne le font pas
Les trois groupes forment des ligatures comme prévu
Éléments de la taille par rapport au contenu
Pour les éléments qui s'adaptent au contenu (tels que les blocs intégrés), le moteur de mise en page actuel calcule d'abord la taille du bloc, puis procède à la mise en page du contenu. Dans certains cas, par exemple lorsqu'une police créne de manière agressive, cela peut entraîner une incohérence entre la taille du contenu et le bloc. Dans LayoutNG, ce mode de défaillance a été éliminé, car le bloc est dimensionné en fonction du contenu réel.
L'exemple ci-dessous montre un bloc jaune dimensionné en fonction du contenu. Il utilise la police Lato, qui utilise le crénage pour ajuster l'espacement entre T et -. Les limites de la zone jaune doivent correspondre aux limites du texte.
Notez l'espace blanc de fin après le 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 taille par contenu est plus grand (plus large) que le bloc, le contenu peut parfois encapsuler inutilement. Cette situation est assez rare, mais elle se produit parfois pour les contenus à orientation mixte.
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 plus d'informations sur les problèmes de compatibilité et les bugs spécifiques résolus par LayoutNG, consultez les problèmes indiqués ci-dessus ou recherchez dans la base de données des bugs Chromium les bugs marqués Fixed-In-LayoutNG.
Si vous pensez que LayoutNG peut avoir causé le dysfonctionnement d'un site Web, veuillez remplir un rapport de bug afin que nous puissions étudier le problème.