26. Il codice di esempio

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:

  1. Difficile manutenzione

    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.

  2. Mancanza di ordine logico nel codice

    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:

  1. <div class="code">
  2. <ol>
  3. <li><H1 CLASS="western">Heading 1</H1></li>
  4. <li><P>Sample text</P></li>
  5. <li><H2 CLASS="western">Heading 1.1</H2></li>
  6. <li><P>More sample text</P></li>
  7. <li><H3 CLASS="western">Heading 1.1.1</H3></li>
  8. <li><H1 CLASS="western">Heading 2</H1></li>
  9. <li>Where did the class attribute come from?</li>
  10. </ol>
  11. </div>

Gli stili saranno i seguenti:

  1. .code {
  2. padding: 0.5em;
  3. background: #e0e0e0;
  4. color: #000;
  5. font: 1em Courier, monospace;
  6. }
  7. .code ol {
  8. padding: 0;
  9. margin-left: 2.5em;
  10. margin-right: 2.5em;
  11. }
  12. .code ol li {
  13. background: #f5f5f5;
  14. display: block;
  15. padding: 0.2em;
  16. margin-bottom: 3px;
  17. }

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:

  1. <div class="code">
  2. <ol>
  3. <li><code>... </code></li>
  4. ...omissis
  5. </ol>

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:

  1. .code li.indent1 {
  2. text-indent: 1em;
  3. }
  4. .code li.indent2 {
  5. text-indent: 2em;
  6. }
  7. /* eccetera */

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:

  1. .code li.vspace {
  2. margin-bottom: 1em;
  3. }

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.

I blocchi di codice formattati Figura 15: I blocchi di codice formattati [D]