Modalità di scrittura e layout CSS

Questo non è un articolo sull'applicazione pratica o creativa di questa proprietà. Invece, voglio dimostrare perché la comprensione delle modalità di scrittura è così importante, anche a quelli di noi che hanno raramente bisogno di cambiare la modalità di scrittura di una pagina o di un componente. Il supporto di più modalità di scrittura è fondamentale per il modo in cui sono stati progettati i nostri nuovi metodi di layout di Flexbox e Grid Layout. Comprendere questo può sbloccare una migliore comprensione di come funzionano questi metodi di layout.

Cosa sono le modalità di scrittura?

La modalità di scrittura di un documento o di un componente si riferisce alla direzione in cui scorre il testo. In CSS, per lavorare con le modalità di scrittura utilizziamo la proprietà writing-mode . Questa proprietà può assumere i seguenti valori:

• horizontal-tb
• vertical-rl
• vertical-lr
• sideways-rl
• sideways-lr

Se stai leggendo questo articolo su Smashing Magazine in inglese, la modalità di scrittura di questo documento è horizontal-tb o Horizontal Top To Bottom . In inglese, le frasi sono scritte orizzontalmente, la prima lettera di ogni riga che inizia a sinistra.

Una lingua come l'arabo ha anche una modalità horizontal-tb . È scritto orizzontalmente, dall'alto verso il basso, tuttavia la scrittura araba è scritta da destra a sinistra, quindi le frasi in arabo iniziano a destra.

Cinese, giapponese e coreano sono scritti verticalmente, con il primo carattere della prima frase in alto a destra. Segue frasi aggiunte a sinistra. Pertanto, la modalità di scrittura utilizzata è vertical-rl . Una modalità di scrittura verticale che va da destra a sinistra.

Anche il mongolo è scritto verticalmente, ma da sinistra a destra. Pertanto, se si desidera digitare lo script mongolo, utilizzare la modalità di scrittura vertical-lr .

Gli altri due valori della writing-mode sono progettati più per scopi creativi che per la composizione di script verticali. L'uso sideways-lr e sideways-rl trasforma il testo lateralmente, anche i caratteri normalmente scritti verticalmente e verticalmente. I valori, sfortunatamente, al momento sono supportati solo in Firefox. Il seguente CodePen mostra tutti i diversi valori di writing-mode , dovrai usare Firefox se vuoi vedere quelli sideways-* in azione.

Le modalità di scrittura possono essere utilizzate durante la creazione di un documento che utilizza una lingua scritta utilizzando quella modalità di scrittura. Possono anche essere utilizzati in modo creativo, ad esempio, per impostare un'intestazione verticalmente lungo il lato di alcuni contenuti. In questo articolo, tuttavia, voglio dare un'occhiata all'impatto che il supporto dei linguaggi verticali e la possibilità del testo verticale ha sul layout CSS e sui CSS in generale.

Prima di farlo, se sei interessato all'uso delle modalità di scrittura per il testo verticale, ecco alcune risorse utili:

• Il sito dell'internazionalizzazione del W3C contiene molte informazioni utili. Leggi gli script RTL e il testo verticale.
• Jen Simmons ha scritto un eccellente articolo sulle modalità di scrittura CSS che include anche diversi esempi dalla stampa di queste modalità in uso.
• Pensieri sul mondo e sui nostri sistemi di scrittura - Chen Hui Jing
• Composizione verticale con modalità di scrittura rivisitata - Chen Hui Jing
• La proprietà della modalità di scrittura su MDN

Il blocco e le dimensioni in linea

Quando cambiamo la modalità di scrittura di un documento, ciò che stiamo facendo è cambiare la direzione del flusso del blocco . Pertanto, diventa rapidamente molto utile per noi capire cosa si intende per blocco e inline.

Una delle prime cose che apprendiamo sui CSS è che alcuni elementi sono elementi di blocco, ad esempio un paragrafo. Questi elementi vengono visualizzati uno dopo l'altro nella direzione del blocco. Gli elementi in linea, come una parola in una frase, vengono visualizzati uno dopo l'altro nella direzione in linea. Lavorando in modalità di scrittura orizzontale, ci abituiamo al fatto che la dimensione del blocco va dall'alto verso il basso verticalmente e la dimensione in linea da sinistra a destra orizzontalmente.

Poiché gli elementi block e inline si riferiscono alla modalità di scrittura del nostro documento, tuttavia, la dimensione inline è orizzontale solo se ci troviamo in una modalità di scrittura orizzontale. Non si riferisce alla larghezza, ma invece alla dimensione in linea. La dimensione del blocco è solo verticale quando si è in modalità di scrittura orizzontale. Quindi non si riferisce all'altezza, ma alla dimensione del blocco.

Proprietà logiche, relative al flusso

Questi termini, dimensione inline e dimensione del blocco sono usati anche come nomi di nuove proprietà CSS progettate per riflettere il nostro nuovo mondo consapevole della modalità di scrittura. Se, in una modalità di scrittura orizzontale, utilizzi la proprietà inline-size invece di width , agirà esattamente allo stesso modo di width, finché non cambierai la modalità di scrittura del tuo componente. Se utilizzi la width che sarà sempre una dimensione fisica, sarà sempre la dimensione del componente in orizzontale. Se utilizzi inline-size , quella sarà la dimensione nella dimensione in linea, come mostra l'esempio seguente.

Lo stesso vale per l' height . La proprietà height sarà sempre la dimensione verticale. Si riferisce a quanto è alto l'oggetto. La proprietà block-size , invece, fornisce la dimensione nella dimensione del blocco , verticalmente se siamo in una modalità di scrittura orizzontale e orizzontale in una verticale.

Come ho descritto nel mio articolo "Capire i valori e le proprietà logiche", ci sono mappature per tutte le proprietà fisiche, quelle che sono legate alle dimensioni dello schermo. Una volta che inizi a pensarci, gran parte dei CSS viene specificata in relazione al layout fisico di uno schermo. Impostiamo posizionamento, margini, riempimento e bordi utilizzando in alto, a destra, in basso e a sinistra. Facciamo fluttuare le cose a destra ea sinistra. A volte legare le cose alla dimensione fisica sarà ciò che vogliamo, tuttavia sempre più spesso pensiamo ai nostri layout senza fare riferimento alla posizione fisica. La specifica Proprietà e valori logici implementa questo modo indipendente dalla modalità di scrittura di lavorare attraverso CSS.

Modalità di scrittura, griglia e Flexbox

Quando i nostri nuovi metodi di layout sono atterrati sulla scena, hanno portato con sé un modo agnostico di guardare alla modalità di scrittura del componente che viene disposto come layout flessibile o griglia. Per la prima volta alle persone è stato chiesto di pensare all'inizio e alla fine, piuttosto che a sinistra e a destra, in alto e in basso.

Quando ho iniziato a presentare l'argomento CSS Grid, le mie prime presentazioni erano un riassunto di tutte le proprietà nella specifica. Ho detto che la proprietà grid-area potrebbe essere utilizzata per impostare tutte e quattro le linee per posizionare un elemento della griglia. L'ordine di quelle righe, tuttavia, non era quello familiare in alto, a destra, in basso e a sinistra che usiamo per impostare tutti e quattro i margini. Invece, dobbiamo usare in alto, a sinistra, in basso, a destra - il contrario di quell'ordine! Fino a quando non ho capito la connessione tra la griglia e le modalità di scrittura, mi è sembrata una decisione molto strana. Mi sono reso conto che quello che stiamo facendo è impostare entrambe le linee di partenza, quindi entrambe le linee di arrivo. Usare in alto, a destra, in basso e a sinistra funzionerebbe bene se fossimo in una modalità di scrittura orizzontale, girare la griglia su un lato comunque e questo non ha senso. Se usiamo grid-area: 1 / 2 / 3 / 5; come nella penna sottostante le linee sono impostate come segue:

• grid-row-start: 1; - inizio blocco
• grid-column-start: 2 - inizio in linea
• grid-row-end: 3 - fine blocco
• grid-column-end: 5 - fine in linea

Righe e colonne Flexbox

Se utilizzi Flexbox e aggiungi display: flex a un container, i tuoi articoli verranno visualizzati come una riga poiché il valore iniziale della proprietà flex-direction è row . Una riga seguirà la dimensione in linea della modalità di scrittura in uso. Pertanto, se la tua modalità di scrittura è horizontal-tb una riga viene eseguita in orizzontale. Se la direzione del testo dello script corrente è da sinistra a destra, gli elementi si allineeranno a partire da sinistra, se è da destra a sinistra si allineeranno a partire da destra.

Tuttavia, utilizzare una modalità di scrittura verticale, come vertical-rl e flex-direction: row farà sì che gli elementi dispongano verticalmente, poiché la direzione inline è verticale. In questo prossimo CodePen tutti gli esempi hanno flex-direction: row , solo la modalità o la direzione di scrittura è cambiata.

Aggiungi flex-direction: column e il layout degli elementi nella dimensione del blocco della modalità di scrittura. In una modalità di scrittura orizzontale la dimensione del blocco è dall'alto verso il basso, quindi una colonna è verticale. Con una modalità di scrittura vertical-rl una colonna è orizzontale. Come nell'esempio precedente, l'unica differenza tra i layout flessibili seguenti è la modalità di scrittura utilizzata.

Posizionamento automatico della griglia

Quando utilizzi il posizionamento automatico nella griglia, vedrai un comportamento simile a quello del layout flessibile. Gli elementi della griglia si posizionano automaticamente in base alla modalità di scrittura del documento. L'impostazione predefinita è posizionare gli elementi in righe, che saranno la direzione in linea - orizzontalmente in una modalità di scrittura orizzontale e verticalmente in una verticale.

Prova a modificare il flusso di elementi in column come nell'esempio seguente. Gli elementi ora scorreranno nella dimensione del blocco - verticalmente in una modalità di scrittura orizzontale e orizzontalmente in una verticale.

Posizionamento della linea della griglia

Il posizionamento basato sulla linea rispetta anche la modalità di scrittura. Le linee della nostra griglia iniziano da 1, sia per le righe che per le colonne. Se posizioniamo un elemento dalla riga di colonna 1 alla riga di colonna 3 e ci troviamo in una modalità di scrittura orizzontale con una direzione da sinistra a destra, quell'elemento si estenderà dalla riga della colonna più a sinistra attraverso due tracce della griglia orizzontalmente. Si estende così su due colonne.

Cambia la modalità di scrittura in vertical-rl e la riga della colonna 1 sarà nella parte superiore della griglia, l'elemento si estenderà verticalmente su due tracce. Si estendono ancora su due colonne, ma ora le colonne sono in esecuzione orizzontalmente.

Allineamento In Griglia E Flexbox

Uno dei primi posti in cui molte persone entreranno in contatto con il modo in cui Flexbox ha gestito le modalità di scrittura, sarebbe quando si allineano gli elementi in un layout flessibile. Se prendiamo l'esempio flex-direction: row sopra, e utilizziamo la proprietà justify-content per allineare tutti gli elementi in modo che l' flex-end si sposti alla fine della loro riga. Ciò significa che in una modalità di scrittura orizzontale con direzione da sinistra a destra, gli elementi si spostano tutti a destra, poiché la fine di quella riga è a destra. Se la direzione è da destra a sinistra, si spostano tutti a sinistra.

Nella modalità di scrittura verticale, si spostano in basso, supponendo che ci sia spazio per farlo. Ho impostato una inline-size sui componenti in questo esempio per assicurarci di avere spazio libero nei nostri contenitori flessibili per vedere l'allineamento in azione.

L'allineamento è un po' più facile da capire nel layout della griglia, poiché abbiamo sempre i due assi con cui giocare. La griglia è bidimensionale, quelle due dimensioni sono a blocco e in linea. Pertanto, puoi ricordare una regola se vuoi sapere se usare le proprietà che iniziano con align- o quelle che iniziano con justify- . Nel layout della griglia le proprietà align: align- align-content , align-items , align-self vengono utilizzate per eseguire l'allineamento dell'asse del blocco. In una modalità di scrittura orizzontale che significa verticale, e in una modalità di scrittura verticale orizzontalmente.

Ancora una volta, non usiamo sinistra e destra o in alto e in basso, poiché vogliamo che il nostro layout della griglia funzioni esattamente allo stesso modo, indipendentemente dalla modalità di scrittura. Quindi ci allineiamo usando start e end . Se ci allineiamo per start sulla dimensione del blocco, quella sarà in top quando in horizontal-tb , ma sarà right quando in vertical-rl . Dai un'occhiata all'esempio seguente, i valori di allineamento sono identici in entrambe le griglie, l'unica differenza è la modalità di scrittura utilizzata.

Le proprietà justify-content , justify-items , justify-self sono sempre utilizzate per l'allineamento in linea nel layout della griglia. Sarà orizzontale in modalità di scrittura orizzontale e verticale in modalità di scrittura verticale.

L'allineamento di Flexbox è in qualche modo complicato dal fatto che l'asse principale può essere cambiato da riga a colonna. Pertanto, in Flexbox, dobbiamo considerare il metodo di allineamento come l'asse principale rispetto all'asse trasversale. Le proprietà align- vengono utilizzate sull'asse trasversale. Sull'asse principale, tutto ciò che hai è justify-content perché trattiamo gli articoli come un gruppo in Flexbox. Sull'asse trasversale, puoi utilizzare align-content nei casi in cui hai più linee flessibili e spazio nel contenitore flessibile per distanziarle. Puoi anche usare align-items e align-self per spostare gli elementi flessibili sull'asse trasversale in relazione tra loro e alla loro linea flessibile.

Per ulteriori informazioni sull'allineamento nel layout CSS, vedere i miei precedenti articoli di Smashing Magazine:

• Come allineare le cose in CSS
• Tutto quello che devi sapere sull'allineamento in Flexbox

Consapevolezza della modalità di scrittura e CSS precedenti

Non tutti i CSS hanno pienamente raggiunto questo modo di lavorare indipendente dalla modalità di scrittura relativo al flusso. I luoghi in cui non ha iniziato a risaltare come insoliti più pensi alle cose in termini di blocco e inline, inizio e fine. Ad esempio, in un layout a più colonne, specifichiamo column-width , che in realtà significa column inline-size, poiché non è mappato alla larghezza fisica quando si lavora in modalità di scrittura verticale.

Come puoi vedere, le modalità di scrittura sono alla base di gran parte di ciò che facciamo in CSS, anche se non utilizziamo mai una modalità di scrittura diversa da horizontal-tb .

Trovo incredibilmente utile pensare al layout CSS in questa modalità di scrittura in modo indipendente. Anche se forse è un po' presto per cambiare tutte le nostre proprietà e valori in quelli logici, siamo già in un mondo relativo al flusso quando abbiamo a che fare con nuovi metodi di layout. Il fatto che il tuo modello mentale sia uno di blocco e in linea, inizio e fine, piuttosto che legato ai quattro angoli dello schermo, chiarisce molte delle cose che incontriamo quando utilizziamo FlexBox e la griglia.