LayoutNG

LayoutNG, progettato per essere rilasciato in Chrome 76, è un nuovo motore di layout che uscirà in seguito a un impegno di più anni. Sono previsti miglioramenti immediati, ulteriori miglioramenti del rendimento e funzioni di layout avanzate.

Novità

  1. Migliora l'isolamento delle prestazioni.
  2. Supporto migliore per scritture diverse dal latino.
  3. Corregge molti problemi relativi a valori in virgola mobile e margini.
  4. Risolve numerosi problemi di compatibilità web.

Tieni presente che LayoutNG verrà lanciato in fasi. In Chrome 76 viene usato LayoutNG per il layout in linea e a blocchi. Altre primitive del layout (ad esempio tabella, flexbox, griglia e frammentazione dei blocchi) verranno sostituite nelle release successive.

Modifiche visibili allo sviluppatore

Sebbene l'impatto visibile agli utenti debba essere minimo, LayoutNG modifica alcuni comportamenti in modo molto discreto, corregge centinaia di test e migliora la compatibilità con altri browser. Nonostante i nostri migliori sforzi, è probabile che questo causi il rendering o un comportamento leggermente diverso di alcuni siti e applicazioni.

Anche le caratteristiche in termini di prestazioni sono piuttosto diverse; sebbene le prestazioni nel complesso siano simili o leggermente migliori rispetto a prima, è probabile che alcuni casi d'uso notino miglioramenti delle prestazioni, mentre per altri è previsto un leggero peggioramento, almeno a breve termine.

Float

LayoutNG reimplementa il supporto per gli elementi floating (float: left; e float: right;) correggendo una serie di problemi di correzione relativi al posizionamento dei valori mobili in relazione ad altri contenuti.

Contenuti sovrapposti

La precedente implementazione mobile non prendeva in considerazione correttamente i margini durante il posizionamento dei contenuti intorno a un elemento mobile, con la conseguenza che i contenuti si sovrapponevano parzialmente o completamente al formato mobile stesso. La manifestazione più comune di questo bug viene visualizzata quando un'immagine viene posizionata accanto a un paragrafo in cui la logica di evitamento non tiene conto dell'altezza di una riga. (Visualizza il bug di Chromium n. 861540).

riga di testo superiore mostrata sopra un'immagine fluttuante
Fig 1a, Motore di layout legacy
Il testo si sovrappone all'immagine mobile a destra
testo corretto a sinistra e immagine fluttuante a destra
Fig 1b, LayoutNG
Il testo viene posizionato accanto all'immagine mobile a destra

Lo stesso problema può verificarsi all'interno di una singola riga. L'esempio seguente mostra un elemento blocco con margine negativo dopo un elemento mobile (#895962). Il testo non deve sovrapporsi al carattere in virgola mobile.

riga di testo sovrapposta a un riquadro arancione
Fig 2a, Motore di layout precedente
Il testo si sovrappone all'elemento arancione mobile
testo corretto a destra di una casella arancione
Fig 2b, LayoutNG
Il testo viene posizionato accanto all'elemento arancione mobile

Posizionamento del contesto di formattazione

Quando un elemento che forma un contesto di formattazione in blocco viene ridimensionato accanto a valori mobili, il motore del layout precedente prova a ridimensionare il blocco un numero fisso di volte prima di rinunciare. Questo approccio ha comportato un comportamento imprevedibile e instabile e non corrisponde ad altre implementazioni. In LayoutNG vengono presi in considerazione tutti i valori mobili in virgola mobile durante il dimensionamento del blocco. (Visualizza il bug di Chromium n. 548033).

Il posizionamento assoluto e fisso ora è più conforme alle specifiche W3C e corrisponde meglio al comportamento in altri browser. Le differenze tra i due sono più visibili in due casi:

  • Blocchi contenenti più righe in linea
    Se un blocco contenente una posizione assoluta copriva più righe, il motore precedente potrebbe utilizzare in modo errato solo un sottoinsieme di righe per calcolare i limiti dei blocchi di contenimento.
  • Modalità di scrittura verticale
    Il motore precedente presentava molti problemi nel posizionare gli elementi out-of-flow nella posizione predefinita nelle modalità di scrittura verticale. Consulta la prossima sezione per scoprire di più sul supporto migliorato della modalità di scrittura.

Lingue da destra a sinistra (RTL) e modalità di scrittura verticale

LayoutNG è stato progettato interamente per supportare modalità di scrittura verticali e linguaggi RTL, inclusi i contenuti bidirezionali.

Testo bidirezionale

LayoutNG supporta l'algoritmo bidirezionale più aggiornato, definito dallo standard Unicode. Questo aggiornamento non solo corregge vari errori di rendering, ma include anche funzionalità mancanti come il supporto delle parentesi quadrate accoppiate (vedi il bug di Chromium n. 302469).

Flussi ortogonali

LayoutNG migliora la precisione del layout del flusso verticale, inclusi, ad esempio, il posizionamento di oggetti in posizione assoluta e il dimensionamento delle finestre di flusso ortogonali (soprattutto se si utilizza la percentuale). Dei 1258 test nelle suite di test W3C, 103 test non riusciti nel motore di layout precedente sono stati superati in LayoutNG.

Dimensioni intrinseche

Ora le dimensioni intrinseche vengono calcolate correttamente quando un blocco contiene elementi secondari in modalità di scrittura ortogonale.

Layout del testo e interruzione di riga

Il motore di layout precedente di Chromium disponeva il testo elemento per elemento e riga per riga. Questo approccio ha funzionato bene nella maggior parte dei casi, ma ha richiesto molta ulteriore complessità per supportare gli script e ottenere buone prestazioni. Era inoltre soggetta a incoerenze di misurazione, il che portava a piccole differenze nel dimensionamento dei container dimensioni-contenuti e ai loro contenuti o interruzioni di riga superflue.

In LayoutNG, il testo viene disposto a livello di paragrafo e poi suddiviso in righe. Ciò consente prestazioni migliori, rendering del testo di qualità superiore e interruzioni di riga più coerenti. Le differenze più significative sono descritte di seguito.

Unione oltre i confini dell'elemento

In alcuni script, alcuni caratteri possono essere uniti visivamente quando sono adiacenti. Guarda questo esempio dall'arabo:

In LayoutNG, l'unione ora funziona anche se i caratteri si trovano in elementi diversi. I join verranno anche conservati se viene applicato uno stile diverso. (Consulta il bug di Chromium n. 6122.)

Un grafo è l'unità più piccola del sistema di scrittura di una lingua. Ad esempio, in inglese e in altre lingue che usano l'alfabeto latino, ogni lettera è un grafema.

Le immagini di seguito mostrano il rendering del seguente codice HTML, rispettivamente, nel motore di layout precedente e in LayoutNG:

<div>&#1606;&#1587;&#1602;</div>
<div>&#1606;&#1587;<span>&#1602;</span></div>
grafeme corretto a sinistra e rendering errato separato a destra
Fig 3a, Motore di layout legacy
Nota come cambia la forma della seconda lettera
grafemi combinati appropriati
Fig 3b, LayoutNG
Le due versioni ora sono identiche

Legature cinese, giapponese e coreano (CJK)

Anche se Chromium supporta già le legature e le attiva per impostazione predefinita, esistono alcune limitazioni: le legature che coinvolgono più punti di codice CJK non sono supportate nel motore di layout legacy a causa di un'ottimizzazione del rendering. LayoutNG rimuove queste restrizioni e supporta le legature indipendentemente dallo script.

L'esempio seguente mostra il rendering di tre legature discrezionali utilizzando il carattere Adobe SourceHanSansJP:

combinazione di caratteri centrali che non forma il legame
Fig 4a, Motore di layout legacy
I MHz formano correttamente una legatura
ma マンチョン e 10点 non lo fanno
legature corrette
Fig 4b, LayoutNG
Tutti e tre i gruppi formano legature come previsto

Elementi di dimensione-contenuto

Per elementi che si adattano ai contenuti (come i blocchi incorporati), il motore di layout corrente calcola prima le dimensioni del blocco e poi esegue il layout sui contenuti. In alcuni casi, ad esempio quando un carattere si riduce in modo aggressivo, questo può comportare una mancata corrispondenza tra le dimensioni dei contenuti e il blocco. In LayoutNG questa modalità di errore è stata eliminata perché il blocco viene ridimensionato in base ai contenuti effettivi.

L'esempio seguente mostra un blocco giallo ridimensionato in base ai contenuti. Viene utilizzato il carattere Lato, che utilizza la crenatura per regolare la spaziatura tra T e -. I limiti della casella gialla devono corrispondere ai limiti del testo.

spazio vuoto finale mostrato alla fine del contenitore di testo
Fig 5a, Motore di layout legacy
Annota lo spazio vuoto finale dopo l'ultima T
I limiti di testo non contengono spazi aggiuntivi
Fig 5b, LayoutNG
Nota come i bordi sinistro e destro del riquadro corrispondano ai margini del testo

Ritorno a capo automatico

Analogamente al problema descritto sopra, se i contenuti di un blocco dimension-to-content sono più grandi (più ampi) rispetto al blocco, a volte i contenuti possono essere aggregati inutilmente. Questo è abbastanza raro, ma a volte accade per contenuti con direzioni diverse.

interruzione di riga prematura che causa spazio aggiuntivo
Fig 6a, Motore di layout legacy
Nota l'interruzione di riga e lo spazio extra a destra
senza mostrare spazi o interruzioni di riga superflue
Fig 6b, LayoutNG
Nota come i bordi sinistro e destro del riquadro corrispondano ai margini del testo

Ulteriori informazioni

Per informazioni più dettagliate sui problemi di compatibilità specifici e sui bug corretti da LayoutNG, consulta i problemi indicati sopra o cerca nel database dei bug di Chromium i bug contrassegnati con Fixed-In-LayoutNG.

Se sospetti che LayoutNG possa aver causato l'interruzione di un sito web, invia una segnalazione di bug ed effettueremo i dovuti accertamenti.