LayoutNG ist eine neue Layout-Engine, die voraussichtlich in Chrome 76 veröffentlicht wird und die mehrere Jahre lang laufen wird. Es gibt einige aufregende Verbesserungen, die die Leistung sofort verbessert, sowie erweiterte Layoutfunktionen.
Neuigkeiten
- Verbessert die Leistungsisolation.
- Bessere Unterstützung für andere Skripts als Latein
- Behebt viele Probleme mit Gleitkommazahlen und Rändern.
- Behebt zahlreiche Webkompatibilitätsprobleme.
Beachten Sie, dass LayoutNG in mehreren Phasen eingeführt wird. In Chrome 76 wird LayoutNG für das Inline- und Block-Layout verwendet. Andere Layout-Primitive wie Tabellen-, Flexbox-, Raster- und Blockfragmentierung werden in nachfolgenden Releases ersetzt.
Sichtbare Änderungen für Entwickler
Auch wenn die sichtbaren Auswirkungen für den Nutzer minimal sein sollten, verändert LayoutNG ein gewisses Verhalten auf sehr subtile Weise, behebt Hunderte von Tests und verbessert die Kompatibilität mit anderen Browsern. Trotz unserer Bemühungen ist es wahrscheinlich, dass dies dazu führt, dass einige Websites und Anwendungen etwas anders gerendert werden oder sich etwas anders verhalten.
Die Leistungsmerkmale sind ebenfalls sehr unterschiedlich. Obwohl die Leistung insgesamt ähnlich oder etwas besser als zuvor ist, werden bei bestimmten Anwendungsfällen Leistungsverbesserungen wahrscheinlich verzeichnet, während bei anderen zumindest kurzfristig ein etwas besserer Rückgang zu erwarten ist.
Float
LayoutNG implementiert die Unterstützung für Floating-Elemente (float: left; und float: right;) neu, wodurch eine Reihe von Richtigkeitsproblemen bei der Platzierung von Gleitkommazahlen im Verhältnis zu anderen Inhalten behoben wurde.
Überlagerte Inhalte
In der alten Float-Implementierung wurden Ränder nicht korrekt berücksichtigt, wenn Inhalte um ein Floating-Element herum platziert wurden. Dies führte dazu, dass der Inhalt das Float selbst teilweise oder vollständig überdeckte. Die häufigste Manifestation für diesen Fehler tritt auf, wenn ein Bild neben einem Absatz positioniert wird, bei dem die Vermeidungslogik die Höhe einer Zeile nicht berücksichtigt. Weitere Informationen finden Sie unter Chromium-Fehler 861540.
Text überlagert das unverankerte Bild auf der rechten Seite
Der Text ist neben dem unverankerten Bild rechts positioniert
Das gleiche Problem kann innerhalb einer einzelnen Zeile auftreten. Das folgende Beispiel zeigt ein Blockelement mit einem negativen Rand nach einem unverankerten Element (#895962). Der Text darf sich nicht mit dem Float überlappen.
Text überschneidet sich mit dem orangefarbenen unverankerten Element
Der Text ist neben dem unverankerten orangefarbenen Element positioniert
Kontextpositionierung formatieren
Wenn ein Element, das einen Blockformatierungskontext bildet, neben Gleitkommazahlen platziert wird, versucht die Legacy-Layout-Engine, die Größe des Blocks festzulegen, bevor sie aufgibt. Dieser Ansatz führte zu unvorhersehbarem und instabilem Verhalten und passte nicht zu anderen Implementierungen. Bei LayoutNG werden bei der Größenanpassung des Blocks alle Gleitkommazahlen berücksichtigt. Weitere Informationen finden Sie unter Chromium-Fehler 548033.
Absolute und feste Positionierung entsprechen jetzt besser den W3C-Spezifikationen und entsprechen besser dem Verhalten in anderen Browsern. Die Unterschiede zwischen den beiden sind in zwei Fällen am deutlichsten:
- Mehrzeilige Inline-Blöcke mit Block
Wenn sich ein absolut positionierter Block mit einem Block über mehrere Zeilen erstreckt, verwendet die Legacy-Engine fälschlicherweise möglicherweise nur einen Teil der Zeilen zur Berechnung der enthaltenden Blockgrenzen. - Vertikale Schreibmodi
In der Legacy-Engine gab es viele Probleme beim Platzieren von Out-of-Flow-Elementen an 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 vertikale Schreibmodi und RTL-Sprachen, einschließlich bidirektionaler Inhalte, entwickelt.
Bidirektionaler Text
LayoutNG unterstützt den neuesten bidirektionalen Algorithmus, der durch den Unicode-Standard definiert wurde. Dieses Update behebt nicht nur verschiedene Renderingfehler, sondern umfasst auch fehlende Funktionen wie die Unterstützung für paar Klammern (siehe Chromium-Fehler Nr. 302469).
Orthogonale Abläufe
LayoutNG verbessert die Genauigkeit des vertikalen Flusslayouts, z. B. die Platzierung von absolut positionierten Objekten und die Größe orthogonaler Flowboxen (insbesondere bei Verwendung von Prozentsätzen). Von den 1.258 Tests in den W3C-Testsuiten haben 103 Tests,die in der alten Layout-Engine fehlgeschlagen sind, in LayoutNG bestanden.
Intrinsische Größenanpassung
Intrinsische Größen werden jetzt korrekt berechnet, wenn ein Block untergeordnete Elemente im orthogonalen Schreibmodus enthält.
Textlayout und Zeilenumbruch
In der alten Chromium-Layout-Engine wurde der Text Element für Element und Zeile für Zeile angeordnet. Dieser Ansatz funktionierte in den meisten Fällen gut, erforderte jedoch viel mehr Komplexität, um Skripts zu unterstützen und eine gute Leistung zu erzielen. Es gab auch anfällig für Messinkonsistenzen, was zu geringfügigen Unterschieden bei der Größe von Größe-zu-Content-Containern und ihrem Inhalt oder zu unnötigen Zeilenumbrüchen führte.
In LayoutNG wird Text auf Absatzebene angelegt und dann in Zeilen aufgeteilt. Dies ermöglicht eine bessere Leistung, ein hochwertiges Textrendering und konsistentere Zeilenumbrüche. Die wichtigsten Unterschiede sind unten aufgeführt.
Über Elementgrenzen hinweg verbinden
In einigen Skripten können bestimmte Zeichen visuell verbunden werden, wenn sie nebeneinander stehen. Sehen Sie sich dieses Beispiel aus dem Arabischen an:
In LayoutNG funktioniert das Zusammenführen jetzt auch dann, wenn sich die Zeichen in verschiedenen Elementen befinden. Joins bleiben sogar bei Anwendung unterschiedlicher Stile erhalten. Weitere Informationen finden Sie unter Chromium-Fehler 6122.
Ein Graphem ist die kleinste Einheit eines Schreibsystems einer Sprache. Im Englischen und in anderen Sprachen mit dem lateinischen Alphabet ist jeder Buchstabe beispielsweise ein Graphem.
Die folgenden Bilder zeigen das Rendering des folgenden HTML-Codes im Legacy-Layout-Modul bzw. in LayoutNG:
<div>نسق</div>
<div>نس<span>ق</span></div>
Beachten Sie, wie sich die Form des zweiten Buchstabens ändert.
Die beiden Versionen sind jetzt identisch.
Chinesische, japanische und koreanische Ligaturen (CJK)
Obwohl Chromium bereits Ligaturen unterstützt und standardmäßig aktiviert, gibt es einige Einschränkungen: Ligaturen mit mehreren CJK-Codepunkten werden aufgrund einer Rendering-Optimierung im alten Layout-Modul nicht unterstützt. LayoutNG hebt diese Einschränkungen auf und unterstützt Ligaturen unabhängig vom Skript.
Das folgende Beispiel zeigt das Rendering von drei diskretionären Ligaturen mit der Schriftart Adobe SourceHanSansJP:
MHz bildet korrekt eine Ligatur
, aber マンテョン und 10点 nicht.
Alle drei Gruppen bilden wie erwartet Ligaturen.
An Inhaltsgröße angepasste Elemente
Bei Elementen, deren Größe an den Inhalt angepasst wird (z. B. Inline-Blöcke), berechnet die aktuelle Layout-Engine zuerst die Größe des Blocks und führt dann ein Layout für den Inhalt aus. In einigen Fällen, z. B. wenn ein Schriftkern aggressiv funktioniert, kann dies zu Abweichungen zwischen der Größe des Inhalts und des Blocks führen. In LayoutNG wurde dieser Fehlermodus beseitigt, da die Größe des Blocks an den tatsächlichen Inhalt angepasst wird.
Das folgende Beispiel zeigt einen gelben Block in der Größe des Inhalts. Dabei wird die Schriftart im Lato-Format verwendet, bei der der Abstand zwischen „T“ und „-“ durch Unterschneidung angepasst wird. Die Begrenzungen des gelben Felds sollten mit den Begrenzungen des Textes übereinstimmen.
Beachten Sie das Leerzeichen nach dem letzten T.
Beachten Sie, dass der linke und rechte Rand des Felds mit den Begrenzungen des Textes übereinstimmen
Zeilenumbruch
Ähnlich wie beim oben beschriebenen Problem kann es manchmal unnötig zu Einpackungen kommen, wenn der Inhalt eines Blocks mit Größe zum Inhalt größer (breiter) ist als der Block. Das ist recht selten, aber manchmal bei Inhalten mit gemischter Direktionalität.
Beachten Sie den unnötigen Zeilenumbruch und den zusätzlichen Abstand auf der rechten Seite.
Beachten Sie, dass der linke und rechte Rand des Felds mit den Begrenzungen des Textes übereinstimmen.
Weitere Informationen
Weitere Informationen zu den spezifischen Kompatibilitätsproblemen und Fehlern, die durch LayoutNG behoben wurden, finden Sie unter den oben verlinkten Problemen. Sie können auch in der Chromium-Datenbank nach Fehlern suchen, die mit Fixed-In-LayoutNG gekennzeichnet sind.
Wenn Sie vermuten, dass LayoutNG möglicherweise dazu geführt hat, dass eine Website nicht mehr funktioniert, reichen Sie bitte einen Fehlerbericht ein. Wir werden das Problem dann untersuchen.