Scopo

Illustrare alcune proprietà utilizzabili per la formattazione del testo.

CSS mette a dispozione un gran numero di proprietà che consentono di definire:

Tipo, stile e dimensione dei caratteri

Informazioni dettagliate su questo argomento possono essere trovate in: CSS3 Fonts Module Level 3

font-family

La proprietà che ha maggior impatto sulla rappresentazione dei caratteri è font-family.

Per font si intende lo stile di un set completo di caratteri tipografici. Ne esistono un numero enorme di tipi che possono essere raggruppati in famiglie. CSS riconosce le seguenti famiglie generiche di font:

CSS consente di assegnare a font-family un elenco di valori ognuno dei quali individua un particolare tipo di font. Il browser utilizzerà il primo a sua disposizione secondo l'ordine di definizione. E' possibile assegnare a font-family il nome generico della famiglia di appartenenza per cui le seguenti sono dichiarazioni legittime:

font-family:baskerville, cambria, garamond, georgia, "times new roman", serif;
SERIF SIGNIFICA GRAZIE, sono quei segnetti alle estremità dei caratteri.
0 1 2 3 4 5 6 7 8 9 10 £ $ % & ( ) = ? !

font-family:arial, helvetica, verdana, tahoma, geneva, san-serif;
SAN-SERIF SIGNIFICA SENZA GRAZIE, sono caratteri più spartani, più essenziali.
0 1 2 3 4 5 6 7 8 9 10 £ $ % & ( ) = ? !

"lucida handwriting","french script mt","bradley hand itc","freestyle script","vladimir script", cursive;
LO STILE CORSIVO riproduce per quando possibile la scrittura a mano.
0 1 2 3 4 5 6 7 8 9 10 £ $ % & ( ) = ? !

font-family:stencil, impact, fantasy;
DI FAMIGLIE FANTASY IL MIO BROWSER NE CONOSCE POCHE.
0 1 2 3 4 5 6 7 8 9 10 £ $ % & ( ) = ? !

font-family:courier, "courier new", "lucida console", monaco, consolas, monospace;
SONO FONT CON CARATTERI UNIFORMEMENTE SPAZIATI. Possono essere con o senza grazie.
0 1 2 3 4 5 6 7 8 9 10 £ $ % & ( ) = ? !

font-size

La dimensione dei caratteri può essere espressa in maniera assoluta assegnando a font-size uno dei seguenti valori: xx-small, x-small, small, medium, large, x-large, xx-large.

provo ognuno di essi:

caratteri piccolissimi

caratteri molto piccoli

caratteri piccoli

caratteri medi

caratteri grandi

caratteri molto grandi

caratteri grandissimi

La dimensione assoluta dei caratteri può essere espressa anche in punti tipografici o in pixel:

Dimensione di questi caratteri: 14pt

Dimensione di questi caratteri: 30px

La dimensione dei caratteri può essere espressa anche in forma relativa rispetto alla dimensione standard della font-family assegnando font-size i valori "smaller" e "larger" o in modo percentuale.

Dimensione dei caratteri un po più piccoli dello standard - font-size:smaller;

Dimensione dei caratteri un po più grandi dello standard - font-size:larger;

Dimensione di questi caratteri: 130% rispetto allo standard - font-size:130%;

font-style

La proprietà font style può assumere uno dei seguenti valori: normal, italic, oblique. Il valore di default è normal. L'effetto dell'applicazione dello stile può variare a seconda della font family applicata. Proviamone gli effetti:

STILE NORMAL - Questo paragrafo è scritto con lo stile normal

STILE ITALIC - Questo paragrafo è scritto con lo stile italic

STILE OBLIQUE - Questo paragrafo è scritto con lo stile oblique

STILE NORMAL - Questo paragrafo è scritto con lo stile normal

STILE ITALIC - Questo paragrafo è scritto con lo stile italic

STILE OBLIQUE - Questo paragrafo è scritto con lo stile oblique

L'effetto dell'applicazione dello stile può variare molto a seconda della font family:

STILE NORMAL - Questo paragrafo è scritto con lo stile normal

STILE ITALIC - Questo paragrafo è scritto con lo stile italic

STILE OBLIQUE - Questo paragrafo è scritto con lo stile oblique

STILE NORMAL - Questo paragrafo è scritto con lo stile normal

STILE ITALIC - Questo paragrafo è scritto con lo stile italic

STILE OBLIQUE - Questo paragrafo è scritto con lo stile oblique

STILE NORMAL - Questo paragrafo è scritto con lo stile normal

STILE ITALIC - Questo paragrafo è scritto con lo stile italic

STILE OBLIQUE - Questo paragrafo è scritto con lo stile oblique

font-weight

Consente di variare lo spessore/ la marcatura dei caratteri. puà assumere uno dei seguenti valori: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900. Ecco l'effetto dell'applicazione di diversi valori di font-weight:

Font-family:serif; font-size di default; font-weight:normal;

Font-family:serif; font-size di default; font-weight:lighter;

Font-family:serif; font-size di default; font-weight:bold;

Font-family:serif; font-size di default; font-weight:bolder;

Font-family:serif; font-size di default; font-weight:100;

Font-family:serif; font-size di default; font-weight:900;

Font-family:cursive; font-size di default; font-weight:normal;

Font-family:cursive; font-size di default; font-weight:lighter;

Font-family:cursive; font-size di default; font-weight:bold;

Font-family:cursive; font-size di default; font-weight:bolder;

Font-family:cursive; font-size di default; font-weight:100;

Font-family:cursive; font-size di default; font-weight:900;

Colore e sfondo del testo, foreground e background

Informazioni dettagliate sulla proprietà che hanno a che fare con i colori possono essere trovate in: CSS3 Color Module Level 3

I valori delle proprietà color e background possono essere assegnate tramite il nome del colore, il suo valore nelle rappresentazioni rgb esadecimale(#xxxxxx) e decimale (rgb(dd,dd,dd)).

Tabella con i valori dei colori base
esempio color name valore rgb hex valore rgb dec
________ black #000000 0,0,0
________ silver #C0C0C0 192,192,192
________ gray #808080 128,128,128
________ white #FFFFFF 255,255,255
________ maroon #800000 128,0,0
________ red #FF0000 255,0,0
________ purple #800080 128,0,128
________ fuchsia #FF00FF 255,0,255
________ green #008000 0,128,0
________ lime #00FF00 0,255,0
________ olive #808000 128,128,0
________ yellow #FFFF00 255,255,0
________ navy #000080 0,0,128
________ blue #0000FF 0,0,255
________ teal #008080 0,128,128
________ aqua #00FFFF 0,255,255

Paragrafo scritto con caratteri bianchi su fondo nero, ma cosa succede se arrivo a fondo linea. Basta solo provare a scrivere un paragrafo più lungo.


Paragrafo scritto con caratterei gialli su fondo rosso



Il paragrafo è in una div con background:black, color:white.




Il paragrafo è in una div con background:red, color:yellow.



Allineamento, rientro, interlinea, spaziatura

Informazioni dettagliate sulla proprietà che hanno a che fare con i testi possono essere trovate in : CSS3 Text Module Level 3

Proprietà text-align

text-align può assumere uno dei seguenti valori: start, end, left, right, center, justify, match-parent, start end.

text-align:start; è il valore di default. Proviamo gli altri valori applicandoli alle sezioni di testo che seguono:

text-align:end;

text-align:end; prima di provarlo non ho idea di cosa faccia. La definizione è: il contenuto inline-level è allineato con il bordo finale del line box.

Ora è chiaro.

text-align:left;

text-align:left; La definizione è: il contenuto inline-level è allineato al margine sinistro del line-box.

Da questa definizione non capisco la differenza con start.

Forse il suo effetto dipende dalla proprietà text-orientation o dalla dimensione del text-box

Infatti.

text-align:right;

text-align:right; La definizione è: il contenuto inline-level è allineato al margine destro del line-box.

Da questa definizione non capisco la differenza con end.

Forse il suo effetto dipende dalla proprietà text-orientation o dalla dimensione del text box.

Infatti.

text-align:center;

text-align:center; La definizione è: il contenuto inline-level è centrato all'interno del line-box.

Per questa definizione non dovrebbero esserci problemi.

Il suo effetto è chiaro.

Infatti.

text-align:justify;

text-align:justify; La definizione è: il contenuto inline-level è justificato in accordo al metodo specificato dalla proprietà text-justify. Proprietà, questa, che nelle mie prime intenzioni avevo deciso di trascurare. Forse la proprietà text-justify introduce raffinatezze ulteriori sulla modalità di giustificazione, ma il valore di default dovrebbe funzionare in maniera usuale. Se fosse come penso, ogni linea di testo dovrebbe iniziare e terminare rispettivamente all'inizio ed alla fine del line-box.

Il suo effetto è in linea con quanto mi aspettavo.

Ma più avanti voglio verificare le possibilità offerte dalla proprietà text-justify.

text-align:match-parent;

text-align:match-parent; La definizione è: questo valore si comporta come ereditato dal suo genitore, con l'eccezione che le eventuali proprietà start ed end sono interpretate come left e right rispettivamente. Nel caso in oggetto, non avendo specificato alcun valore per la proprietà text-align dei blocchi contenti il blocco corrente, la proprietà ereditata dovrebbe essere start interpretata come left. Resta il fatto che ancora non ho ben capito la differenza fra start e left.

Il suo effetto è in linea con quanto mi aspettavo.

text-align:start end;

text-align:start end; La definizione è: Specifica l'allineamento start della prima linea e di ogni linea immediatamente successiva ad un line-break forzato, ed un allineamento end per ogni restante linea. Ora forzo un line-break, vediamo cosa succede:
Se ho ben capito questa linea parte dalla posizione start. La linea successiva si troverà invece allineata a destra. E vero? Non lo so, non ho capito come funziona e forse non vale la pena perderci più tempo. Il suo effetto pertanto resta, per me, misterioso.

Proprietà text-indent

L'indentazione delle linee di testo dopo un ritorno a capo può essere assegnato tramite un numero assoluto o relativo.

text-indent:5%;

Questo paragrafo si trova all'interno di un blocco di testo peri il quale ho impostato la proprietà text indent al 5%.

Le altre proprietà impostate sono:
background:lime;
color:black;
font-family:garamond, serif;
font-size:16;

Il box contiene più paragrafi, alcuni più lunghi di una linea, altri più corti. Alcune line andranno pertanto a capo automaticamente. Altre sono invece interrotte tramite il tag <br> che provoca un "a capo" forzato senza però interrompere il paragrafo.

Questo è un paragrafo più corto di una linea.

Nella specifica CSS3 Text Module Level 3 vengono descritte due parole chiave: hanging e each-line, ma non sembrano, per il momento, avere effetto

text-indent:5em;

Questo paragrafo si trova all'interno di un blocco di testo peri il quale ho impostato la proprietà text indent a 5em.

Le altre proprietà impostate sono:
background:lightgray;
color:black;
font-family:"lucida handwriting", cursive
font-size:16;

Il box contiene più paragrafi, alcuni più lunghi di una linea, altri più corti. Alcune line andranno pertanto a capo automaticamente. Altre sono invece interrotte tramite il tag <br> che provoca un "a capo" forzato senza però interrompere il paragrafo.

Questo è un paragrafo più corto di una linea.

Nella specifica CSS3 Text Module Level 3 vengono descritte due parole chiave: hanging e each-line, ma non sembrano, per il momento, avere effetto

Proprietà line-height

Controlla lo spazio verticale occupato da ogni linea di testo.Il suo valore può essere espresso in forma assoluta o relativa. A meno di esigenze particolari conviene sempre esprimere le dimensioni in forma relativa, ad esempio in unità em (la dimensione del carattere M per il font corrente). Se non specificato assume un valore "auto" dipendente dalle altre proprietà del testo. Può, tramite la keyword "inherit" ereditare il valore dal suo elemento padre.

line-height:1em;
Nel paragrafo precedente la proprietà line-height non era stata specificata, aveva quindi assunto il valore "auto". Nel presente paragrafo line-height è impostata a 1em. In questo modo la linea di testo ha la stessa altezza dei caratteri che la compongono, più qualcosina giusto per non far appiccicare le linee.

line-height:1em;
Come nel paragrafo precedente, line-eight vale 1em, l'unica cosa che cambia è il valore di font-size. Le proporzioni rimangono le stesse.

line-height:1.2em;
Spaziatura verticale aumentata del 20%.

line-height:120%;
Spaziatura verticale aumentata del 20%.

Proprietà word-spacing

Consente di modificare la spaziatura fra le parole. Può assumere un valore numerico assoluto o relativo o il suo valore di default "normal". Questo paragrafo è scritto con word-spacing:normal;

word-spacing:2em
Questo paragrafo è scritto con spaziatura fra le parole pari a 2em.

word-spacing:2ch
Questo paragrafo è scritto con spaziatura fra le parole pari a 2ch.

Proprietà letter-spacing

Consente di modificare la spaziatura fra le lettere di una parola. Può assumere un valore numerico assoluto o relativo o il suo valore di default "normal". Questo paragrafo è scritto con word-spacing:normal;

word-spacing:2em
Questo paragrafo è scritto con spaziatura fra le parole pari a 2em.

word-spacing:2ch
Questo paragrafo è scritto con spaziatura fra le parole pari a 2ch.

Orientazione e direzione

Informazioni dettagliate sulla proprietà che hanno a che fare con le modalità di scrittura: CSS Writing Modes Level 3

Riporto solo qualche esempio di orientazione del testo. L'argomento mi sembra piuttosto complesso.

box1 Qualche linea di testo

Per verificare il flusso delle linee

Per verificare il flusso dei caratteri

Ancora qualche linea di testo

Un'altra linea di testo 1

box2 Qualche linea di testo

Per verificare il flusso delle linee

Per verificare il flusso dei caratteri

Ancora qualche linea di testo

Un'altra linea di testo 2

box3 Qualche linea di testo

Per verificare il flusso delle linee

Per verificare il flusso dei caratteri

Ancora qualche linea di testo

Un'altra linea di testo 3

box4 Qualche linea di testo

Per verificare il flusso delle linee

Per verificare il flusso dei caratteri

Ancora qualche linea di testo

Un'altra linea di testo 4

box5 Qualche linea di testo

Per verificare il flusso delle linee

Per verificare il flusso dei caratteri

Ancora qualche linea di testo

Un'altra linea di testo 1

box6 Qualche linea di testo

Per verificare il flusso delle linee

Per verificare il flusso dei caratteri

Ancora qualche linea di testo

Un'altra linea di testo 2

box7 Qualche linea di testo

Per verificare il flusso delle linee

Per verificare il flusso dei caratteri

Ancora qualche linea di testo

Un'altra linea di testo 3

box8 Qualche linea di testo

Per verificare il flusso delle linee

Per verificare il flusso dei caratteri

Ancora qualche linea di testo

Un'altra linea di testo 4