Sillabazione a capo con trattino in Html?

Tutti sappiamo che nei casi in cui il testo giustificato è necessario per ottenere un design gradevole, questo può venir rovinato dal troppo spazio inserito fra una parola e l'altra. In buona sostanza, l'eleganza ottenuta utilizzando il testo giustificato, viene meno causa la scarsa leggibilità delle righe con troppo spazio vuoto, fra una parola e l'altra.

Questo ci obbliga ad ore ed ore di lavoro per ottenere testo allineato correttamente, ovvero a ricorrere ad un differente allineamento del testo.

Attualmente alcune migliorie ci vengono incontro, consentendoci di creare testo giustificato con poco spazio vuoto, consentendo al testo di andare a capo in automatico, suddividendo (spezzando) le parole in sillabe ed aggiungendo il classico trattino ( - ) a fine riga.

Per far questo, possiamo ricorrere a due alternative. La prima richiede solo delle proprietà CSS3, sostanzialmente proprietarie dei browser.

Ecco il codice da utilizzare:

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

Le 3 ultime righe sono quelle relative alla sillabazione e sono appunto proprietarie. Questo codice sarebbe semplice ed efficace, se non fosse che crea piccoli errori di validazione del CSS, giacché tali proprietà non sono standard, ma il problema più grande è che non è cross browser, giacché, ad esempio, non è compatibile con Internet Explorer.

Una soluzione cross browser è invece ottenibile utilizzando la funzione Hyphenator, scritta in javascript e relativamente facile da implementare, benché un poì pesantuccia in fase di download.

Per installare la funzione, è sufficiente scaricare il file js e seguire le istruzioni riportate nella pagina relativa allo script.

In 1 minuto avrai il tuo testo giustificato con andate a capo a sillabe, con trattini a fine riga! Bello no?

A presto!

Pubblicato il 18-03-2012

Lascia un commento

  • Codice antirobot766L'immagine mostra una V (maiuscola), il numero 3 e la lettera f (minuscola)8
  • Inserisci codice

Tutti i commenti (0)

navigazione

CERCA NEL BLOG
LE CATEGORIE DEL BLOG
ALTRE RISORSE