Formattazione del testo - it.LinkFang.org

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.

Indice

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.:[1][2]

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

Utilizzo di un linguaggio di markup


Lo stesso argomento in dettaglio: 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[6]) 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

Lo stesso argomento in dettaglio: CSS.

I CSS hanno diverse opzioni per formattare i font[7][8]:

Definizione del font

p {font-family: arial;}

Caratteri sicuri per il Web

Parlando di disponibilità dei caratteri, esiste solo un certo numero di caratteri generalmente disponibili su tutti i sistemi e possono quindi essere utilizzati senza troppe preoccupazioni. Questi sono i cosiddetti web safe font:

Nome Tipo generico
Arial sans-serif
Courier New monospazio
Georgia serif
Times New Roman serif
Trebuchet MS sans-serif
Verdana sans-serif

Caratteri predefiniti nei CSS

Termine Definizione
serif Caratteri che hanno serif (gli svolazzi e altri piccoli dettagli che vedi alle estremità dei tratti in alcuni caratteri)
sans-serif Caratteri che non hanno serif.
monospace Caratteri in cui ogni carattere ha la stessa larghezza, 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 ad 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

Lo stesso argomento in dettaglio: Scalable Vector Graphics.

Sta per: Scalable Vector Graphics (Font)

SVG è 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:

Peso visivo

CSS fornisce quattro proprietà comuni per alterare il peso visivo e l'enfasi del 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 contenente. I valori disponibili sono i seguenti e funzionano più o meno allo stesso modo di una normale applicazione di elaborazione testi:

Altezza della linea

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

line-height: 1.6;

Spaziatura tra lettere e parole

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

Stili dei caratteri:

Stili di layout del testo:

Riempimento e contorno

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

.module { stroke: black; }

Esempio:

Tipologie di stroke:

Utilizzo nei software


Per scrivere del testo formattato è possibile usare 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[11] 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:

Note


  1. ^ 2.1.1 Per i messaggi di posta (e-mail) , su bertola.eu.
  2. ^ (EN) Arlene Rinaldi, The Net: User Guidelines and Netiquette , su courses.cs.vt.edu.
  3. ^ CSS Fonts Module Level 3 , su www.w3.org. URL consultato il 22 febbraio 2021.
  4. ^ (EN) Timothy J. Slattery e Keith Rayner, Effects of intraword and interword spacing on eye movements during reading: Exploring the optimal use of space in a line of text , in Attention, Perception, & Psychophysics, vol. 75, n. 6, 1º agosto 2013, pp. 1275–1292, DOI:10.3758/s13414-013-0463-8 . URL consultato il 22 febbraio 2021.
  5. ^ Famous Quotes from Type Designers | Typophile , su web.archive.org, 25 agosto 2013. URL consultato il 22 febbraio 2021 (archiviato dall'url originale il 25 agosto 2013).
  6. ^ Guida HTML: completa e dettagliata, i comandi , su HTML.it. URL consultato il 22 febbraio 2021.
  7. ^ Fundamental text and font styling - Learn web development | MDN , su developer.mozilla.org. URL consultato il 22 febbraio 2021.
  8. ^ (EN) Using @font-face , su CSS-Tricks. URL consultato il 22 febbraio 2021.
  9. ^ Erika Giulianini, Riempimento e contorno | Grafica HTML.it , su HTML.it. URL consultato il 22 febbraio 2021.
  10. ^ (EN) stroke , su CSS-Tricks. URL consultato il 22 febbraio 2021.
  11. ^ (EN) The 50 Best Free Pretty Fonts for Your Creative Projects , su Visme Blog, 2 luglio 2018. URL consultato il 22 febbraio 2021.

Bibliografia


Voci correlate











Categorie: Formattazione del testo




Data: 02.03.2021 06:34:48 CET

Sorgente: Wikipedia (Autori [Cronologia])    Licenza: CC-by-sa-3.0

Modifiche: Tutte le immagini e la maggior parte degli elementi di design correlati a questi sono stati rimossi. Alcune icone sono state sostituite da FontAwesome-Icons. Alcuni modelli sono stati rimossi (come "l'articolo ha bisogno di espansione) o assegnati (come" note "). Le classi CSS sono state rimosse o armonizzate.
Sono stati rimossi i collegamenti specifici di Wikipedia che non portano a un articolo o una categoria (come "Redlink", "collegamenti alla pagina di modifica", "collegamenti a portali"). Ogni collegamento esterno ha un'icona FontAwesome aggiuntiva. Oltre ad alcuni piccoli cambiamenti di design, sono stati rimossi i media container, le mappe, i box di navigazione, le versioni vocali e i geoformati.

Notare che Poiché il dato contenuto viene automaticamente prelevato da Wikipedia in un determinato momento, una verifica manuale è stata e non è possibile. Pertanto LinkFang.org non garantisce l'accuratezza e l'attualità del contenuto acquisito. Se ci sono informazioni che al momento sono sbagliate o che hanno una visualizzazione imprecisa, non esitate a Contattaci: e-mail.
Guarda anche: Impronta & Politica sulla riservatezza.