{"id":103,"date":"2010-09-21T13:57:07","date_gmt":"2010-09-21T11:57:07","guid":{"rendered":"https:\/\/alistapart.com\/it\/article\/aspetto-di-un-libro\/"},"modified":"2010-09-21T13:57:07","modified_gmt":"2010-09-21T11:57:07","slug":"aspetto-di-un-libro","status":"publish","type":"article","link":"https:\/\/alistapart.com\/it\/article\/aspetto-di-un-libro\/","title":{"rendered":"L’aspetto di un libro"},"content":{"rendered":"

La stragrande maggioranza dei libri e delle riviste sono tipograficamente composte usando il trattino d’unione<\/a> e la giustificazione (tipografica)<\/a> (indicate con T&G da qui in poi). Nella stampa lo si trova ovunque: tutte le linee di testo tranne le ultime righe di un paragrafo sono allargate fino a raggiungere la stessa lunghezza. Allineate a sinistra e<\/em> a destra. I trattini sono usati per dividere le parole alla fine delle righe per cercare di prevenire dei vuoti nella spaziatura delle parole. In questo modo:<\/p>\n

We hold these truths to be self-ev\u00adi\u00addent, that all men are cre\u00adat\u00aded e\u00adqual, that they are en\u00addowed by their Cre\u00ada\u00adtor with cer\u00adtain un\u00adal\u00adien\u00ada\u00adble Rights, that a\u00admong these are Life, Lib\u00ader\u00adty and the pur\u00adsuit of Hap\u00adpi\u00adness. That to se\u00adcure these rights, Gov\u00adern\u00adments are in\u00adsti\u00adtut\u00aded a\u00admong Men, de\u00adriv\u00ading their just pow\u00aders\u2026<\/p>\n

Di contro, quasi tutto il testo sul web \u00e8 allineato a sinistra, senza trattini alla fine delle righe. (Questo assumendo che il linguaggio in uso sia di origine latina, scritto da sinistra a destra, come l’inglese). Nel mondo della stampa, questo viene a volte definito \u201cragged right\u201d [destra disordinata, ndt<\/em>] o \u201chard rag\u201d a causa del bordo seghettato che si crea sulla destra formato dalle righe di lunghezza diversa. E’ pressoch\u00e9 universale oggi sul web:<\/p>\n

We hold these truths to be self-evident, that all men are created equal, that they are endowed by their Creator with certain unalienable Rights, that among these are Life, Liberty and the pursuit of Happiness. That to secure these rights, Governments are instituted among Men, deriving their just powers\u2026<\/p>\n

Non c’\u00e8 bisogno<\/em> che questo continui cos\u00ec com’\u00e8. E se molte<\/a> critiche<\/a> sulla tipografia dell’iPad non sono di alcun aiuto, per molte nicchie di design come gli eBooks<\/a>, non si dovrebbe<\/em> continuare cos\u00ec se si vogliono soddisfare le aspettative dei consumatori.<\/p>\n

Ma cosa si pu\u00f2 fare? Beh, pochi web designer ne sono a conoscenza, ma T&G possono diventare parte del loro lavoro oggi. Prima per\u00f2, diamo una breve occhiata alla storia.<\/p>\n

\n

Giusto un trattino, per favore<\/h2>\n

[Gioco di parole: dash, trattino in inglese, significa anche una piccola quantit\u00e0, un goccio, ndt<\/em>]<\/p>\n

Il trattino \u00e8 giunto fino a noi<\/a> dal mondo dei manoscritti attraverso il mondo della stampa con il sistema di Johannes Gutenberg<\/a> a caratteri mobili. In realt\u00e0, nei caratteri mobili, il trattino risolse anche un problema meccanico<\/a>:<\/p>\n

\n

Il processo di stampa di Gutenberg richiedeva che le parole fossero create con un carattere tipografico per ogni singola lettera, tenuti insieme da un riquadro rigido sottostante. Gutenberg risolse il problema di rendere ciascuna riga della stessa lunghezza per riempire il riquadro inserendo un trattino come ultimo elemento sul margine destro. Questo interrompeva le lettere dell’ultima parola, richiedendo che le lettere rimanenti fossero messe all’inizio della riga successiva.<\/p>\n<\/blockquote>\n

Il trattino di Gutenberg era una linea doppia e corta, inclinata sulla destra ad un angolo di sessanta gradi. Aveva questo aspetto:<\/p>\n

\"Un<\/p>\n

Fig 1. Un esempio del trattino di Gutenberg.<\/p>\n<\/div>\n

Per Gutenberg, il trattino aveva un duplice scopo. Forniva il blocco di spaziatura necessario per far s\u00ec che i caratteri rimanessero fissati all’interno del riquadro di sostegno e allo stesso tempo, stampava un carattere che annunciava il suo scopo al lettore. In effeti, il trattino dice al lettore:\u201cScusami se interrompo questa parola e termino proprio qui la riga. Lo sto facendo per preservare l’aspetto generale del testo. Fai del tuo meglio per ignorarmi.\u201d<\/p>\n

In questo, il trattino ci chiede poco in cambio di una migliore resa estetica<\/a>. Se osservate una colonna di testo presa da una delle bibbie di Gutenberg<\/a> la troverete emozionante ed equilibrata. Ora, i problemi meccanici dei caratteri mobili sono da tempo superati, ovviamente, e la tipografia \u00e8 ormai digitalizzata da decenni. Tuttavia, T&G sono ancora<\/em> predominanti: rimane il risultato.<\/p>\n

Il trattino dice: \u201cHey, \u00e8<\/em> ancora bello, no?\u201d Ed \u00e8 difficile ragionare con le abitudini e le aspettative dei lettori, costruitesi in cinque secoli di pratica. Se volete l’aspetto di un libro, il trattino e la giustificazione hanno il peso della storia che va sostenuto.<\/p>\n<\/div>\n

\n

Usare il trattino e la giustificazione oggi<\/h2>\n

Quando si tratta di caratteristiche browser, gli effetti in stile Flash diventano gloriosi e cos\u00ec non c’\u00e8 da sorprendersi che il supporto per un carattere speciale Unicode di nome soft hyphen<\/em> passi ampiamente inosservato. Ma il \u201csoft hyphen\u201d \u00e8 la chiave di volta per un uso del trattino e della giustificazione che sia gradevole alla vista. Nel corso degli anni ha ottenuto il supporto in tutti<\/em> i browser di serie A: IE6+, Opera 7.1+, Safari 2+, Firefox 3+ e Chrome. Questo, combinato con un po’ di trucchi in JavaScript, rende oggi T&G una tecnica percorribile di design.<\/p>\n

Il \u201csoft hyphen\u201d<\/h3>\n

Che cos’\u00e8 il \u201csoft hyphen\u201d? La specifica<\/a> HTML dice:<\/p>\n

\n

In HTML, ci sono due tipi di trattino d’unione: il trattino semplice [\u201cplain hyphen\u201d, ndt<\/em>] e il \u201csoft hyphen\u201d. Il trattino semplice dovrebbe essere interpretato da uno user agent esattamente come ogni altro carattere. Il \u201csoft hyphen\u201d indica allo user agent dove potrebbe esserci un’interruzione di linea.<\/p>\n

Quei browser che intendono interpretare il \u201csoft hyphen\u201d devono osservare la seguente semantica: se una riga va a capo con un \u201csoft hyphen\u201d, il carattere del trattino deve essere visualizzato al termine della prima riga. Se una riga non viene interrotta da un \u201csoft hyphen\u201d, lo user agent non deve mostrare il carattere del trattino. Per operazioni come la ricerca e l’ordinamento, il \u201csoft hyphen\u201d deve essere sempre ignorato.<\/p>\n

In HTML, il trattino semplice \u00e8 rappresentato dal carattere \u201c-\u201d (&#45;<\/code> o &#x2D;<\/code>). Il \u201csoft hyphen\u201d \u00e8 rappresentato dalla entity reference &shy;<\/code> (&#173;<\/code> o &#xAD;<\/code>)<\/p>\n<\/blockquote>\n

Ok. Quindi, come funziona e cosa si deve fare? Ecco le considerazioni principali.<\/p>\n

Codificare l’interruzione di parola<\/h3>\n

Quando inserite &shy;<\/code> (or &#173;<\/code>) all’interno di una parola, segnalate al browser che \u00e8 corretto dividere la parola in quel particolare punto se farlo aiuta a preservare l’integrit\u00e0 della spaziatura delle parole. In altre parole, quando decidete di spezzare una parola alla fine di una riga, il browser dar\u00e0 una priorit\u00e0 pi\u00f9 alta al mantenimento di un’uniforme spaziatura delle parole. Prendiamo ad esempio la parola \u201ccostituzione.\u201d \u201cCostituzione\u201d pu\u00f2 essere divisa in sillabe in quattro punti, cos\u00ec: co-sti-tu-zio-ne<\/em>.<\/p>\n

Pertanto, in HTML sarebbe:\u2014co&shy;sti&shy;tu&shy;zio&shy;ne<\/code>\u2014che dice al browser che se ha bisogno di mandare a capo una parte di quella parola alla riga successiva per preservare la spaziatura tra le parole, pu\u00f2 farlo. E se lo fa, la parola pu\u00f2 essere divisa in ognuno di quei quattro punti in cui \u00e8 inserito &shy;<\/code>. (Nota:<\/em> come vedrete, inserirlo cos\u00ec nel codice in HTML non<\/em> \u00e8 raccomandato. Questa \u00e8 solo una spiegazione del suo funzionamento.)<\/p>\n

I trattini appaiono dove servono automaticamente<\/h3>\n

Il \u201csoft hyphen\u201d \u00e8 un vero carattere nel font. Ma il browser lo mostrer\u00e0 solo se la parola verr\u00e0 spezzata alla fine della riga. Questo comportamento mostra\/nascondi \u00e8 automatico.<\/p>\n

Applicare il \u201csoft hyphen\u201d ad ogni possibile punto di divisione<\/h3>\n

Il testo nelle pagine web pu\u00f2 cambiare: la larghezza delle colonne si ridimensiona insieme alle differenti misure della finestra, dei devices, del livello di zoom e della scelta della dimensione del testo. Non c’\u00e8 una regola pratica per predire esattamente dove e come le righe di testo andranno a capo. Questo \u00e8 un effetto collaterale inevitabile di una delle grandi feature del testo elettronico.<\/p>\n

Completamente in contrasto con la natura fissa<\/em> della carta stampata, questo porta senza vie d’uscita al giusto modo di applicare il \u201csoft hyphen\u201d in HTML: il \u201csoft hyphen\u201d dovrebbe essere inserito in tutti i possibili punti di divisione in sillabe<\/em>. Ora, a prima vista questo pu\u00f2 sembrare non elegante e superfluo, ma quando si aggiungo i \u201csoft hyphen\u201d in maniera programmatica, come vedrete tra un attimo, non \u00e8 per nulla un problema.<\/p>\n

Come esempio, ecco una pagina con dei \u201csoft hyphen\u201d inseriti all’interno del codice<\/a> nel testo HTML. (Ho usato il tool online Hypho-o<\/a> per inserire i \u201csoft hyphen\u201d.) Ridimensionate la finestra del browser o fate uno zoom in avanti o indietro per far riposizionare il testo e vi verr\u00e0 mostrato come il browser preservi la spaziatura tra le parole mentre i trattini appaiono e scompaiono alla fine di ogni riga a seconda della necessit\u00e0.<\/p>\n

Gli svantaggi dell’inserimento nel codice<\/h3>\n

Inserire i \u201csoft hyphen\u201d all’interno del codice \u00e8 il modo migliore per comprendere il loro funzionamento, ma \u00e8 parecchio scomodo farlo nella pratica. I \u201csoft hyphen\u201d rendono il testo HTML difficile da leggere e da modificare. Inoltre, possono creare delle difficolt\u00e0 ai motori di ricerca<\/a>. Gli utenti non possono attivare e disattivare i \u201csoft hyphen\u201d con una semplice widget dell’interfaccia utente. Usare JavaScript per applicare i \u201csoft hyphen\u201d ha molto pi\u00f9 senso e funziona piuttosto bene.<\/p>\n

Hyphenator.js<\/h3>\n

Di gran lunga la libreria pi\u00f9 matura per applicare i trattini d’unione in HTML \u00e8 Hyhenator.js<\/a> di Mathias Nater. Hyphenator.js si appoggia sugli stessi algoritmi di compressione dati e dizionari di sillabazione<\/a> che si trovano in prodotti come TEX<\/a> (per il quale era stata originariamente sviluppata<\/a> da Franklin Liang nel 1983), Open<\/a> Office<\/a> ed il convertitore da HTML a PDF Prince<\/a>, che implementa il CSS3 Paged Media Module<\/a>.<\/p>\n

Ecco una semplice pagina<\/a> che contiene sia del testo in Inglese sia in Tedesco. C’\u00e8 una widget che permette di attivare e disattivare l’uso dei trattini nell’angolo in alto a destra. C’\u00e8 anche una versione bookmarklet<\/a> di Hyphenator.js.<\/p>\n

Basati su un’edizione HTML del Project Gutenberg<\/a> di Cuore Di Tenebra<\/a> di Joseph Conrad, ecco alcuni semplici esempi del primo capitolo, ciascuno utilizza la stessa versione modificata di Hyphenator.js 2.0 e il motore di selezione Sizzle, con la dimensione del font adatta ai seguenti devices:<\/p>\n