Sillabazione

In Internet Explorer 10 e nelle app di Windows Store scritte in JavaScript per Windows 8 è stato introdotto il supporto di un'altra importante funzionalità della specifica CSS Text Level 3: la sillabazione. La sillabazione automatica è particolarmente utile, dato il nuovo supporto del layout multicolonna. In particolare, la sillabazione CSS3 (Cascading Style Sheets, livello 3) rende possibili le operazioni seguenti:

  • Sillabazione automatica del testo in base a un dizionario predefinito
  • Specifica del numero minimo di caratteri di cui deve essere costituita una parola per essere sillabata
  • Specifica della lunghezza minima del frammento di parola che può formare la seconda parte di una sillabazione
  • Specifica della lunghezza minima del frammento di parola che può formare la prima parte di una sillabazione
  • Specifica di un'"area" di sillabazione al di là della quale forzare la sillabazione
  • Specifica del numero massimo di righe consecutive di sillabazione

Nota  In virtù dello stato preliminare della sezione relativa alla sillabazione della Working Draft CSS3 Text, le proprietà descritte in questo argomento devono essere usate con il prefisso del fornitore specifico di Microsoft "-ms-" per funzionare con Internet Explorer 10.

L'esempio di markup seguente mostra una piccola porzione di testo a cui non sono applicate proprietà di sillabazione. Useremo questo esempio per mostrare le proprietà di sillabazione.


<!DOCTYPE html>
<html lang="en-us">
<body>
  <div style="width: 130px; border: 1px solid black;">
  <p style="text-align: justify; font-size: 11pt;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Curabitur feugiat diam eu ipsum congue ac ultricies nisl rhoncus. Curabitur scelerisque arcu a leo
  mollis porta. Ut eu quam ut odio tempor ornare.</p>
  </div>
</body>
</html>


Questo markup viene visualizzato così in Internet Explorer 10:

Una breve selezione di testo giustificato all'interno di una casella stretta, senza l'applicazione di proprietà di sillabazione. Tra le parole sono presenti spazi vuoti significativi

Proprietà -ms-hyphens

La proprietà -ms-hyphens attiva la sillabazione. Ecco la sintassi:

ProprietàDescrizione

-ms-hyphens

Indica se vengono create ulteriori opportunità di interruzione per la riga corrente tramite la sillabazione delle singole parole all'interno della riga. La proprietà -ms-hyphens può essere impostata su uno dei valori seguenti:

none

Indica che tutte le interruzioni delle parole sono soppresse, inclusi i trattini nascosti (ovvero il carattere &shy;, un "suggerimento" di sillabazione).

manual

Indica che l'interruzione delle parole è consentita solo dove vengono suggerite opportunità di interruzione delle parole. Tali suggerimenti possono avere la forma di trattini nascosti o di trattini (inseriti manualmente).

auto

Indica che, oltre alle opportunità di interruzione delle parole, l'interruzione delle parole è consentita dove stabilito dal dizionario di sillabazione incorporato. I trattini nascosti hanno la priorità rispetto alle opportunità di sillabazione, ma sono sempre soggetti alle proprietà controllate dalla sillabazione.

 

Segue un esempio pratico dell'uso della proprietà -ms-hyphens impostata su auto:


<!DOCTYPE html>
<html lang="en-us">
<body>
  <div style="width: 130px; border: 1px solid black;">
  <p style="-ms-hyphens: auto; text-align: justify; font-size: 11pt;">Lorem ipsum dolor sit amet,
  consectetur adipiscing elit. Curabitur feugiat diam eu ipsum congue ac ultricies nisl rhoncus.
  Curabitur scelerisque arcu a leo mollis porta. Ut eu quam ut odio tempor ornare.</p>
  </div>
</body>
</html>


Questo markup viene visualizzato così in Internet Explorer 10:

La stessa selezione breve di testo giustificato all'interno di una casella stretta come nell'immagine precedente, a cui è stata applicata la proprietà -ms-hyphens su 'auto'. Gli spazi vuoti risultano meno pronunciati rispetto all'immagine precedente, poiché numerose parole sono state automaticamente sillabate.

Proprietà -ms-hyphenate-limit-zone

La proprietà -ms-hyphenate-limit-zone definisce la larghezza dell'area di sillabazione o dello spazio finale (senza contare gli effetti della giustificazione) che possono essere lasciati nella riga prima che venga attivata la sillabazione. Ecco la sintassi:

ProprietàDescrizione

-ms-hyphenate-limit-zone

Specifica la quantità massima di spazio non riempito (prima della giustificazione) che può essere lasciato nella riga prima dell'attivazione della sillabazione. Il valore può essere una percentuale non negativa (della larghezza totale della riga) o un valore di lunghezza.

 

Segue un esempio della proprietà -ms-hyphenate-limit-zone.


<!DOCTYPE html>
<html lang="en-us">
<body>
  <div style="width: 130px; border: 1px solid black;">
  <p style="-ms-hyphens: auto; -ms-hyphenate-limit-zone: 50px; text-align: justify; font-size: 11pt;">
  . . .
  </p>
  </div>
</body>
</html>


In questo caso, la lunghezza dell'area è di 50 pixel. Per qualsiasi riga che, prima della giustificazione, contiene testo che termina prima dell'area di sillabazione, verrà eseguito il pull della parte sillabata della parola dalla riga successiva alla riga corrente. Nell'immagine seguente ne è mostrato un esempio. In questo caso, la seconda e la sesta riga di testo (evidenziate in rosa) non sono sufficientemente lunghe per estendersi nell'area di sillabazione. Di conseguenza, la prima parola di entrambe le righe seguenti viene sillabata, e la prima parte sillabata della parola viene spostata nella riga precedente.

Esempio prima e dopo di una selezione di testo all'interno di una casella di contenuto con un'area di sillabazione. La seconda e la sesta riga del testo "prima" contengono testo che non si estende nell'area di sillabazione. Nell'esempio "dopo" la prima parola della terza e della settima riga è stata sillabata e la prima parte della parola è stata spostata all'inizio della riga precedente

Proprietà -ms-hyphenate-limit-chars

La proprietà -ms-hyphenate-limit-chars indica il numero minimo di caratteri di una parola sillabata. Ecco la sintassi:

ProprietàDescrizione

-ms-hyphenate-limit-chars

Specifica da uno a tre valori che indicano il numero minimo di caratteri di una parola sillabata. Se la parola non contiene il numero minimo di caratteri previsto, prima o dopo il trattino, la parola non viene sillabata.

  • first value  Numero minimo di caratteri totali necessario per la sillabazione di una parola.
  • second value  Numero minimo di caratteri prima di un'interruzione di sillabazione necessario per la sillabazione di una parola.
  • third value  Numero minimo di caratteri successivi a un'interruzione di sillabazione necessario per la sillabazione di una parola.

Puoi anche usare la parola chiave auto per sostituire uno o tutti i valori. La parola chiave auto corrisponde ai valori "5 2 2" e indica che è presente un limite della parola di 5 caratteri e che sono necessari 2 caratteri prima dell'interruzione di sillabazione e 2 caratteri dopo l'interruzione di sillabazione.

Vedi la pagina di riferimento della proprietà -ms-hyphenate-limit-chars per scoprire cosa accade se non si definisce uno di questi valori.

 

Segue un esempio della proprietà -ms-hyphenate-limit-chars. In questo caso, la proprietà è impostata su "auto 3" che indica che la dimensione minima della parola è automatica (ovvero 5) e che il numero minimo di caratteri prima e dopo l'interruzione di sillabazione è 3. Questo significa che la parola che nell'esempio precedente era stata sillabata dopo two caratteri, "ultricies" non verrà più sillabata in quel modo.


<!DOCTYPE html>
<html lang="en-us">
<body>
  <div style="width: 130px; border: 1px solid black;">
  <p style="-ms-hyphens: auto; -ms-hyphenate-limit-chars: auto 3; text-align: justify; font-size: 11pt;">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur feugiat diam eu ipsum congue ac
  ultricies nisl rhoncus. Curabitur scelerisque arcu a leo mollis porta. Ut eu quam ut odio tempor
  ornare.</p>
  </div>
</body>
</html>


Questo markup viene visualizzato come l'immagine seguente in Internet Explorer 10:

La stessa selezione breve di testo giustificato all'interno di una casella stretta come mostrato nella prima immagine, con la proprietà -ms-hyphens impostata su 'auto' e la proprietà -ms-hyphenate-limit-chars impostata su 'auto 3'. La parola "ultiricies" precedentemente sillabata dopo due caratteri, ora non è sillabata e viene visualizzata nella riga successiva

Nota che la parola "ultricies" ora risulta senza sillabazione e sulla riga successiva.

Proprietà -ms-hyphenate-limit-lines

La proprietà -ms-hyphenate-limit-lines indica il numero massimo di righe sillabate consecutive in un elemento. Ecco la sintassi:

ProprietàDescrizione

-ms-hyphenate-limit-lines

Specifica il numero massimo di righe consecutive che possono terminare con una parola sillabata in un elemento. Questa proprietà può essere impostata su un valore intero o sulla parola chiave no-limit che indica che non è previsto alcun limite al numero di righe consecutive che possono terminare con una parola sillabata.

 

Informazioni di riferimento sulle API

-ms-hyphenate-limit-chars
-ms-hyphenate-limit-lines
-ms-hyphenate-limit-zone
-ms-hyphens

Dimostrazioni di Internet Explorer Test Drive

Hands On: Multi-column Layout

Post di IEBlog

Building Rich Text-Centric Pages in IE10

Specifica

CSS Text Module Level 3: sezione 6

 

 

Mostra:
© 2014 Microsoft