Apici e pedici con i CSS

di Michele Costanzo Commenta

CSS Apici Pedici
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.

Lascia un commento

Il tuo indirizzo email non verrà pubblicato.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>