L’aspetto di un libro

Giusto un trattino, per favore#section1

[Gioco di parole: dash, trattino in inglese, significa anche una piccola quantità, un goccio, ndt]

Il trattino è giunto fino a noi dal mondo dei manoscritti attraverso il mondo della stampa con il sistema di Johannes Gutenberg a caratteri mobili. In realtà, nei caratteri mobili, il trattino risolse anche un problema meccanico:

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.

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

Fig 1. Un esempio del trattino di Gutenberg.

Per Gutenberg, il trattino aveva un duplice scopo. Forniva il blocco di spaziatura necessario per far sì 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:“Scusami 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.”

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

Il trattino dice: “Hey, è ancora bello, no?” Ed è 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.

Usare il trattino e la giustificazione oggi#section2

Quando si tratta di caratteristiche browser, gli effetti in stile Flash diventano gloriosi e così non c’è da sorprendersi che il supporto per un carattere speciale Unicode di nome soft hyphen passi ampiamente inosservato. Ma il “soft hyphen” è 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 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.

Il “soft hyphen”#section3

Che cos’è il “soft hyphen”? La specifica HTML dice:

In HTML, ci sono due tipi di trattino d’unione: il trattino semplice [“plain hyphen”, ndt] e il “soft hyphen”. Il trattino semplice dovrebbe essere interpretato da uno user agent esattamente come ogni altro carattere. Il “soft hyphen” indica allo user agent dove potrebbe esserci un’interruzione di linea.

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

In HTML, il trattino semplice è rappresentato dal carattere “-” (- o -). Il “soft hyphen” è rappresentato dalla entity reference ­ (­ o ­)

Ok. Quindi, come funziona e cosa si deve fare? Ecco le considerazioni principali.

Codificare l’interruzione di parola#section4

Quando inserite ­ (or ­) all’interno di una parola, segnalate al browser che è corretto dividere la parola in quel particolare punto se farlo aiuta a preservare l’integrità della spaziatura delle parole. In altre parole, quando decidete di spezzare una parola alla fine di una riga, il browser darà una priorità più alta al mantenimento di un’uniforme spaziatura delle parole. Prendiamo ad esempio la parola “costituzione.” “Costituzione” può essere divisa in sillabe in quattro punti, così: co-sti-tu-zio-ne.

Pertanto, in HTML sarebbe:—co­sti­tu­zio­ne—che 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ò farlo. E se lo fa, la parola può essere divisa in ognuno di quei quattro punti in cui è inserito ­. (Nota: come vedrete, inserirlo così nel codice in HTML non è raccomandato. Questa è solo una spiegazione del suo funzionamento.)

I trattini appaiono dove servono automaticamente#section5

Il “soft hyphen” è un vero carattere nel font. Ma il browser lo mostrerà solo se la parola verrà spezzata alla fine della riga. Questo comportamento mostra/nascondi è automatico.

Applicare il “soft hyphen” ad ogni possibile punto di divisione#section6

Il testo nelle pagine web può 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’è una regola pratica per predire esattamente dove e come le righe di testo andranno a capo. Questo è un effetto collaterale inevitabile di una delle grandi feature del testo elettronico.

Completamente in contrasto con la natura fissa della carta stampata, questo porta senza vie d’uscita al giusto modo di applicare il “soft hyphen” in HTML: il “soft hyphen” dovrebbe essere inserito in tutti i possibili punti di divisione in sillabe. Ora, a prima vista questo può sembrare non elegante e superfluo, ma quando si aggiungo i “soft hyphen” in maniera programmatica, come vedrete tra un attimo, non è per nulla un problema.

Come esempio, ecco una pagina con dei “soft hyphen” inseriti all’interno del codice nel testo HTML. (Ho usato il tool online Hypho-o per inserire i “soft hyphen”.) Ridimensionate la finestra del browser o fate uno zoom in avanti o indietro per far riposizionare il testo e vi verrà 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à.

Gli svantaggi dell’inserimento nel codice#section7

Inserire i “soft hyphen” all’interno del codice è il modo migliore per comprendere il loro funzionamento, ma è parecchio scomodo farlo nella pratica. I “soft hyphen” rendono il testo HTML difficile da leggere e da modificare. Inoltre, possono creare delle difficoltà ai motori di ricerca. Gli utenti non possono attivare e disattivare i “soft hyphen” con una semplice widget dell’interfaccia utente. Usare JavaScript per applicare i “soft hyphen” ha molto più senso e funziona piuttosto bene.

Hyphenator.js#section8

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

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

Basati su un’edizione HTML del Project Gutenberg di Cuore Di Tenebra 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:

• Desktop Browsers
• iPhone
• iPad

Hyphenator.js ha anche un tool merge-and-pack per creare un singolo file JavaScript ottimizzato e ridotto al minimo, così come delle istruzioni per crearvi il vostro. Ricordatevi che applicare i trattini è basilarmente un’operazione “Trova e Sostituisci”. Se ci sono molti trattini su una pagina, sarà inevitabile un po’ di ritardo nel caricare la pagina. Hyphenator.js inserisce inoltre il carattere “zero width space (ZWS)” per mandare a capo in maniera intelligente gli URL.

Lo zero width space (ZWS)#section9

Lo zero width space è essenziale per ottenere un buon risultato con T&G. E’ codificato come ​. Kingdesk Web Design, che ha fatto un notevole lavoro sul problema della sillabazione, descrive lo “spazio a larghezza zero (ZWS)” in questo modo:

Simile al “soft hyphen”, il carattere di “spazio a larghezza zero” comunica i possibili a capo all’interno di una stringa di testo. Ma a differenza del “soft hyphen”, non mostra un trattino alla fine della linea. Questa soluzione è l’ideale per forzare un a capo consistente per gli URL lunghi. Può anche essere usato per forzare un a capo nei browser non-cooperativi dopo i trattini d’unione nelle parole come “zero-space” e “soft hyphen”.

 

Per controllare i problemi di a capo quando si creano stringhe lunghe con gli “hard hyphen” (o i caratteri en dash (–) o em dash (—)), o quando il browser potrebbe essere confuso su dove mandare a capo una stringa o su quando usare caratteri come ( )[ ] { } « » % ° · \ / ! ?, lo ZWS può dare al browser suggerimenti utili sul da farsi.

Ad esempio, per preservare la leggibilità, quanto segue dice al browser che va bene mandare a capo dopo un “hard hyphen” ma non prima:

	
	The zero-​width space.
	
  

Per mandare a capo gli URL lunghi, lo ZWS è inserito dopo i forward slash:

	
	http://​​code.​​google.​​com/​​p/​​hyphenator/
	
  

Tutto ciò è preferibilmente fatto con JavaScript. In termini di tempo di caricamento della pagina e di praticità, l’inserimento dello ZWS nel codice qui e là al bisogno non ha degli svantaggi seri.

Select/copy/paste#section10

Il “soft hyphen” è un carattere nel font con la propria designazione Unicode. Questo significa che in un’operazione di copia/incolla, il “soft hyphen” viaggia insieme agli altri caratteri.

In un editor di testo non troppo elaborato potrebbe apparire come un punto di domanda. In MS Word, il “soft hyphen” verrà tolto, a meno che non scegliate la formattazione “solo testo”. I motori di ricerca come Google o Bing li ignoreranno quando verranno copiati nella casella di ricerca.

Il succo del discorso è che i browser —giustamente o a torto— non eliminano i “soft hyphen” automaticamente in un “copia”.E non fa alcuna differenza che i “soft hyphen” siano inseriti nel codice oppure con uno script. L’unica soluzione sicura è togliere tutti i “soft hyphen” in un “copia” usando uno script. Fortunatamente, questo è già stato fatto in Sweet Justice— un tool di sillabazione solo per l’inglese creato dallo sviluppatore di Facebook Carlos Bueno. (Il codice si trova su Github.) Questa è anche la soluzione in Hyphenator.js a partire dalla versione 3.0.

La questione su come i browser gestiranno i “soft hyphen” e altri caratteri “a spazio vuoto” come da ZWS in poi rimane da vedere.

Trova su questa pagina#section11

Simile al problema select/copy/paste è quello del “Trova”. Al momento in cui scrivo, solo Firefox lo tratta correttamente come da specifica HTML: “Per operazioni come la ricerca e l’ordinamento, il “soft hyphen” dovrebbe sempre essere ignorato”. Il browser dovrebbe ignorare il “soft hyphen” quando ricerca una parola. Ma in ogni browser diverso da Firefox con cui è stato testato, la ricerca va nella maniera sbagliata dopo la prima sillaba “co” della parola “costituzione” a causa dell’inserimento del “soft hyphen”. In maniera simile, il “soft hyphen” può anche causare errori di spaziatura non voluti all’interno di stringhe quando si copia del testo usando il menu contestuale che apparte con il tasto destro del mouse e cose simili. L’applicazione ricevente solitamente ignora gli spazi anche se sono visibili, ma è tuttavia preoccupante per l’utente.

Le soluzioni per questi fastidi stanno esattamente nei creatori di browser.

Book ’em Danno!#section12

[Frase pronunciata in una serie televisiva poliziesca, ndt]

I display ad alta definizione come l’iPhone Retina, comodi device e-reader come l’iPad ed i web font hanno portato di nuovo l’attenzione sulla tipografia per il web. La sillabazione e la giustificazione costituiscono una tecnica importante e con gli onori del tempo. Si spera che l’informazione contenuta in questo articolo aiuti a renderla un’opzione per la lettura sullo schermo, meglio prima che poi.

Illustrazioni: {carlok}