Nel nostro documento è presente anche del codice di esempio. Tale codice viene rappresentato in blocchi con sfondo grigio scuro e con carattere monospaziato. Il contrasto di colore, pur essendo in questo caso corretto, mal si combina con il tipo di carattere scelto, risultando a volte di difficile lettura. Per questo motivo abbiamo deciso di cambiare il contrasto di colore, pur mantenendo un font simile a quello originale.
Di norma quando si deve scegliere di formattare del codice si ricorre quasi sempre all'elemento pre
. Tuttavia
questa scelta non è la più indicata per una serie di ragioni:
L'elemento pre
ha per impostazione predefinita il valore pre
per la proprietà
white-space
. Ciò significa che le righe non andranno a capo a meno che non le si mandi a capo
direttamente nel sorgente. In questo modo, se si cambiano le dimensioni del layout o si ridimensiona la finestra o l'utente
decide di ridimensionare il font, il testo presente in tale elemento potrebbe fuoriuscire dall'elemento stesso. Questo fenomeno
comporta, in Internet Explorer 6 ed inferiori, la comparsa di una barra di scorrimento orizzontale a determinate risoluzioni
di schermo.
Se formattiamo il codice di esempio usando l'elemento pre
, viene a mancare l'ordine logico nel codice usato.
Se per esempio volessimo far riferimento ad una riga precisa nel codice, dovremmo aggiungere un elemento contenitore attorno
a tale riga, formattarlo ed inserirvi un identificatore univoco. Attualmente i CSS
possono selezionare solo la prima riga di un blocco (pseudo-elemento :first-line
), ma non dispongono di un meccanismo
per selezionare la n-esima riga di un blocco
Per questi motivi decidiamo di usare un elenco ordinato in cui per ogni voce andremo ad inserire la corrispettiva riga di codice. La marcatura usata sarà la seguente:
Gli stili saranno i seguenti:
In questo codice usiamo un contenitore per circondare l'elenco ordinato. Volendo si può fare a meno di tale contenitore ed assegnare gli stili delle righe 1-6 direttamente all'elenco ordinato. Per eliminare il marcatore dell'elenco usiamo la tecnica vista in precedenza, ossia dichiariamo di blocco le voci dell'elenco. Tuttavia per ottenere una compatibilità anche con Internet Explorer 7 (ed inferiori) è necessario ricorrere alla strategia vista in precedenza, modificando la marcatura come segue:
A questo punto si imposta il colore del testo dell'elemento li
sullo stesso colore dello sfondo dell'elemento
con classe .code
e poi si reimposta il colore appropriato per l'elemento code
che contiene il testo
all'interno delle voci di elenco. Si noti che in questo caso abbiamo usato un elemento con valenza semantica (code
),
in quanto il testo all'interno delle voci dell'elenco è del codice di computer.
Da ultimo, per ricreare l'effetto tipico dell'indentazione delle righe di codice si può utilizzare una soluzione come la seguente:
Assegniamo una classe differente a ciascuna voce, con un'indentazione del testo progressiva. In questo caso, avendo dichiarato
le voci dell'elenco come blocchi, possiamo applicare la proprietà text-indent
alle voci. Nel caso volessimo
distanziare un blocco di codice dall'altro, possiamo usare questa soluzione:
Assegniamo un margine inferiore ad una particolare voce dell'elenco, che si distanzierà dalle altre della misura specificata. L'immagine che segue ci mostra il risultato ottenuto.
Figura 15: I blocchi di codice formattati
[D]