Come creare testo verticale usando CSS e/o JavaScript

image

Se, per esigenze grafiche, ci ritroviamo a dover creare del testo verticale, scopriremo che non c’è un vero ed unico modo per raggiungere l’obiettivo. Incredibilmente, il W3C non ha dato proprietà per indicate per creare qualcosa del genere: difatti i seguenti sono praticamente tutti considerabili "tricks".

Il primo metodo che viene in mente riguarda JavaScript. In questo esempio, si va ad analizzare l’elemento h1, che deve avere quel particolare effetto, e lo si va a scomporre, parola per parola, in modo che tutte siano andati a capo:

CSS:

h1 span {
display: block;
}

JavaScript:

var h1_c = document.getElementsByTagName('h1')[0];
h1_c.innerHTML = '<span>' + h1_c.innerHTML.split('').join('</span><span>') + '</span>';

HTML: 

<h1>Pane&Design</h1>

Il problema di questa soluzione è il problema di JavaScript, ovvero: se l’utente ha JavaScript disabilitato? Inoltre, essendo una soluzione che esula sostanzialmente il CSS, non è leggibile dallo stesso codice.

Un altro metodo, riguarda stavolta il puro CSS e si tratta di applicare la proprieta “letter-spacing" con un valore grande a piacere in accoppiata con una larghezza scritta in "em", l’unità di misura che dipende dalla dimensione del carattere, in questo modo:

CSS

h1 { 
width: 2em;
font-size: 35px;
/* grande abbastanza per sicurezza */
letter-spacing: 40px;
font-family: "Tahoma", Arial, sans-serif;


}

HTML

<h1>P a n e & D e s i g n</ h1>

In questo modo, è possibile applicare qualsiasi dimensione al carattere, poiché stiamo usando gli em. Tutto è molto più flessibile. Questa è forse la migliore soluzione, poiché compatibile con tutti i browser e leggibile.

Ci sono altri metodi, che magari coinvolgono proprietà CSS3 come ad esempio box-shadow, i quali però non sono resi allo stesso modo da tutti i browser, e vanno quindi evitati per parti basilari per una corretta visualizzazione come questa.

Fabrizio Fallico, Web & Front-end Developer @Pane&Design