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?
- Verbetert de prestatie-isolatie.
- Betere ondersteuning voor andere scripts dan Latijn.
- Lost veel problemen rond floats en marges op.
- 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 bepaalde gebruiksscenario's waarschijnlijk prestatieverbeteringen opleveren, 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 .)
Tekst overlapt de zwevende afbeelding aan de rechterkant
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.
Tekst overlapt het zwevende oranje element
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>نسق</div>
<div>نس<span>ق</span></div>
Merk op hoe de vorm van de tweede letter verandert
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:
MHz vormt correct een ligatuur
maar マンション en 10点 niet
Alle drie de groepen vormen zoals verwacht ligaturen
Grootte-naar-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.
Let op de volgende witruimte na de laatste T
Merk op hoe de linker- en rechterrand van het vak 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.
Let op de onnodige regeleinde en extra ruimte aan de rechterkant
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.