IndelingNG

LayoutNG, gepland voor release in Chrome 76, is een nieuwe layout-engine waar meerdere jaren aan gewerkt zijn. Er zijn een aantal opwindende directe verbeteringen, en er komen nog meer prestatieverbeteringen en geavanceerde lay-outfuncties aan.

Wat is er nieuw?

  1. Verbetert de prestatie-isolatie.
  2. Betere ondersteuning voor andere scripts dan Latijn.
  3. Lost veel problemen rond floats en marges op.
  4. Lost een groot aantal webcompatibiliteitsproblemen op.

Houd er rekening mee dat LayoutNG in fasen zal worden gelanceerd . In Chrome 76 wordt LayoutNG gebruikt voor inline- en blokindeling. Andere lay-outprimitieven (zoals tabel-, flexbox-, raster- en blokfragmentatie) zullen in volgende releases worden vervangen.

Zichtbare wijzigingen voor ontwikkelaars

Hoewel de zichtbare impact voor de gebruiker minimaal zou moeten zijn, verandert LayoutNG bepaald gedrag op zeer subtiele manieren, herstelt honderden tests en verbetert de compatibiliteit met andere browsers. Ondanks onze inspanningen is het waarschijnlijk dat sommige sites en applicaties daardoor iets anders worden weergegeven of zich enigszins anders gedragen.

De prestatiekenmerken zijn ook behoorlijk verschillend; Hoewel de prestaties over het geheel genomen vergelijkbaar of iets beter zijn dan voorheen, zullen bij bepaalde gebruiksscenario's waarschijnlijk prestatieverbeteringen optreden, terwijl bij andere naar verwachting enigszins achteruit zal gaan, althans op korte termijn.

Drijft

LayoutNG implementeert opnieuw ondersteuning voor zwevende elementen ( float: left; en float: right; ) en lost een aantal correctheidsproblemen op rond de plaatsing van floats in relatie tot andere inhoud.

Gesuperponeerde inhoud

Bij de oudere float-implementatie werd niet correct rekening gehouden met marges bij het plaatsen van inhoud rond een zwevend element, waardoor de inhoud de float zelf gedeeltelijk of volledig overlapte. De meest voorkomende manifestatie van deze bug treedt op wanneer een afbeelding naast een alinea wordt geplaatst waar de vermijdingslogica geen rekening houdt met de hoogte van een regel. (Zie Chromium-bug #861540 .)

bovenste tekstregel weergegeven als overlappende zwevende afbeelding
Figuur 1a, Legacy layout-engine
Tekst overlapt de zwevende afbeelding aan de rechterkant
de juiste tekst aan de linkerkant en de zwevende afbeelding aan de rechterkant
Figuur 1b, Lay-outNG
Tekst wordt naast de zwevende afbeelding aan de rechterkant geplaatst

Hetzelfde probleem kan zich binnen één regel voordoen. Het onderstaande voorbeeld toont een blokelement met een negatieve marge na een zwevend element ( #895962 ). De tekst mag de vlotter niet overlappen.

tekstregel weergegeven over een oranje vak
Figuur 2a, Legacy layout-engine
Tekst overlapt het zwevende oranje element
juiste tekst rechts van het oranje vak
Figuur 2b, Lay-outNG
Tekst wordt naast het zwevende oranje element geplaatst

Contextpositionering opmaken

Wanneer een element dat een blokopmaakcontext vormt, wordt gedimensioneerd naast floats, probeert de oudere lay-outengine het blok een vast aantal keren te verkleinen voordat het het opgeeft. Deze aanpak leidde tot onvoorspelbaar en onstabiel gedrag en kwam niet overeen met andere implementaties. In LayoutNG wordt bij het dimensioneren van het blok rekening gehouden met alle drijvers. (Zie Chromium-bug #548033 .)

Absolute en vaste positionering voldoen nu beter aan de W3C-specificaties en komen beter overeen met het gedrag in andere browsers. De verschillen tussen de twee zijn het meest zichtbaar in twee gevallen:

  • Inline-blokken met meerdere regels
    Als een absoluut gepositioneerd bevattend blok meerdere regels omvat, kan de oudere engine ten onrechte slechts een subset van de regels gebruiken om de bevattende blokgrenzen te berekenen.
  • Verticale schrijfmodi
    De oudere engine had veel problemen bij het plaatsen van out-of-flow-elementen in de standaardpositie in verticale schrijfmodi. Zie het volgende gedeelte voor meer details over verbeterde ondersteuning voor de schrijfmodus.

Talen van rechts naar links (RTL) en verticale schrijfmodi

LayoutNG is vanaf de basis ontworpen om verticale schrijfmodi en RTL-talen te ondersteunen, inclusief bidirectionele inhoud.

Bidirectionele tekst

LayoutNG ondersteunt het meest up-to-date bidirectionele algoritme gedefinieerd door de Unicode-standaard . Deze update repareert niet alleen verschillende weergavefouten, maar bevat ook ontbrekende functies zoals ondersteuning voor gekoppelde beugels (zie Chromium-bug #302469 .)

Orthogonale stromen

LayoutNG verbetert de nauwkeurigheid van de verticale stroomindeling, inclusief bijvoorbeeld de plaatsing van absoluut gepositioneerde objecten en de grootte van orthogonale stroomvakken (vooral als percentage wordt gebruikt). Van de 1.258 tests in de W3C-testsuites slagen er 103 tests die faalden in de oude layout-engine in LayoutNG.

Intrinsieke maatvoering

Intrinsieke afmetingen worden nu correct berekend wanneer een blok kinderen bevat in een orthogonale schrijfmodus.

Tekstopmaak en regelafbreking

De oude Chromium-lay-outengine heeft tekst element voor element en regel voor regel opgemaakt. Deze aanpak werkte in de meeste gevallen goed, maar vereiste veel extra complexiteit om scripts te ondersteunen en goede prestaties te bereiken. Het was ook gevoelig voor inconsistenties in de metingen, wat leidde tot subtiele verschillen in de grootte van containers van grootte naar inhoud en hun inhoud, of tot onnodige regeleinden.

In LayoutNG wordt tekst op alineaniveau opgemaakt en vervolgens in regels opgesplitst. Dit zorgt voor betere prestaties, tekstweergave van hogere kwaliteit en consistentere regelafbrekingen. De meest opvallende verschillen worden hieronder beschreven.

Samenvoegen over elementgrenzen heen

In sommige scripts kunnen bepaalde karakters visueel met elkaar worden verbonden als ze naast elkaar staan. Bekijk dit voorbeeld uit het Arabisch:

In LayoutNG werkt het samenvoegen nu zelfs als de karakters zich in verschillende elementen bevinden. Verbindingen blijven zelfs behouden als er een andere stijl wordt toegepast. (Zie Chromium-bug #6122 .)

Een grafeem is de kleinste eenheid van het schrijfsysteem van een taal. In het Engels en andere talen die het Latijnse alfabet gebruiken, is elke letter bijvoorbeeld een grafeem.

De onderstaande afbeeldingen tonen de weergave van de volgende HTML in respectievelijk de oude layout-engine en LayoutNG:

<div>&#1606;&#1587;&#1602;</div>
<div>&#1606;&#1587;<span>&#1602;</span></div>
het juiste grafeem aan de linkerkant en een gescheiden onjuiste weergave aan de rechterkant
Figuur 3a, Legacy layout-engine
Merk op hoe de vorm van de tweede letter verandert
juiste gecombineerde grafemen getoond
Figuur 3b, Lay-outNG
De twee versies zijn nu identiek

Chinese, Japanse en Koreaanse (CJK) ligaturen

Hoewel Chromium ligaturen al ondersteunt en deze standaard inschakelt, zijn er enkele beperkingen: ligaturen met meerdere CJK-codepunten worden niet ondersteund in de oudere layout-engine vanwege een weergave-optimalisatie. LayoutNG verwijdert deze beperkingen en ondersteunt ligaturen, ongeacht het script.

Het onderstaande voorbeeld toont de weergave van drie willekeurige ligaturen met het Adobe SourceHanSansJP-lettertype:

middelste tekencombinatie vormt geen ligatuur
Figuur 4a, Legacy layout-engine
MHz vormt correct een ligatuur
maar マンション en 10点 niet
juiste ligaturen getoond
Figuur 4b, Lay-outNG
Alle drie de groepen vormen zoals verwacht ligaturen

Grootte-tot-inhoud-elementen

Voor elementen die qua grootte overeenkomen met de inhoud (zoals inline-blokken), berekent de huidige lay-outengine eerst de grootte van het blok en voert vervolgens de lay-out uit op de inhoud. In sommige gevallen, bijvoorbeeld wanneer een lettertype agressief wordt weergegeven, kan dit resulteren in een discrepantie tussen de grootte van de inhoud en het blok. In LayoutNG is deze foutmodus geëlimineerd omdat het blok wordt gedimensioneerd op basis van de daadwerkelijke inhoud.

In het onderstaande voorbeeld ziet u een geel blok met de grootte van de inhoud. Het gebruikt het Lato-lettertype dat spatiëring gebruikt om de afstand tussen T en - aan te passen. De grenzen van het gele vak moeten overeenkomen met de grenzen van de tekst.

achterliggende witruimte weergegeven aan het einde van de tekstcontainer
Figuur 5a, Legacy layout-engine
Let op de volgende witruimte na de laatste T
tekstgrenzen hebben geen extra ruimte
Figuur 5b, Lay-outNG
Merk op hoe de linker- en rechterrand van het kader overeenkomen met de grenzen van de tekst

Lijnomwikkeling

Vergelijkbaar met het hierboven beschreven probleem: als de inhoud van een blok van grootte naar inhoud groter (breder) is dan het blok, kan de inhoud soms onnodig doorlopen. Dit is vrij zeldzaam, maar gebeurt soms bij inhoud met gemengde directionaliteit.

voortijdige lijnbreuk weergegeven, waardoor extra ruimte ontstaat
Figuur 6a, Legacy layout-engine
Let op de onnodige regeleinde en extra ruimte aan de rechterkant
er worden geen onnodige spaties of regeleinden weergegeven
Figuur 6b, Lay-outNG
Merk op hoe de linker- en rechterrand van het kader overeenkomen met de grenzen van de tekst

Verdere informatie

Voor meer gedetailleerde informatie over de specifieke compatibiliteitsproblemen en bugs die door LayoutNG zijn opgelost, raadpleegt u de hierboven gelinkte problemen of zoekt u in de Chromium-bugdatabase naar bugs gemarkeerd met Fixed-In-LayoutNG .

Als u vermoedt dat LayoutNG ervoor heeft gezorgd dat een website kapot is gegaan, dient u een bugrapport in , waarna wij het zullen onderzoeken.