CSS3: giustificare un paragrafo (hyphens)

Una cosa sempre richiesta nell’ambito dei siti web e sostanzialmente fino ad ora mai soddisfatta, è la possibilità  di giustificare un testo. La causa è da ricercare nel fatto che non essendo i browser in grado di sillabare i testi l’esito grafico spesso era disastroso: due righe adiacenti potevano contenere diverse quantità  di sillabe e compensare questa differenza dilatando gli spazi bianchi: esito pessimo.

Con CSS3 e in particolare la proprietà  hyphens le cose cambiano, vediamo come.

Prepariamo un div con un paragrafo e del testo:

<div id="contenitore">
 <p lang="it" class="hyphenate">I consumi elettrici in Italia ...</p>
 </div>
 

Si noti l’attributo, de facto obbligatorio, lang valorizzato con la lingua del testo.

Il foglio di stile contiene il contenitore “solito”:

 #contenitore{ border:1px solid #000; padding:5px; width:300px;}
 

Ma soprattutto il paragrafo con il nuovo attributo css3, al momento supportato solo con il prefisso:

 #contenitore p{
 -webkit-hyphens: auto;
 -moz-hyphens: auto;
 hyphens: auto;
 text-align:justify;
 }
 

Il codice in sé sarebbe finito, ma così funzionerà , in questo momento solo su firefox,
problema noto con il css3 e in particolare con questa specifica che ha avuto una gestazione piuttosto travagliata.
Quindi? Approntiamo una strategia per gli altri browser!
Che passa innanzitutto per l’inclusione di un file js per fornire supporto ai browser che non l’hanno nativo.

<script src="js/hyphenator.js"></script>
 

E poi prima della chiusura del body lo usiamo:

 Hyphenator.config({
 displaytogglebox : true,
 minwordlength : 4
 });
 Hyphenator.run();
 

L’esempio completo