Formattazione del testo

La formattazione del testo è il procedimento di strutturazione e decorazione grafica che rende un testo puro adeguato alla stampa su libri, periodici o quotidiani o alla visualizzazione su supporti digitali come i documenti dei programmi di videoscrittura, siti web o libri elettronici.

Descrizione

La formattazione si compone solitamente di più livelli. La strutturazione consiste della suddivisione del testo in unità logiche, come i capitoli, i paragrafi, i capoversi o le liste, puntate o numerate, o le note a piè di pagina. La decorazione assegna uno stile di presentazione agli elementi del testo, decidendo ad esempio il rientro dei paragrafi, la suddivisione in pagine e le caratteristiche dei caratteri: tipi, dimensioni, grassetti, corsivi, interlinee, apici e pedici, ecc. Nel caso particolare di ipertesti è presente un terzo livello di formattazione, oltre a questi primi due: quello dei collegamenti che costituiscono rinvii ad altri ipertesti.

Nell'era dell'informazione, all'inizio della diffusione di Internet, erano di uso comune alcune convenzioni di formattazione per l'utilizzo di strumenti di comunicazione come e-mail, LISTSERV, Usenet, ecc.:

• fra asterischi per dare enfasi: La nuova stampante si era *bloccata* un'altra volta.
• fra trattini bassi per sottolineare: La nuova stampante si era _bloccata_ un'altra volta.
• fra trattini bassi per citare il titolo di un libro: Per avere un'idea del Software Libero si può iniziare leggendo il libro _Codice_Libero_.
• in maiuscolo per i titoli: CAPITOLO 1: PER VOLONTA' DI UNA STAMPANTE
• in maiuscolo per urlare: La nuova stampante si era BLOCCATA un'altra volta.
• con spazi per evidenziare La nuova stampante si era b l o c c a t a un'altra volta.

Oggi sono disponibili numerose applicazioni per leggere, scrivere e modificare testo formattato (vedi Infra).

Utilizzo di un linguaggio di markup

Qualora non sia possibile formattare il testo con strumenti di supporto visuali inclusi in molti elaboratori testuali che propongono anche un'anteprima di come il testo comparirà sul supporto di destinazione (video, materiale cartaceo) è possibile utilizzare un linguaggio di markup (il più noto di essi è l'HTML) che produce gli stessi risultati anche se presenta l'inconveniente di una complessità di scrittura in genere più elevata. La stessa Wikipedia, nella modifica delle pagine tramite l'editor di testo, utilizza un linguaggio di markup molto semplificato interpretato dal software MediaWiki.

Un essere umano potrebbe trovare più o meno comprensibile un certo testo formattato a seconda della complessità del linguaggio di markup in cui il testo è scritto. Esistono linguaggi di markup leggeri che consentono di scrivere testo formattato estremamente semplice da comprendere perché differisce poco dal relativo testo puro. In altri casi (SGML, XHTML, DocBook, ...) la complessità è così alta che una persona deve prima studiare il linguaggio stesso per essere in grado di comprendere il significato del relativo testo formattato.

CSS

I CSS hanno diverse opzioni per formattare i font:

Definizione del font

p {font-family: arial;}

Caratteri sicuri per il Web

Esiste solo un numero limitato di caratteri disponibili su tutti i sistemi: essi possono quindi essere utilizzati senza troppe preoccupazioni. In inglese sono detti web safe font:

Nome	Tipo generico
Arial	senza grazie
Courier New	larghezza fissa
Georgia	con grazie
Times New Roman	con grazie
Trebuchet MS	senza grazie
Verdana	senza grazie

Caratteri predefiniti nei CSS

Termine	Definizione
serif	Caratteri tipografici con grazie
sans-serif	Caratteri tipografici senza grazie
monospace	Caratteri tipografici a larghezza fissa, generalmente utilizzati negli elenchi di codici.
cursive	Caratteri che hanno lo scopo di emulare la scrittura a mano, con tratti fluidi e collegati.
fantasy	Caratteri destinati a essere decorativi.

Font stacks

Poiché non si può garantire la disponibilità dei caratteri che si desidera utilizzare sulle pagine web (anche un carattere web potrebbe non funzionare per qualche motivo), si possono definire dei "font stacks" in modo che il browser abbia più caratteri tra cui scegliere. Ciò implica un valore font-family costituito da più nomi di caratteri separati da virgole, ad esempio:

p {
  font-family: "Trebuchet MS", Verdana, sans-serif;
}

In tal caso, il browser si avvia all'inizio dell'elenco e verifica se quel carattere è disponibile sulla macchina. In caso affermativo, applica quel carattere agli elementi selezionati. In caso contrario, passa al carattere successivo e così via.

Incorporare font non standard

@font-face { font-family: 'MyWebFont'; src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); }

Tipi di font

• WOFF / WOFF2

Sta per: Web Open Font Format.

Creati per l'uso sul Web e sviluppati da Mozilla insieme ad altre organizzazioni, i caratteri WOFF spesso si caricano più velocemente di altri formati perché utilizzano una versione compressa della struttura utilizzata dai caratteri OpenType (OTF) e TrueType (TTF). Questo formato può anche includere metadati e informazioni sulla licenza all'interno del file del carattere.

WOFF2 è la prossima generazione di WOFF e vanta una compressione migliore dell'originale.

• SVG / SVGZ

SVG (Scalable Vector Graphics) è una ricreazione vettoriale del carattere, che lo rende molto più leggero nelle dimensioni del file e lo rende ideale anche per l'uso mobile. SVGZ è la versione zippata di SVG.

• EOT

Sta per: Embedded Open Type.

Questo formato è stato creato da Microsoft ed è uno standard di file proprietario.

• OTF / TTF

Sta per: OpenType Font e TrueType Font.

Il formato WOFF è stato inizialmente creato come reazione a OTF e TTF, in parte perché questi formati potevano essere facilmente (e illegalmente) copiati, tuttavia, OpenType ha funzionalità a cui molti designer potrebbero essere interessati (legature e simili).

Dimensione del font

La dimensione del carattere (impostata con la proprietà font-size) può assumere valori misurati nella maggior parte di queste unità (e altre, come le percentuali), tuttavia le unità più comuni per ridimensionare il testo sono:

• px(pixel): il numero di pixel in altezza che vuoi che sia il testo.
• emè uguale alla dimensione del carattere impostata sull'elemento genitore dell'elemento corrente che stiamo modellando (più specificamente, la larghezza di una lettera maiuscola M contenuta all'interno dell'elemento genitore.)
• rem: Funzionano esattamente come em, tranne per il fatto che 1 rem è uguale alla dimensione del carattere impostata sull'elemento radice del documento (cioè <html>), non sull'elemento genitore.

Peso visivo

Il CSS fornisce quattro proprietà comuni per modificare il peso visivo e l'enfasi del testo:

• font-style: Utilizzato per attivare e disattivare il testo in corsivo. I valori possibili sono i seguenti:
  • normal: Imposta il testo sul carattere normale (disattiva il corsivo esistente).
  • italic: Imposta il testo per utilizzare la versione corsivo del carattere, se disponibile; se non disponibile, simulerà invece il corsivo con l'obliquo.
  • oblique: Imposta il testo per utilizzare una versione simulata di un carattere corsivo, creato inclinando la versione normale.
• font-weight: Consente di impostare il livello di grassetto del testo. Questo ha molti valori disponibili nel caso in cui si dispone di molte varianti di font disponibili (come -Light, -Normal, -bold, -extrabold, -nero, ecc.).
  • normal, bold: Spessore del carattere normale e grassetto
  • lighter, bolder: Imposta il grassetto dell'elemento corrente in modo che sia più leggero o più pesante di un gradino rispetto al grassetto dell'elemento genitore.
  • 100- 900: valori numerici di grassetto che forniscono un controllo granulare più fine rispetto alle parole chiave sopra, se necessario.
• text-transform: Consente di impostare la trasformazione del carattere. I valori includono:
  • none: Impedisce qualsiasi trasformazione.
  • uppercase: Trasforma TUTTO IL TESTO IN MAIUSCOLO.
  • lowercase: Trasforma tutto il testo in minuscolo.
  • capitalize: Trasforma tutte le parole in modo Che La Prima Lettera Sia Maiuscola.
  • full-width: Trasforma tutti i glifi in modo che vengano scritti all'interno di un quadrato a larghezza fissa, simile a un carattere a spaziatura fissa, consentendo l'allineamento, ad esempio, di caratteri latini con glifi delle lingue asiatiche (come cinese, giapponese, coreano).
• text-decoration: Imposta/deseleziona le decorazioni del testo sui caratteri.
• none: Disabilita eventuali decorazioni di testo già presenti.
  • underline: Sottolinea il testo.
  • overline: Conferisce al testo una linea superiore.
  • line-through: Mette un barrato sul testo.

Ombreggiatura del testo

Ombra singola:

text-shadow: 4px 4px 5px red;

Ombra multipla:

text-shadow: 1px 1px 1px red,2px 2px 1px red;

Allineamento del testo

La proprietà text-align viene utilizzata per controllare il modo in cui il testo è allineato all'interno della sua casella di contenuto. I valori disponibili sono i seguenti (funzionano più o meno allo stesso modo di un qualsiasi programma di elaborazione testi):

• left: Giustifica il testo a sinistra.
• right: Giustifica il testo a destra.
• center: Centra il testo.
• justify: Allarga il testo, variando gli spazi tra le parole in modo che tutte le righe di testo abbiano la stessa larghezza.

Altezza della linea

La proprietà line-height imposta l'altezza di ogni riga di testo. Esempio:

line-height: 1.6;

Spaziatura tra lettere e parole

p::first-line {letter-spacing: 4px;word-spacing: 4px;}

Stili dei caratteri

• font-variant: Consente di passare dal maiuscolo alle alternative di caratteri normali.
• font-kerning: Consente di attivare e disattivare le opzioni di crenatura dei caratteri.
• font-feature-settings: Consente di attivare e disattivare varie funzioni dei caratteri OpenType.
• font-variant-alternates: Controlla l'uso di glifi alternativi per un determinato tipo di carattere.
• font-variant-caps: Controlla l'uso di glifi maiuscoli alternativi.
• font-variant-east-asian: Controlla l'utilizzo di glifi alternativi per le scritture dell'Asia orientale, come il giapponese e il cinese.
• font-variant-ligatures: Controlla quali legature e forme contestuali vengono utilizzate nel testo.
• font-variant-numeric: Controlla l'utilizzo di glifi alternativi per numeri, frazioni e indicatori ordinali.
• font-variant-position: Controlla l'utilizzo di glifi alternativi di dimensioni più piccole posizionati come apice o pedice.
• font-size-adjust: Consente di regolare la dimensione visiva del carattere indipendentemente dalla dimensione effettiva del carattere.
• font-stretch: Passa tra le possibili versioni estese alternative di un dato carattere.
• text-underline-position: Specificare la posizione delle sottolineature impostata utilizzando il valore della text-decoration-lineproprietà underline.
• text-rendering: Prova a eseguire un'ottimizzazione del rendering del testo.

Stili di layout del testo

• text-indent: Specificare quanto spazio orizzontale deve essere lasciato prima dell'inizio della prima riga del contenuto del testo.
• text-overflow: Consente di definire la modalità di segnalazione agli utenti del contenuto in overflow che non viene visualizzato.
• white-space: Definisce come vengono gestiti gli spazi bianchi e le interruzioni di riga associate all'interno dell'elemento.
• word-break: Consente di specificare se interrompere le righe all'interno delle parole.
• direction: Definire la direzione del testo (dipende dalla lingua e di solito è meglio lasciare che HTML gestisca quella parte poiché è legata al contenuto del testo.)
• hyphens: Attiva e disattiva la sillabazione per le lingue supportate.
• line-break: Rilassa o rafforza l'interruzione di riga per le lingue asiatiche.
• text-align-last: Definisce come viene allineata l'ultima riga di un blocco o di una riga, subito prima di un'interruzione di riga forzata.
• text-orientation: Consente di definire l'orientamento del testo in una riga.
• overflow-wrap: Consente di specificare se il browser può o meno interrompere le righe all'interno delle parole per evitare l'overflow.
• writing-mode: Consente di definire se le righe di testo sono disposte orizzontalmente o verticalmente e la direzione in cui scorrono le righe successive.

Riempimento e contorno

Riempimento e contorno

Come nei file vettoriali per la stampa, anche i font web hanno riempimento e contorno (stroke).

.module { stroke: black; }

Esempio. Tipologie di stroke:

• fill
• stroke-dasharray
• stroke-dashoffset
• stroke-linecap
• stroke-width

Utilizzo nei software

Per scrivere del testo formattato è possibile usare editor di editor di testo puro, come Blocco note o gedit, e aggiungere le informazioni di stile utilizzando un particolare linguaggio di markup, in cui per ciascuna informazione esiste un marcatore specifico (tag). Un software di visualizzazione, in grado di comprendere il linguaggio di markup, non visualizzerà i tag, ma mostrerà il testo puro presentandolo nello stile indicato dai tag.

Tale approccio teso a nascondere la complessità è seguito anche dagli editor WYSIWYG. Alcuni di essi, però, non permettono di salvare il testo in un file di testo puro o in un formato aperto, ma consentono di salvare il testo (che sembra testo puro) solo in un file binario o comunque codificato in un formato proprietario. In quest'ultimo caso, pertanto, il testo formattato non è direttamente disponibile ad un essere umano, ma è leggibile e modificabile solo a patto di possedere quel particolare editor WYSIWYG.

Esempi di formattazione creativa

I seguenti esempi di formattazione creativa si possono ottenere con diverse tecniche: grafica con software come Illustrator, Gimp, Photoshop o Inkscape oppure con codice HTML5 e CSS3 oppure con software 3D come Blender:

• 
• 
• 

Bibliografia

• Ivana Tubaro, Delle lettere. Manuale di calligrafia e tipografia: dalla teoria alla progettazione, Milano, Hoepli, 2008, ISBN 978-8820340339.

Voci correlate

• File di testo
• Formato aperto
• Formato proprietario
• Linguaggio di markup
• Testo puro
• WYSIWYG

Collegamenti esterni

• (EN) Denis Howe, markup, in Free On-line Dictionary of Computing. Disponibile con licenza GFDL