LayoutNG, il nuovo motore di layout la cui uscita è prevista in Chrome 76, è il risultato di un progetto di più anni. Sono disponibili diversi miglioramenti immediati e stimolanti, e saranno presto disponibili ulteriori miglioramenti delle prestazioni e funzionalità di layout avanzate.
Novità
- Migliora l'isolamento delle prestazioni.
- Migliore supporto per gli script diversi dal latino.
- Correzioni di molti problemi relativi a spaziatura e margini.
- Risolve un numero elevato di problemi di compatibilità web.
Tieni presente che LayoutNG verrà implementato in più fasi. In Chrome 76, LayoutNG viene utilizzato per il layout in linea e a blocchi. Altre primitive di layout (come table, flexbox, grid e la frammentazione dei blocchi) verranno sostituite nelle release successive.
Modifiche visibili agli sviluppatori
Sebbene l'impatto visibile all'utente dovrebbe essere minimo, LayoutNG modifica alcuni comportamenti in modi molto sottili, corregge centinaia di test e migliora la compatibilità con altri browser. Nonostante il nostro impegno, è probabile che questo provochi un rendering o un comportamento leggermente diverso di alcuni siti e applicazioni.
Anche le caratteristiche di rendimento sono molto diverse; sebbene il rendimento complessivo sia simile o leggermente migliore rispetto a prima, è probabile che in alcuni casi di utilizzo si verifichino miglioramenti, mentre in altri si preveda una certa regressione, almeno a breve termine.
Float
LayoutNG reimplementa il supporto per gli elementi in primo piano (float: left; e float: right;)
correggendo una serie di problemi di correttezza relativi al posizionamento
degli elementi in primo piano rispetto ad altri contenuti.
Contenuti sovrapposti
L'implementazione precedente del galleggiamento non teneva conto correttamente dei margini quando si posizionavano i contenuti attorno a un elemento in primo piano, con il risultato che i contenuti si sovrapponevano parzialmente o completamente all'elemento stesso. La manifestazione più comune di questo bug si verifica quando un'immagine è posizionata accanto a un paragrafo in cui la logica di evitamento non tiene conto dell'altezza di una riga. (vedi bug di Chromium 861540).
Il testo sovrappone l'immagine in primo piano a destra
Il testo è posizionato accanto all'immagine in primo piano a destra
Lo stesso problema potrebbe verificarsi all'interno di una singola riga. L'esempio riportato di seguito mostra un elemento di blocco con un margine negativo che segue un elemento fluttuante (#895962). Il testo non deve sovrapporsi al galleggiante.
Il testo sovrappone l'elemento arancione fluttuante
Il testo è posizionato accanto all'elemento arancione fluttuante
Posizionamento del contesto di formattazione
Quando un elemento che forma un contesto di formattazione di blocco viene ridimensionato accanto a elementi in a capo, il motore di layout precedente tenta di ridimensionare il blocco un numero fisso di volte prima di rinunciare. Questo approccio ha portato a un comportamento imprevedibile e instabile e non corrispondeva ad altre implementazioni. In LayoutNG tutti gli spazi variabili vengono presi in considerazione per determinare le dimensioni del blocco. (vedi bug di Chromium 548033).
Il posizionamento assoluto e fisso ora è più conforme alle specifiche W3C e corrisponde meglio al comportamento in altri browser. Le differenze tra le due sono più evidenti in due casi:
- Blocchi contenenti in linea su più righe
Se un blocco contenente con posizionamento assoluto si estendeva su più righe, il motore precedente potrebbe utilizzare erroneamente solo un sottoinsieme di righe per calcolare i limiti del blocco contenente. - Modalità di scrittura verticale
Il motore precedente aveva molti problemi a posizionare gli elementi fuori flusso nella posizione predefinita nelle modalità di scrittura verticale. Per ulteriori dettagli sul miglioramento del supporto della modalità di scrittura, consulta la sezione successiva.
Lingue con scrittura da destra a sinistra (RTL) e modalità di scrittura verticale
LayoutNG è stato progettato da zero per supportare le modalità di scrittura verticale e le lingue RTL, inclusi i contenuti bidirezionali.
Testo bidirezionale
LayoutNG supporta l'algoritmo bidirezionale più aggiornato definito dal Unicode Standard. Questo aggiornamento non solo corregge vari errori di rendering, ma include anche funzionalità mancanti come il supporto delle parentesi tra parentesi. (vedi bug di Chromium 302469).
Flussi ortogonali
LayoutNG migliora la precisione del layout con flusso verticale, ad esempio il posizionamento di oggetti con posizionamento assoluto e le dimensioni delle caselle di flusso ortogonali (in particolare quando viene utilizzata la percentuale). Degli 1.258 test nelle suite di test W3C, 103 test non superati nel vecchio motore di layout sono stati superati in LayoutNG.
Dimensionamento intrinseco
Le dimensioni intrinseche ora vengono calcolate correttamente quando un blocco contiene elementi figli in una modalità di scrittura ortogonale.
Layout del testo e a capo
Il precedente motore di layout di Chromium disponeva il testo elemento per elemento e riga per riga. Questo approccio ha funzionato bene nella maggior parte dei casi, ma richiedeva molta complessità aggiuntiva per supportare gli script e ottenere buone prestazioni. Inoltre, era soggetta a incoerenze di misurazione, che hanno portato a differenze sottili nelle dimensioni dei contenitori basati sulle dimensioni e sui contenuti o a interruzioni di riga non necessarie.
In LayoutNG, il testo viene disposto a livello di paragrafo e poi suddiviso in righe. Ciò consente di migliorare le prestazioni, la qualità del rendering del testo e la rottura delle righe. Le differenze più significative sono descritte di seguito.
Unioni oltre i confini degli elementi
In alcuni script, alcuni caratteri possono essere uniti visivamente quando sono adiacenti. Dai un'occhiata a questo esempio in arabo:
In LayoutNG, l'unione ora funziona anche se i caratteri si trovano in elementi diversi. Le unioni verranno conservate anche quando vengono applicati stili diversi. (vedi bug di Chromium 6122).
Un grafema è l'unità più piccola del sistema di scrittura di una lingua. Ad esempio, in inglese e in altre lingue che utilizzano l'alfabeto latino, ogni lettera è un grafema.
Le immagini seguenti mostrano il rendering del seguente codice HTML rispettivamente nell'engine di layout precedente e in LayoutNG:
<div>نسق</div>
<div>نس<span>ق</span></div>
Nota come cambia la forma della seconda lettera
Le due versioni sono ora identiche
Legature cinese, giapponese e coreano (CJK)
Sebbene Chromium supporti già le legature e le attivi per impostazione predefinita, esistono alcune limitazioni: le legature che coinvolgono più punti di codice CJK non sono supportate nel motore di layout precedente a causa di un'ottimizzazione del rendering. LayoutNG rimuove queste limitazioni e supporta le legature indipendentemente dall'alfabeto.
L'esempio seguente mostra il rendering di tre legature facoltative utilizzando il carattere Adobe SourceHanSansJP:
MHz forma correttamente una legatura
ma マンション e 10点 no
Tutti e tre i gruppi formano legature come previsto
Elementi relativi alle dimensioni dei contenuti
Per gli elementi che si adattano ai contenuti (ad esempio i blocchi in linea), l'attuale motore di layout calcola prima le dimensioni del blocco e poi esegue il layout sui contenuti. In alcuni casi, ad esempio quando un carattere è molto spaziato, questo può comportare una mancata corrispondenza tra le dimensioni dei contenuti e il blocco. In LayoutNG, questa modalità di errore è stata eliminata perché le dimensioni del blocco vengono impostate in base ai contenuti effettivi.
L'esempio seguente mostra un blocco giallo adattato alle dimensioni dei contenuti. Utilizza il carattere Lato che utilizza il kerning per regolare la spaziatura tra T e -. I limiti della casella gialla devono corrispondere ai limiti del testo.
Nota lo spazio vuoto finale dopo l'ultima T
Nota come i bordi sinistro e destro della casella corrispondano ai limiti del testo
Ritorno a capo automatico
In modo simile al problema descritto sopra, se i contenuti di un blocco di dimensioni proporzionali ai contenuti sono più grandi (più larghi) del blocco, a volte i contenuti possono essere a capo inutilmente. Si tratta di un caso piuttosto raro, ma a volte si verifica per i contenuti con direzione mista.
Nota l'interruzione di riga non necessaria e lo spazio extra a destra
Nota come i bordi sinistro e destro della casella corrispondano ai limiti del testo
Ulteriori informazioni
Per informazioni più dettagliate sui problemi di compatibilità e sui bug specifici correttati da LayoutNG, consulta i problemi collegati sopra o cerca nel database dei bug di Chromium i bug contrassegnati come Fixed-In-LayoutNG.
Se sospetti che LayoutNG possa aver causato il malfunzionamento di un sito web, invia una segnalazione di bug, e provvederemo a effettuare accertamenti.