CSS3 'hyphens': controllare la sillabazione dei testi

Sono molte le proprietà CSS3 che aumentano il controllo sui testi e permettono a web designer e graphic designer di allineare sempre di più web design ed editoria a mezzo stampa. Fra quelle meno conosciute, c'è forse la proprietà hyphens. Ci torna molto utile per controllare la sillabazione delle parole che si trovano alla fine di una riga e offre risultati ottimali nel caso di blocchi di testo giustificato.

Per anni i web designer sono stati scoraggiati dal comportamento di un testo giusticato sul web, perchè la maggior parte dei browser rilascia grandi spazi bianchi fra le parole che non permettono una buona leggibilità e creano un'estetica poco gradevole. Quindi solitamente tutti i paragrafi vengono allineati a sinistra o a destra (o al centro).

Hyphens è molto utile per sillabare automaticamente le parole alla fine di ogni riga di testo creando un blocco di testo giustificato che si comporta come una pagina di un quotidiano.

• Basta impostare la lingua in uso nel codice HTML con l'attributo lang e scegliere il valore auto e il browser si occuperà di 'spezzare' le parole dove necessario.

  I risultati sono molto buoni nel caso di parole molto lunghe (es. 'semplicemente') o nel caso di alfabeti molto prolissi come quello tedesco (es. 'Deutschsprachige');

• con il valore di default manual è possibile utilizzare l'entità HTML ­ all'interno di parole che necessitano di essere spezzate in un punto particolare;
• con il valore none, invece è possibile evitare che il browser si occupi della sillabazione e tutte le parole andranno sempre a capo senza essere spezzate alla fine di ogni riga.

Ecco degli esempi con relativa spiegazione:

Separazione manuale

p {
  -webkit-hyphens: manual;
     -moz-hyphens: manual;
          hyphens: manual;
}

Separa le sillabe della parola alla fine di ogni riga di un paragrafo solo in presenza di un interruzione manuale (entità ­) all'interno della parola stessa nel codice HTML (es. 'gat­to'). Questo è il valore di default.

Le eventuali interruzioni di questo tipo, sono invisibili a video ma invitano il browser a determinare la sillabazione di una specifica parola solo nel caso si trovi alla fine di una riga.

Separazione automatica

p {
  -webkit-hyphens: auto;
     -moz-hyphens: auto;
          hyphens: auto;
}

Separa automaticamente le sillabe della parola alla fine di ogni riga di un paragrafo interpretando la lingua dichiarata nel documento HTML.

Da comunque priorità, se presenti, ad interruzioni manuali che non coincidano con quelle automatiche.

Nessuna separazione

p {
  -webkit-hyphens: none;
     -moz-hyphens: none;
          hyphens: none;
}

Non effettua mai la sillabazione delle parole nei paragrafi.

Compatibilità browser

Attualmente la compatibilità browser non è delle migliori. Solo Firefox 6+ e Safari 5.1+ la gestiscono correttamente.

Esiste comunque uno script che ci aiuta con gli altri maggiori browser.

Hyphenator.js

Lo script Hyphenator, arrivato alla versione 4.0 e disponibile su Google Code, supporta la sillabazione via CSS3 e la rende visibile anche su Chrome e Internet Explorer 7 e successivi. Basta caricarlo nelle nostre pagine e stabilire dei semplici parametri.

È possibile usare semplicemente questo strumento con risultati soddisfacenti come si vede in questo esempio.

Conclusioni

Finalmente è possibile gestire la sillabazione di testi su pagina web in presenza di parole molto lunghe o di alfabeti particolarmente prolissi (es. tedesco), utilizzando con successo anche l'allineamento giustificato dei testi.

Uno script di facile utilizzo (hyphenator.js) ci assicura risultati più che soddisfacenti su quasi tutti i browser.

Link utili

• Specifiche complete del W3C
• Tabella compatibilità browser
• Hyphenator.js