CSS: Formattazione del testo

Transcript

CSS: Formattazione del testo

Laboratorio di Tecnologie Web
CSS: Formattazione del
testo
Dott. Stefano Burigat
www.dimi.uniud.it/burigat
Proprietà per la gestione dei font
CSS definisce un insieme di proprietà che possono essere
utilizzate per gestire aspetti come il tipo o la dimensione dei
font utilizzati per visualizzare l'informazione testuale.
Tipo di font
La proprietà “font-family” viene utilizzata per specificare
un font o una lista di font (nota come stack di font) per
nome.
body { font-family: Arial; }
p { font-family: "Duru Sans", Verdana, sans-serif; }
I valori della proprietà devono rispettare alcune regole:
• Tutti i nomi di font, ad eccezione delle famiglie generiche
(come il terzo valore della seconda regola sopra), devono
avere l'iniziale maiuscola
• I font devono essere separati da virgole
• Nomi con spazi devono essere racchiusi tra parentesi
Specificare uno stack di font al posto di un font unico
permette al browser di avere più soluzioni nel caso in cui il
font specificato non sia disponibile. Il browser prova le
diverse opzioni a partire dal primo valore. Se nessuno dei
font specificati viene trovato, viene utilizzato il font di
default.
I browser attuali supportano la possibilità di fare
riferimento a font non presenti sulla macchina dell'utente
(web font). Ci sono due approcci principali per ottenere
questo risultato: mettere a disposizione il font sul proprio
server o utilizzare dei servizi appositi disponibili online. Il
primo approccio prevede di trovare il font che serve (e
assicurarsi di poterlo utilizzare), salvare il font nei diversi
formati supportati dai browser, fare l'upload dei file sul
server, utilizzare la regola CSS @font-face nei propri
documenti CSS, specificare il nome del font tramite la
proprietà “font-family”. Il secondo approccio, molto più
semplice, prevede di sfruttare dei servizi online che fanno il
lavoro per noi e permettono di integrare i font con un paio
di righe di codice. Si veda ad esempio il servizio fornito da
Google alla pagina http://www.google.com/fonts/.
Esistono 5 famiglie di font generiche che è possibile
utilizzare quando non c'è bisogno di un font specifico
oppure come ultima opzione negli stack di font:
• serif (ad es. Times New Roman, Georgia): font con
delle appendici decorative alle estremità di alcune
lettere
• sans-serif (ad es. Arial, Verdana, Helvetica): font senza
appendici decorative
• monospace (ad es. Courier): font in cui ogni carattere
occupa lo stesso spazio
• cursive (ad es. Comic Sans): font che emulano la
scrittura manuale
• fantasy (ad es. Western): font decorativi (raramente
utilizzati sul web per motivi di leggibilità)
La strategia migliore per la specifica dei font nelle proprie
pagine web è inserire per primo il font che si vuole
utilizzare, poi specificare una o più alternative simili che
normalmente si trovano installate sulle macchine degli
utenti (perché già fornite dal sistema operativo o da
applicazioni comuni come Office) e infine indicare la
famiglia generica più adeguata. Online, si trovano molte
informazioni su quali sono i font più comuni (web safe
font) e suggerimenti sugli stack di font da utilizzare (css
font stack).
Dimensione del testo
La dimensione del testo può essere specificata tramite la
proprietà “font-size”. Ci sono diversi modi per specificare i
valori di dimensione:
• utilizzando una percentuale
p { font-size: 150%; }
• utilizzando una delle unità di misura della lunghezza
supportate da CSS
p { font-size: 1.5em; }
• utilizzando una delle dimensioni predefinite (tramite
parola chiave)
p { font-size: x-large; }
• utilizzando una dimensione relativa a quella del testo
intorno (tramite parola chiave)
p { font-size: larger; }
Le dimensioni specificate in percentuale sono relative
all'elemento padre. Nel frammento di codice che segue, la
proprietà “font-size” dell'elemento <body> è stata
specificata come 100% della dimensione di default del testo
(che normalmente è di 16 pixel). Poichè “font-size”
dell'elemento <p> ha valore 150%, la dimensione del testo
del paragrafo è pari a 150% di 16 cioè 24 pixel. In questo
modo, le dimensioni del testo dei vari elementi sono sempre
proporzionali tra di loro.
body { font-size: 100%; }
p { font-size: 150%; }
L'unità di misura della lunghezza più utilizzata in CSS è
l'em che è definita come la distanza tra baseline (di due
righe) quando un font è utilizzato senza spazio extra
(leading) tra le linee. In pratica, per un testo di dimensione
16 pixel, 1em equivale a 16 pixel; per un testo di
dimensione 12 pixel, 1em equivale a 12 pixel e così via.
Quando viene definita la proprietà “font-size” in em, il
valore specificato è sostanzialmente un valore di scala
relativo alla dimensione dell'elemento padre. Nell'esempio
seguente, la dimensione del testo dell'elemento <p> è 24
pixel in quanto è ottenuta moltiplicando il valore in em per
la dimensione del testo del padre (16 pixel).
body { font-size: 100%; }
p { font-size: 1.5em; }
L'esempio illustra anche il modo più appropriato per
l'utilizzo degli em, cioè specificare la dimensione
dell'elemento <body> come 100% e tutto il resto in em
(notate che NON ci deve essere uno spazio tra il numero e
l'unità di misura). Detto questo, l'utilizzo degli em non è
sempre facile poiché:
• Browser e piattaforme diverse possono gestire i calcoli
con gli em in modo diverso a causa di errori di
arrotondamento.
• Poichè em è un'unità di misura relativa, la dimensione
del testo di un elemento dipende dai livelli di
innestamento dell'elemento stesso. Ad esempio,
supponiamo di avere un elemento <h2> all'interno di
un elemento <article> all'interno di <body> e di volere
visualizzare il testo di <h2> con dimensione 18 pixel e
il testo di <article> con dimensione 14 pixel. Se
<body> utilizza le dimensioni standard (16 pixel),
allora il valore in em per <article> viene determinato
dividendo il valore che si vuole ottenere (14px) per il
valore del contenitore (16px), che risulta in .875. Con
lo stesso procedimento, il valore in em di <h2> viene
calcolato dividendo 18px (risultato desiderato) per
14px (dimensione di <article>), ottenendo 1.28571429.
body {font-size: 100%;}
article {font-size: .875em;}
h2 {font-size: 1.28571429em; }
Oltre agli em, altre unità di misura per la lunghezza
utilizzabili in CSS sono:
• px (pixel) definiti come 1/96 di pollice
• pt (punti): 1/72 di pollice
• pc (picas): 1pc = 12pt
• mm, cm, in: millimiteri, centimetri, pollici
• ex (x-height): altezza della lettera x minuscola nel font
corrente
• rem (root em): dimensione in em dell'elemento radice
<html>
• ch (zero width): larghezza del carattere 0 nel font
corrente
• vw (viewport width): 1/100 della larghezza della
finestra corrente del browser
• vh (viewport height): 1/100 dell'altezza della finestra
corrente del browser
• vm (viewport minimum): il minore tra vw e vh
px, pt, pc, mm, cm e in sono unità di misura assolute e
dovrebbero essere evitate nelle pagine web. rem, ch, vw, vh
e vm sono state introdotte in CSS3.
L'utilizzo di rem come unità di misura risolve uno dei
problemi di em cioè il fatto che il valore di un elemento
dipende dal suo livello di innestamento. I valori specificati
in rem sono sempre relativi alla dimensione specificata per
l'elemento <html> (di solito 100%). Per permettere
l'utilizzo di rem anche sui browser che non lo supportano, è
necessario specificare la dimensione anche in un'altra unità
di misura, inserendo quella in rem per ultima.
html {font-size: 100%;}
article {
font-size: 12px;
font-size: .75rem;
}
I due modi rimanenti per specificare “font-size” si basano
sull'utilizzo di specifiche parole chiave. Le parole xx-small,
x-small, small, medium, large, x-large, e xx-large
permettono di specificare delle dimensioni che sono scalate
proporzionalmente le une rispetto alle altre. Di norma,
medium corrisponde al valore di default dei browser e le
altre parole variano le dimensioni di conseguenza (ma gli
specifici valori usati non sono definiti).
Le parole chiave larger e smaller servono invece a dare
un'indicazione relativa di dimensione rispetto a quella
dell'elemento contenitore.
font-weight
La proprietà “font-weight” permette di definire lo spessore
di un font. I possibili valori sono normal, bold, bolder, e
lighter oltre a 100, 200, 300, 400, 500, 600, 700, 800, 900.
Per poter utilizzare un certo valore di peso, è necessario che
il relativo font abbia una versione specifica dei caratteri per
quel peso. Nella maggior parte dei casi, gli unici due valori
utilizzati sono bold e normal. Il valore normal può essere
utile per far apparire con font normale del testo che sarebbe
invece apparso in grassetto (come quello racchiuso
nell'elemento <strong>).
<!DOCTYPE html>
<html>
<head>
<title>Tecnologie web</title>
<style type="text/css">
p {
font-weight: bold;
}
strong {
font-weight: normal;
}
</style>
</head>
<body>
<p>A questo paragrafo vengono applicate <strong>regole
di stile</strong> in cascata.</p>
</body>
</html>
font-style
La proprietà “font-style” permette di definire l'inclinazione
del testo. I possibili valori sono normal, italic e oblique. La
differenza tra italic ed oblique è che il primo è di solito una
versione ad-hoc del font mentre il secondo prende il font
normale e lo inclina. In pratica, nella maggior parte dei casi
danno lo stesso risultato.
strong {
font-weight: normal;
font-style: italic;
}
font-variant
La proprietà “font-variant” permette di definire del testo in
maiuscoletto. I valori possibili sono normal e small-caps.
Se non esiste una versione del font apposita, i browser
semplicemente scalano le lettere maiuscole normali.
strong {
font-variant: small-caps;
}
font
La proprietà “font” è una scorciatoia che permette di
specificare tutte le altre proprietà viste finora in una volta
sola. In particolare, permette di specificare i valori delle
diverse proprietà font-style, font-weight, font-variant, fontsize/line-height, font-family separati da uno spazio. La
proprietà “line-height” consente di definire l'altezza della
linea di testo, come vederemo nella sezione successiva. Il
seguente esempio specifica i valori per ciascuna proprietà:
p {
font: oblique bold small-caps 1.5em/1.8em Verdana, sansserif;
}
Notate che in questo esempio gli ultimi due valori fanno in
realtà parte della stessa proprietà. Come minimo, la
proprietà “font” deve contenere valori per le proprietà
“font-size” e “font-family”, in questo specifico ordine. Se
ciò non avviene o se l'ordine delle proprietà non è
rispettato, l'intera regola non è valida. Le altre proprietà
devono essere specificate prima del valore di “font-size” ed
il loro ordine non è importante. Se non vengono specificati
dei valori per font-style, font-weight e font-variant, viene
utilizzato di default il valore normal.
Formattazione delle righe
CSS mette a disposizione proprietà per gestire la
formattazione di intere righe di testo tramite indentazioni,
spazi ed allineamenti.
Altezza delle righe
La proprietà “line-height” definisce la distanza minima tra
baseline di righe diverse, impostando in tal modo lo spazio
occupato da ogni riga. Si tratta di una distanza minima
perchè se si inseriscono su una riga elementi più grandi (ad
esempio un'immagine) allora l'altezza della riga è maggiore.
Nonostante la distanza venga definita da baseline a
baseline, la maggior parte dei browser divide equamente lo
spazio vuoto extra sopra e sotto il testo in modo tale che il
testo stesso venga posizionato al centro della riga.
Gli esempi seguenti mostrano i tre modi in cui può essere
specificato il valore di questa proprietà, come numero,
come misura di lunghezza e come percentuale. Nel primo e
nel terzo caso, il valore inserito è un fattore di scala riepstto
alla dimensione corrente del font. Nel secondo caso, si può
utilizzare una qualsiasi unità di misura sebbene l'utilizzo di
em sia il più comune. In tutti e tre gli esempi, l'altezza della
riga viene definita come il doppio della dimensione del
testo.
p { line-height: 2; }
p { line-height: 2em; }
p { line-height: 200%; }
Indentazione
La proprietà “text-indent” permette di definire l'intestazione
della prima riga di testo di un paragrafo (per definire
l'indentazione di un intero paragrafo si usano altre
proprietà). Questa proprietà viene ereditata ma si applica
solo ad elementi di tipo blocco, alle celle delle tabelle e ad
elementi definiti come blocchi inline.
Il valore di “text-indent” può essere specificato come
misura di lunghezza o come percentuale (in tal caso, riferita
alla lunghezza dell'elemento padre).
p#1 { text-indent: 2em; }
p#2 { text-indent: 25%; }
p#3 { text-indent: -35px; }
Notate, nel terzo caso, la definizione di un valore negativo
che consente di ottenere un riga che sporge rispetto al resto
del paragrafo. Per ottenere questo risultato è però
necessario assicurarsi di aver impostato un margine in
modo che la riga non finisca fuori dal bordo del browser.
Notate anche che il valore che viene ereditato nel caso della
percentuale è quello calcolato (cioè il numero di pixel), non
la percentuale stessa.
Allineamento orizzontale
E' possibile gestire l'allineamento del testo così come
avviene nei word processor utilizzando la proprietà “textalign” che viene ereditata ma si applica solo ad elementi di
tipo blocco, alle celle delle tabelle e ad elementi definiti
come blocchi inline.
I possibili valori della proprietà sono left, right, center,
justify.
<!DOCTYPE html>
<html>
<head>
p#p1 { text-align: left; }
p#p2 { text-align: right; }
p#p3 { text-align: center; }
p#p4 { text-align: justify; }
</style>
</head>
<body>
<p id="p1">A questo paragrafo allineato a sinistra
vengono applicate <em style="color: red">regole di stile</em>
in cascata.</p>
<p id="p2">A questo paragrafo allineato a destra vengono
applicate <em style="color: red">regole di stile</em> in
cascata.</p>
<p id="p3">A questo paragrafo centrato vengono applicate
<em style="color: red">regole di stile</em> in cascata.</p>
<p id="p4">A questo paragrafo giustificato vengono
applicate <em style="color: red">regole di stile</em> in
cascata.</p>
</body>
</html>
Altre proprietà applicabili al testo
CSS mette a disposizione altre proprietà per la gestione del
testo che possono risultare utili in alcuni (rari) casi.
text-decoration
La proprietà “text-decoration” può essere utilizzata per
inserire linee sotto, sopra o attraverso il testo, oppure per
eliminare la sottolineatura dai link. E' una proprietà che si
applica a tutti gli elementi ma non viene ereditata (poichè le
linee passano anche attraverso gli elementi figli, potrebbe
comunque sembrare che ci sia ereditarietà). I possibili
valori della proprietà sono none, underline, overline, linethrough e blink. Il valore none serve ad eliminare qualsiasi
decorazione e si usa principalmente con i link. Nel caso in
cui venga utilizzato è comunque necessario assicurarsi che i
link siano facilmente identificabili in qualche altro modo.
a { text-decoration: none; }
In generale, è meglio non fare uso della decorazione del
testo in quanto potrebbe causare confusione nell'utente se
male implementata (ad esempio, il testo sottolineato viene
spesso confuso con i link).
Capitalizzazione
La proprietà text-transform può essere utilizzata per
modificare la capitalizzazione del testo, indipendentemente
da come il testo originale viene scritto. I possibili valori
sono none, capitalize, lowercase e uppercase.
<!DOCTYPE html>
<html>
<head>
p#p1 { text-transform: none; }
p#p2 { text-transform: capitalize; }
p#p3 { text-transform: lowercase; }
p#p4 { text-transform: uppercase; }
</style>
</head>
<body>
<p id="p1">L'IBM ha sede ad Armonk, New
</body>
</html>
York,
York,
York,
York,
USA.</p>
USA.</p>
USA.</p>
USA.</p>
Spaziatura
Le proprietà “letter-spacing” e “word-spacing” permettono
di aggiungere spazio rispettivamente tra le lettere e tra le
parole del testo a cui vengono applicate. Supportano come
valore una delle misure di lunghezza definite in precedenza.
Come per altre proprietà, il valore calcolato (in pixel) per
un elemento viene passato anche agli elementi discendenti.
<!DOCTYPE html>
<html>
<head>
p#p1 { letter-spacing: 8px; }
p#p2 { word-spacing: 1.5em; }
</style>
</head>
<body>
<p id="p1">L'IBM ha sede ad Armonk, New York, USA.</p>
<p id="p2">L'IBM ha sede ad Armonk, New York, USA.</p>
</body>
</html>
Ombreggiatura
La proprietà “text-shadow”, introdotta in CSS3, permette di
aggiungere ombreggiatura al testo. L'ombreggiatura viene
disegnata dietro al testo ma davanti al background e ad
eventuali bordi, se presenti. IE9 e precedenti non la
supportano.
Il valore della proprietà è costituito da tre misure ed un
colore. La prima misura specifica l'offset orizzontale ossia
lo spostamento orizzonatale dell'ombra rispetto al testo (un
valore positivo implica uno spostamento verso destra, uno
negativo verso sinistra). La seconda misura specifica l'offset
verticale (valore positivo per spostamento verso il basso,
negativo verso l'alto). La terza misura, opzionale, definisce
un raggio di sfocatura per rendere l'ombra meno definita.
Più il raggio è alto, più l'ombra è sfocata. L'ultimo
componente di “text-shadow” è il colore utilizzato per
l'ombra. Se non viene specificato, viene utilizzato lo stesso
colore del testo.
<!DOCTYPE html>
<html>
<head>
h1#p1 { text-shadow: .2em .2em .1em silver; }
h1#p2 { text-shadow: -.3em -.3em .2em silver; }
</style>
</head>
<body>
<h1 id="p1">Titolo ombreggiato</h1>
</body>
</html>
E' anche possibile applicare più di un'ombreggiatura alla
volta, nel qual caso esse vengono disegnate nell'ordine in
cui vengono incontrate, permettendo di creare effetti come
bagliori, incisioni, etc. Nonostante ciò è bene limitare al
massimo l'utilizzo dell'ombreggiatura in quanto rende le
informazioni più difficili da leggere e può peggiorare le
prestazioni del browser.
<!DOCTYPE html>
<html>
<head>
body {background-color: thistle;}
h1#p1 { text-shadow: -.7em -.5em .2em gray, .2em .2em
.1em gray; }
h1#p2 { text-shadow: 0 0 .7em purple; }
h1#p3 { color: #ba9eba; text-shadow: -.05em -.05em .
05em white, .03em .03em .05em purple; }
h1#p4 { color: #ba9eba; text-shadow: -.05em -.05em .
05em purple, .03em .03em .05em white; }
</style>
</head>
<body>
</body>
</html>
vertical-align
La proprietà “vertical-align” viene utilizzata per specificare
il posizionamento della baseline di un elemento inline (ad
esempio, un'immagine) rispetto alla baseline del testo
intorno. Può anche essere utilizzata per specificare
l'allineamento verticale del contenuto di una cella nelle
tabelle. Non viene ereditata.
I possibili valori sono baseline, sub, super, top, text-top,
middle, textbottom, bottom. E' inoltre possibile specificare
un valore di lunghezza oppure una percentuale (in tal caso,
la percentuale è riferita alla proprietà “line-height”).
white-space
La proprietà “white-space” definisce come gestire gli spazi
bianchi presenti in un elemento.
I possibili valori sono normal, nowrap, pre, pre-line, prewrap. Ad esempio, il valore pre è equivalente all'uso
dell'elemento <pre> in html. La seguente tabella riassume
l'effetto dei diversi valori per quanto riguarda la gestione
dei ritorni a capo, degli spazi e del wrapping automatico del
browser.
visibility
La proprietà “visibility” ha due possibili scopi:
• Nascondere un elemento lasciando vuoto lo spazio che
questo avrebbe occupato.
• Nascondere righe o colonne di una tabella.
Nel primo caso è necessario utilizzare il valore hidden, nel
secondo il valore collapse. E' anche possibile utilizzare il
valore visible per ripristinare la visibilità (ad esempio, di un
elemento figlio dato che la proprietà viene ereditata). Il
supporto del valore collapse da parte dei browser non è
uniforme e può portare a risultati diversi.
<!DOCTYPE html>
<html>
<head>
p#p1 { visibility: hidden; }
p#p2 { color: red; }
</style>
</head>
<body>
<p id="p1">Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua.</p>
<p id="p2">Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua.</p>
</body>
</html>
Gestione delle liste
CSS mette a disposizione alcune proprietà che consentono
di scegliere il tipo e la posizione dei marker utilizzati per la
visualizzazione delle liste o di eliminarli completamente.
Queste proprietà si applicano esclusivamente agli elementi
<ul>, <ol> e <li> o ad elementi la cui proprietà “display” è
stata impostata a list-item (in tal modo è possibile applicare
lo stile di una lista anche ad elementi come i paragrafi).
Tipo di marker
La proprietà “list-style-type” permette di scegliere il marker
che verrà visualizzato prima di ogni elemento di una lista.
Tipicamente, questa proprietà viene specificata con valore
none in modo da eliminare la visualizzazione del marker. I
valori disc, circle e square permettono di scegliere il tipo di
marker per le liste non ordinate (ma non consentono di
variarne lo stile, che è definito dal browser). La seguente
tabella mostra gli altri valori CSS2.1 utilizzabili per definire
il tipo di numerazione nelle liste ordinate. NOTA: CSS3 ha
introdotto la nuova regola @counter-style per permettere la
definizione di stili personalizzati per liste e contatori.
Posizione dei marker
La proprietà “list-style-position” specifica se i marker
devono fare parte del contenuto di una lista (valore inside)
oppure no (valore outside). Il valore di default è outside.
<!DOCTYPE html>
<html>
<head>
li {border: 1px solid;}
ul#p1 {
list-style-type: disc;
list-style-position: inside;
}
ul#p2 {
list-style-type: square;
list-style-position: outside;
}
</style>
</head>
<body>
<ul id="p1">
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento
</ul>
<ul id="p2">
<li>Elemento
<li>Elemento
<li>Elemento
</ul>
</body>
</html>
3</li>
1</li>
2</li>
3</li>
Immagini marker
La proprietà “list-style-image” può essere utilizzata per
specificare un'immagine da impiegare come marker. Il
valore della proprietà è l'URL dell'immagine. E' preferibile
specificare anche la proprietà “list-style-type” per i casi in
cui l'immagine non sia disponibile o la proprietà non sia
supportata.
ul {
list-style-image: url(/images/marker.png);
list-style-type: circle;
}
list-style
La proprietà “list-style” permette di specificare le tre
proprietà precedenti in una volta sola, nell'ordine che si
vuole.
ul {
list-style: url(/images/marker.png) circle outside;
}

CSS: Formattazione del testo

Transcript

Documenti analoghi

Sei proprio il mio Typo: La vita segreta delle font

corso base del webmaster

Tag RFID per l`abbigliamento dei bambini Boboli

Untitled - EasyReading

yearbook Termine inglese per annuario. yogh [ʒ]. Lettera dell

lucida handwriting italic

Font dell`era digitale...la tipografia sta cambiando con

Impiego Appropriato dei font

6x - Politecnico di Torino

BIGLIETTI DA VISITA