24. Il sommario

Il sommario si presenta come una serie di elenchi ordinati annidati, con una numerazione progressiva per ciascuna voce nei diversi livelli di annidamento. La marcatura necessaria alla sua formattazione è la seguente:

  1. <ol id="toc">
  2. <li><a href="#bg-overview">Background and Overview</a>
  3. <ol>
  4. <li><a href="#intro">Introduction</a></li>
  5. <li><a href="#access">What is Accessibility?</a>
  6. <ol>
  7. <li><a href="#type-access">Types/Categories of Access</a></li>
  8. <li><a href="#type-disabilities">Types of Disabilities, and How they are Addressed</a></li>
  9. </ol>
  10. </li>
  11. ...omissis...
  12. </ol>

Decidiamo di usare i contatori del contenuto generato per ricreare la numerazione progressiva ordinata, consci dei notevoli limiti nel supporto a tale caratteristica dei fogli di stile da parte di alcuni browser e dei lettori di schermo. Offriremo tuttavia un'alternativa per venire incontro alle loro esigenze. Diamo quindi gli stili necessari a formattare il sommario usando il contenuto generato.

  1. #toc {
  2. counter-reset: item;
  3. }
  4. #toc li {
  5. display: block;
  6. }
  7. #toc li:before {
  8. counter-increment: item;
  9. content: counter(item) ". ";
  10. font-weight: bold;
  11. font-family: Georgia, serif;
  12. color: #800;
  13. background: transparent;
  14. }
  15. #toc li ol {
  16. counter-reset: item2;
  17. }
  18. #toc li ol li:before {
  19. counter-increment: item2;
  20. content: counter(item) ". " counter(item2) " ";
  21. font-weight: normal;
  22. }
  23. #toc li ol li ol {
  24. counter-reset: item3;
  25. }
  26. #toc li ol li ol li:before {
  27. counter-increment: item3;
  28. content: counter(item) ". " counter(item2) ". " counter(item3) " ";
  29. font-style: italic;
  30. font-weight: normal;
  31. }

I contatori del contenuto generato si basano su quattro elementi fondamentali:

  1. La proprietà counter-reset, che inizializza il contatore, a cui viene assegnato un nome come identificativo univoco.
  2. La proprietà counter-increment, che incrementa il contatore dell'unità specificata. Nel nostro caso non abbiamo specificato un unità, quindi viene incrementato di 1.
  3. La funzione counter() (o la sua variante counters()), che viene posta all'interno della proprietà content per controllare il contatore.
  4. La proprietà content, che inserisce materialmente il contatore nel layout.

Il contenuto così creato viene inserito prima o dopo il contenuto effettivo di un elemento tramite gli pseudo-elementi :before (prima) e :after (dopo).

Il nostro sommario presenta tre livelli di annidamento (1, 1.1, 1.1.1), quindi creeremo tre contatori distinti, nominandoli rispettivamente item, item2 e item3. Vediamo in dettaglio il processo di inserimento dei contatori.

  1. Righe 1-6

    Viene creata l'istanza del contatore item, il cui àmbito di applicazione è l'intero sommario (elemento #toc). Tutte le voci dell'elenco principale e degli elenchi annidati vengono privati del marcatore, che altrimenti si andrebbe a sovrapporre al contenuto generato.

  2. Righe 7-14

    Il contatore item viene inserito prima delle voci dell'elenco principale. Gli vengono assegnati un colore, un font ed un peso del font particolari, oltre ad un punto dopo di esso (".").

  3. Righe 15-22

    Viene creata l'istanza del contatore item2 per il primo sottoelenco annidato. Il contatore viene quindi inserito prima del contenuto delle voci del primo sottoelenco, ma dopo il contatore item. Il peso del font viene ridotto. Si aggiunge un ulteriore punto dopo l'ultimo contatore.

  4. Righe 23-31

    Viene creata l'istanza del contatore item3 per il secondo sottoelenco annidato. Il contatore viene quindi inserito prima del contenuto delle voci del secondo sottoelenco, ma dopo il contatore item2 e dopo il contatore item. Lo stile del font viene impostato sul corsivo, e si aggiunge uno spazio (" ") dopo l'ultimo contatore.

La soluzione proposta ha tuttavia dei notevoli limiti nel supporto offerto da Internet Explorer 7 (ed inferiori), dai browser testuali e dai lettori di schermo. Occorre quindi ripiegare su una soluzione alternativa, modificando radicalmente la marcatura ed il foglio di stile. Per la marcatura avremo:

  1. <ul id="toc">
  2. <li><span class="tocnum first">1.</span> <a href="#bg-overview">Background and Overview</a>
  3. <ul>
  4. <li><span class="tocnum">1.1</span> <a href="#intro">Introduction</a></li>
  5. <li><span class="tocnum">1.2</span> <a href="#access">What is Accessibility?</a>
  6. <ul>
  7. <li><span class="tocnum third">1.2.1</span> <a href="#type-access">Types/Categories of Access</a></li>
  8. <li><span class="tocnum third">1.2.2</span> <a href="#type-disabilities">Types of Disabilities, and How they are Addressed</a></li>
  9. </ul>
  10. ...omissis...
  11. </ul>

Abbiamo sostituito gli elenchi ordinati con elenchi non ordinati, inserendo per ciascuna voce un elemento span aggiuntivo al fine di formattare la numerazione progressiva inserita direttamente nel sorgente. Gli stili diventano quindi i seguenti:

  1. #toc li {
  2. display: block;
  3. }
  4. #toc span.tocnum {
  5. font-family: Georgia, serif;
  6. color: #800;
  7. background: transparent;
  8. }
  9. #toc span.tocnum.first {
  10. font-weight: bold;
  11. }
  12. #toc span.tocnum.third {
  13. font-style: italic;
  14. }

Nello specifico, siamo costretti ad usare classi ad hoc per ottenere gli stessi effetti ottenuti in precedenza tramite il contenuto generato. In un browser testuale come Lynx ogni singola voce avrà comunque il proprio marcatore oltre alla numerazione. È un prezzo da pagare se vogliamo mantenere una certa compatibilità. L'immagine che segue ci mostra i progressi ottenuti sino ad ora.

Il sommario del documento Figura 13: Il sommario del documento [D]