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:
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.
I contatori del contenuto generato si basano su quattro elementi fondamentali:
counter-reset
, che inizializza il contatore, a cui viene assegnato un nome
come identificativo univoco.counter-increment
, che incrementa il contatore dell'unità specificata.
Nel nostro caso non abbiamo specificato un unità, quindi viene incrementato di 1.counter()
(o la sua variante counters()
), che viene posta all'interno della
proprietà content
per controllare il contatore.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.
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.
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 (".").
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.
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:
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:
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.
Figura 13: Il sommario del documento
[D]