LayoutNG ist eine neue Layout-Engine, die in Chrome 76 veröffentlicht werden soll. Sie ist das Ergebnis mehrjähriger Entwicklungsarbeit. Es gibt bereits einige spannende Verbesserungen, die sofort verfügbar sind. Weitere Leistungssteigerungen und erweiterte Layoutfunktionen sind in Planung.
Das ist neu
- Verbessert die Leistungsisolierung.
- Bessere Unterstützung für andere Schriftsysteme als Lateinisch.
- Viele Probleme mit Rändern und Textabständen wurden behoben.
- Behebt eine große Anzahl von Webkompatibilitätsproblemen.
LayoutNG wird in mehreren Phasen eingeführt. In Chrome 76 wird LayoutNG für das Inline- und Block-Layout verwendet. Andere Layout-Primitive (z. B. Tabellen, Flexbox, Raster und Blockfragmentierung) werden in nachfolgenden Releases ersetzt.
Für Entwickler sichtbare Änderungen
Obwohl die Auswirkungen auf den Nutzer minimal sein sollten, ändert LayoutNG einiges auf subtile Weise, behebt Probleme bei Hunderten von Tests und verbessert die Kompatibilität mit anderen Browsern. Trotz unserer besten Bemühungen wird diese Änderung wahrscheinlich dazu führen, dass sich das Rendering und das Verhalten auf einigen Websites und Anwendungen leicht unterscheiden.
Auch die Leistungsmerkmale sind recht unterschiedlich. Die Leistung insgesamt ist zwar ähnlich oder etwas besser als zuvor, bei bestimmten Anwendungsfällen sind jedoch wahrscheinlich Leistungsverbesserungen zu erwarten, während bei anderen die Leistung zumindest kurzfristig etwas zurückgehen wird.
Float
In LayoutNG wird die Unterstützung für schwimmende Elemente (float: left; und float: right;) wieder implementiert. Dadurch werden eine Reihe von Korrektheitsproblemen im Zusammenhang mit der Platzierung von schwimmenden Elementen im Verhältnis zu anderen Inhalten behoben.
Überlagerte Inhalte
Bei der bisherigen Implementierung von „float“ wurden beim Platzieren von Inhalten um ein „float“-Element herum keine Ränder berücksichtigt. Das führte dazu, dass sich die Inhalte teilweise oder vollständig über das „float“-Element selbst überlappten. Am häufigsten tritt dieser Fehler auf, wenn ein Bild neben einem Absatz platziert wird und die Logik zur Vermeidung von Überschneidungen die Zeilenhöhe nicht berücksichtigt. (Siehe Chromium-Fehler 861540.)
Der Text überlappt das schwebende Bild rechts.
Der Text wird rechts neben dem schwebenden Bild platziert.
Dasselbe Problem kann auch innerhalb einer einzelnen Zeile auftreten. Das Beispiel unten zeigt ein Blockelement mit einem negativen Rand, das auf ein schwimmendes Element folgt (#895962). Der Text darf sich nicht mit dem Floating-Element überschneiden.
Der Text überlappt das orangefarbene schwebende Element
Der Text ist neben dem orangefarbenen schwebenden Element positioniert
Kontextpositionierung formatieren
Wenn ein Element, das einen Blockformatierungskontext bildet, neben einem Floating-Element die Größe festgelegt wird, versuchte das bisherige Layout-Engine, die Größe des Blocks eine feste Anzahl von Malen festzulegen, bevor es aufgab. Dieser Ansatz führte zu unvorhersehbarem und instabilem Verhalten und entsprach nicht anderen Implementierungen. In LayoutNG werden alle Floats bei der Größe des Blocks berücksichtigt. (Siehe Chromium-Fehler 548033.)
Die absolute und die feste Positionierung entsprechen jetzt besser den W3C-Spezifikationen und stimmen besser mit dem Verhalten in anderen Browsern überein. Die Unterschiede zwischen den beiden sind in zwei Fällen am deutlichsten:
- Mehrere Zeilen in einem inline-Inhaltsblock
Wenn ein absolut positionierter Inhaltsblock mehrere Zeilen umfasst, verwendet die alte Engine möglicherweise fälschlicherweise nur einen Teil der Zeilen, um die Begrenzungen des Inhaltsblocks zu berechnen. - Vertikale Schreibmodi
Die bisherige Engine hatte viele Probleme beim Platzieren von Elementen außerhalb des Flusses in der Standardposition in vertikalen Schreibmodi. Im nächsten Abschnitt finden Sie weitere Informationen zur verbesserten Unterstützung des Schreibmodus.
Linksläufige Sprachen (RTL-Sprachen) und vertikale Schreibmodi
LayoutNG wurde von Grund auf für die Unterstützung vertikaler Schreibmodi und RTL-Sprachen entwickelt, einschließlich bidirektionaler Inhalte.
Bidirektionaler Text
LayoutNG unterstützt den neuesten bidirektionalen Algorithmus, der vom Unicode-Standard definiert ist. Dieses Update behebt nicht nur verschiedene Renderingfehler, sondern enthält auch fehlende Funktionen wie die Unterstützung von gepaarten Klammern (siehe Chromium-Fehler 302469).
Orthogonale Abläufe
LayoutNG verbessert die Genauigkeit des vertikalen Flusslayouts, z. B. das Platzieren absolut positionierter Objekte und die Größe orthogonaler Flussfelder (insbesondere bei Verwendung von Prozentsätzen). Von den 1.258 Tests in den W3C-Test-Suites sind 103 Tests,die mit der alten Layout-Engine fehlgeschlagen sind, in LayoutNG bestanden.
Intrinsische Größenanpassung
Die intrinsischen Größen werden jetzt korrekt berechnet, wenn ein Block in einem orthogonalen Schreibmodus untergeordnete Elemente enthält.
Textlayout und Zeilenumbruch
Das alte Chromium-Layout-Engine hat Textelemente und Zeilen einzeln angeordnet. Dieser Ansatz funktionierte in den meisten Fällen gut, erforderte aber viel zusätzliche Komplexität, um Scripts zu unterstützen und eine gute Leistung zu erzielen. Außerdem kam es häufig zu Messinkonsistenzen, was zu subtilen Unterschieden bei der Größe von Containern mit Inhalt und ihrem Inhalt oder zu unnötigen Zeilenumbrüchen führte.
In LayoutNG wird Text auf Absatzebene angeordnet und dann in Zeilen aufgeteilt. Dies ermöglicht eine bessere Leistung, eine höhere Textqualität und eine gleichmäßigere Zeilenumbruch. Die wichtigsten Unterschiede werden unten beschrieben.
Elemente über Elementgrenzen hinweg zusammenführen
In einigen Schriften können bestimmte Zeichen optisch zusammengeführt werden, wenn sie nebeneinander stehen. Sehen Sie sich dieses Beispiel aus dem Arabischen an:
In LayoutNG funktioniert das Zusammenführen jetzt auch, wenn sich die Zeichen in verschiedenen Elementen befinden. Zusammenführungen bleiben sogar erhalten, wenn ein anderer Stil angewendet wird. (Siehe Chromium-Fehler 6122.)
Ein Graphem ist die kleinste Einheit des Schriftsystems einer Sprache. In Englisch und anderen Sprachen, die das lateinische Alphabet verwenden, ist beispielsweise jeder Buchstabe ein Graphem.
Die folgenden Bilder zeigen das Rendering des folgenden HTML-Codes in der alten Layout-Engine und in LayoutNG:
<div>نسق</div>
<div>نس<span>ق</span></div>
Beachten Sie, wie sich die Form des zweiten Buchstabens ändert
Die beiden Versionen sind jetzt identisch
Ligaturen für Chinesisch, Japanisch und Koreanisch (CJK)
Chromium unterstützt bereits Ligaturen und aktiviert sie standardmäßig. Es gibt jedoch einige Einschränkungen: Ligaturen mit mehreren CJK-Codepunkten werden in der alten Layout-Engine aufgrund einer Rendering-Optimierung nicht unterstützt. LayoutNG entfernt diese Einschränkungen und unterstützt Ligaturen unabhängig vom Schriftsystem.
Das folgende Beispiel zeigt das Rendern von drei wahlfreien Ligaturen mit der Schriftart „Adobe SourceHanSansJP“:
Bei „MHz“ wird eine korrekte Ligatur gebildet
bei „マンション“ und „10点“ jedoch nicht
Bei allen drei Gruppen werden wie erwartet Ligaturen gebildet
Elemente mit proportionaler Größe
Bei Elementen, die an den Inhalt angepasst werden (z. B. Inline-Blöcke), berechnet die aktuelle Layout-Engine zuerst die Größe des Blocks und führt dann das Layout für den Inhalt aus. In einigen Fällen, z. B. wenn ein Schriftschnitt stark kerningt, kann dies zu einer Abweichung zwischen der Größe des Inhalts und des Blocks führen. In LayoutNG wurde dieser Fehlermodus beseitigt, da die Größe des Blocks anhand des tatsächlichen Inhalts festgelegt wird.
Das Beispiel unten zeigt einen gelben Block, der an den Inhalt angepasst ist. Hier wird die Schriftart „Lato“ verwendet, bei der der Abstand zwischen „T“ und „-“ mithilfe von Kerning angepasst wird. Die Ränder des gelben Felds sollten mit den Rändern des Texts übereinstimmen.
Beachten Sie das abschließende Leerzeichen nach dem letzten „T“.
Beachten Sie, dass die linken und rechten Ränder des Felds mit den Rändern des Texts übereinstimmen.
Zeilenumbruch
Ähnlich wie beim oben beschriebenen Problem kann es vorkommen, dass der Inhalt eines Blocks, der anhand des Inhalts skaliert wird, größer (breiter) als der Block ist. In diesem Fall wird der Inhalt manchmal unnötig umgebrochen. Das kommt zwar selten vor, kann aber bei Inhalten mit unterschiedlicher Leserichtung passieren.
Beachten Sie den unnötigen Zeilenumbruch und den zusätzlichen Abstand auf der rechten Seite.
Beachten Sie, dass die linken und rechten Ränder des Felds mit den Rändern des Texts übereinstimmen.
Weitere Informationen
Weitere Informationen zu den spezifischen Kompatibilitätsproblemen und Fehlern, die durch LayoutNG behoben wurden, finden Sie in den oben verlinkten Artikeln oder in der Chromium-Fehlerdatenbank unter Fixed-In-LayoutNG.
Wenn Sie vermuten, dass eine Website durch LayoutNG beschädigt wurde, melden Sie bitte einen Fehlerbericht. Wir werden der Sache dann nachgehen.