HTML and CSS Reference
In-Depth Information
font-size e font-family vengono sfruttati per indicare la dimensione e il tipo
di carattere;
dx e dy si usano per indicare a ogni lettera di quanti pixel spostarsi, in x e in y ;
rotate indica, infine, di quanto deve ruotare ogni lettera.
In pratica, con il markup visto in precedenza, indichiamo che la lettera “S” deve essere
spostata rispetto al punto di inizio di 2,8 pixel e ruotata di -25 gradi; la “V”, invece, viene
alzata di 6 pixel, mentre la G alzata di 3 pixel e ruotata di 25 gradi. Così facendo otteniamo
la scritta visibile nella figura 10.5 .
Figura 10.5 - Testo con manipolazione dei caratteri ottenuta con SVG.
L'aspetto interessante è che il testo è selezionabile, con tutte le operazioni che ne derivano.
Molteplici sono gli aspetti che possiamo controllare, come la spaziatura e le decorazioni:
purtroppo, per motivi di spazio, non possiamo trattarli tutti in questa sede, perciò vi invi-
tiamo a visionare le specifiche complete alla pagina http://aspit.co/a03 .
I colori si possono controllare con gli attributi (già visti) fill , stroke , e così via; lo
stroke , in particolare, rappresenta il colore del contorno di ogni carattere.
Sebbene abbiamo la possibilità di inserire testo, questo non va confuso con le carat-
teristiche tipiche di un documento HTML5. Per esempio, non possiamo fare il wrap del
testo, sebbene, con caratteristiche simili allo span , possiamo inserire come contenuto
dell'elemento text una lista di tspan che ci permetta di raggruppare del testo, dando
posizioni e aspetti differenti.
Nell'esempio 10.8 il testo viene diviso in tre parti consecutive ma allineate vertical-
mente più in basso.
Esempio 10.8
<text font-family="Verdana"
font-size="30"
y="30">
<tspan>Esempio</tspan>
<tspan dy="20">di</tspan>
 
Search WWH ::




Custom Search