Share
In questo suggerimento rapido ho intenzione di mostrarvi come visualizzare il testo su una pagina Web che va dall'alto verso il basso, invece da sinistra a destra (o da destra a sinistra). Ci sono due approcci, uno è migliore dell'altro, quindi saltiamo dentro e dare un'occhiata!
Se hai familiarità con i CSS potresti pensarlo istintivamente trasformare sarebbe il modo migliore per affrontare questo problema, ma lascia che ti mostri perché non è l'ideale. Inizieremo con alcuni contenuti (alcune intestazioni e un paragrafo), quindi applicheremo a trasformare, insieme a a trasformare origine in modo che ruoti dal punto corretto, quindi un offset per tenerlo sullo schermo:
Questo approccio funziona in termini di rotazione del testo, ma il flusso del documento non è influenzato, quindi il h2 nel nostro caso ora si trova in cima al contenuto sottostante. Tuttavia, ci dà un risultato piuttosto interessante.
Il nostro secondo approccio manterrà il flusso del documento in modo che rimanga fedele alle dimensioni del h2, indipendentemente dalla direzione del testo. Useremo la proprietà in modalità scrittura, come questa:
h2 modalità scrittura: verticale-rl;
In questo caso gli abbiamo dato un valore di verticale-rl, che applica una direzione di visualizzazione verticale e una direzione del testo da destra a sinistra. Guarda:
Molto meglio. Noterai anche che il cursore cambia, cosa che non accade con la trasformazione CSS.
Avrai notato che abbiamo utilizzato un valore di rl (da destra a sinistra) mentre siamo abituati a leggere la scrittura latina da sinistra a destra. Ma è perché abbiamo cambiato il Blocca direzione del flusso. se diamo il nostro h2 un valore di altezza impostato, vedrai il testo a capo e ti renderai conto che in questo caso abbiamo effettivamente bisogno delle righe da leggere a destra della pagina a sinistra:
Questo ci porta a dover definire quali bit di tutto questo allineamento devono fluire e in quali direzioni. Gli script basati sul latino scorrono dall'alto verso il basso (questo è il Blocca direzione del flusso). Il loro testo si legge da sinistra a destra (questo è il Direzione del flusso in linea). E i loro personaggi hanno una linea di base in basso mentre puntano verso l'alto (questo è il Direzione del personaggio). Come questo:
Altri script, come quelli basati su arabo, basati su Han (come il cinese e il giapponese) e basati su mongoli, possono visualizzare testo utilizzando questi tre flussi in qualsiasi combinazione di direzioni.
La specifica della modalità di scrittura è stata progettata per supportare tutti i vari script e sistemi di scrittura del mondo. Abbiamo citato sistemi basati su mongoli, ad esempio, qualsiasi essi siano visualizzati verticalmente, ma flusso da sinistra a destra.
Altri valori in modalità scrittura, che puoi utilizzare oggi, includono:
Accentsconagua
verticale-lr dove il testo viene eseguito verticalmente ma inizia a sinistra del contenitore che scorre a destra.orizzontale-tb dove il testo rimane orizzontale, ma scorre dall'alto verso il basso. Questo (avrai notato) è un comportamento predefinito.Ecco un'altra cosa da dare un'occhiata: un poema cinese, usando verticale-rl modalità di scrittura. Il suo contenuto è a destra, in modo da iniziare a destra della pagina e leggere verso sinistra. Ma quello che forse noterai è che i personaggi sono ancora orientati in senso verticale. I caratteri latini sarebbero orientati diversamente con queste stesse regole. Questo è intenzionale:
"Lo standard Unicode assegna una proprietà a ciascun carattere e i browser possono utilizzarlo per determinare l'orientamento predefinito di un determinato carattere." - W3C
È possibile personalizzare ulteriormente l'orientamento dei caratteri usando il text-orientamento proprietà.
La modalità di scrittura CSS ha un eccellente supporto per i browser al momento della scrittura, sebbene alcuni aspetti siano ancora in fase di sviluppo. Tutto ciò che mi hai visto fare in questo tutorial può essere utilizzato in produzione in questo momento.
Che tu lo usi per risultati pratici o estetici, vediamo cosa hai fatto nei commenti!
