Share
Questa mattina ho dovuto creare un testo verticale per un progetto su cui sto lavorando. Dopo aver provato un paio di idee, ho preso su Twitter per trovare che tipo di pensieri avevano i nostri seguaci sull'argomento. Ci sono state molte grandi risposte e idee che andremo a finire oggi!
* Nota: fare riferimento a "Metodo 6" di seguito per ulteriori dettagli sull'utilizzo corretto.Iscriviti alla nostra pagina YouTube per guardare tutti i tutorial video!
Preferisci guardare questo video su Screenr?
Accentsconagua
Quindi, è possibile aggiungere un modo possibile (anche se non consigliato) per ottenere testo verticale
N
E
T
T
U
T
S
Non usare questo metodo. È zoppo e sciatto.
Con questo metodo, avvolgiamo ogni lettera in un intervallo e quindi impostiamo il suo display a bloccare all'interno del nostro CSS.
Testo verticale N E T T U T S
Il problema con questa soluzione, a parte la spaventosa maggiorazione, è che si tratta di un processo manuale. Se il testo è generato dinamicamente da un CMS, sei sfortunato. Non usare questo metodo.
Il mio istinto iniziale era di aggiungere dinamicamente il campata tag con JavaScript. In questo modo, aggiriamo i problemi menzionati nel metodo due.
JS Bin Nettuts
Questo metodo è sicuramente un miglioramento. In alto, noi Diviso il testo in una matrice e quindi avvolgere ogni lettera in a campata. Mentre potremmo usare qualcosa come a per dichiarazione, o $ .map per filtrare l'array, una soluzione molto migliore e più rapida è quella di unire e avvolgere manualmente il testo contemporaneamente.
Anche se meglio, questa soluzione non è raccomandata.
Andiamo via da JavaScript se possiamo. Cosa succede se abbiamo applicato una larghezza all'elemento contenitore e forzato il testo a capo? Potrebbe funzionare.
JS Bin Nettuts
In questo scenario, applichiamo una larghezza molto stretta al h1 tag, e poi fai il suo dimensione del font uguale a quel valore esatto. Finalmente, impostando word-wrap uguale a break-word, possiamo forzare ogni lettera sulla propria linea. però, word-wrap: break-word fa parte delle specifiche CSS3 e non è conforme a tutti i browser.
Escludendo i browser più vecchi, questo sembra risolvere il nostro problema ... ma non del tutto. La demo sopra sembra funzionare, ma è troppo rischioso giocare con i valori dei pixel. Proviamo qualcosa di semplice come trasformare le lettere maiuscole in minuscole.
yikes; con questo metodo, dobbiamo stare molto attenti quando si tratta dei valori specifici che impostiamo. Non consigliato.
spaziatura del carattere Per precauzione e per estendere il metodo quattro, perché non si applica abbastanza grande spaziatura del carattere per aggirare questo problema?
JS Bin Nettuts
Questo sembra risolvere il problema, anche se, di nuovo, stiamo usando un po 'di CSS3 qui.
emS In alternativa, c'è una soluzione one-liner. Ricorda quando abbiamo appreso che l'applicazione overflow: nascosto a un elemento genitore sarebbe miracolosamente farlo contenere i suoi galleggianti? Questo metodo è un po 'come quello! La chiave è da usare ems, e inserire uno spazio tra ogni lettera.
JS Bin Non ci sono
Abbastanza pulito, giusto? In questo modo puoi applicare qualsiasi dimensione di carattere che desideri. Perché stiamo usando ems - che è uguale al x-altezza del carattere scelto - ci viene quindi fornita molta più flessibilità.
Ma, ancora una volta, a volte più di una lettera finirà su una linea. Devi essere sicuro; è per questo che ho applicato arbitrariamente grandi spaziatura del carattere per garantire che non ci sia mai più di una lettera su una linea.
Per quanto ne so, questa è la soluzione migliore e più compatibile con i browser.
Lo spazio bianco Un ultimo modo per ottenere questo effetto è approfittare del white-space proprietà.
J E F F R E Y
IMPOSTANDO white-space a pre, che istruisce il testo a comportarsi come se fosse all'interno di a pre etichetta. In quanto tale, onora qualsiasi spaziatura che hai aggiunto.
Non dovrebbe esserci una regola CSS3 per svolgere questo compito? Cosa succede se potrei impostare qualcosa sulla falsariga di: font-display: letter-block; che istruiva ogni lettera da rendere come un blocco di sorta?
Cosa pensi? Avete altre alternative che dovremmo prendere in considerazione? Molte persone hanno suggerito di utilizzare la rotazione del testo per eseguire l'operazione, ma è importante ricordare che anche questo ruota il testo di novanta gradi, che non è quello che stiamo cercando di ottenere.
