Alcuni giorni fa abbiamo visto come attraverso i tag <sup> e <sub> sia possibile utilizzare apici e pedici in un testo HTML. Il risultato è sicuramente funzionale ma graficamente non sempre appagante. Attraverso l’uso dei fogli di stile CSS è possibile personalizzare l’aspetto di apici e pedici per ottenere una maggiore distinzione visiva rispetto al testo normale.
CSS applicati a sub e sup
Le possibilità di personalizzazione utilizzabili attraverso i CSS sono estremamente numerose e non possono essere riassunte in poche righe. Rispetto all’HTML puro poniamoci quindi due semplici obiettivi: da un lato vorremmo che apici e pedici avessero una dimensione del carattere più piccola rispetto al testo normale a cui si applicano; dall’altro vorremmo che apici e pedici fossero resi con una formattazione differente ad esempio impiegando un font a spaziatura fissa scritto in corsivo. Partendo da questi semplici obiettivi per gli apici (<sup>) utilizzeremo un codice CSS di questo tipo:
sup {
font-size: 60%;
font-style: italic;
font-family: "Courier New",Courier,monospace;
}
Attraverso la proprietà font-size il codice CSS indica al browser che il testo racchiuso nel tag <sup> andrà rappresentato con una dimensione pari al 60% del testo normale. Le rimanenti due proprietà riguardano invece la formattazione del testo: font-family prescrive l’uso di una famiglia di font a spaziatura fissa mentre attraverso font-style si indica in questo caso che i caratteri andranno rappresentati in corsivo.
Risultati
Il codice descritto sopra può essere applicato in maniera identica anche al tag <sub> per la gestione dei pedici. Il risultato è mostrato nell’immagine che accompagna questa guida in cui sono evidenti le differenze rispetto alla versione originale ottenuta con il solo HTML.