La numerazione dei capitoli e dei paragrafi di un documento fornisce al lettore la relazione di dipendenza tra i vari argomenti. Ad esempio per creare l'indice si potrebbero usare liste nidificate.
Per numerare le linee di una sezione si utilizzano le seguenti proprietà
counter-reset
counter-increment
content
::before
counter-reset: nome-del-contatore numero;
I possibili valori che si possono assegnare alla proprietà counter-reset sono:
nome è un nome di variabile scelto dal programmatore per identificare un contatore.
numero (facoltativo) definisce il valore a cui si deve inizializzare il contatore, ogni volta che si incontra il selettore. Il valore di default è 0.
counter-increment: nome del contatore
la variabile nome del contatore viene incrementata di 1, ogni volta che si incontra il selettore
content: testo
È usata con le pseudoclassi (:before o :after) per specificare un testo da inserire, prima o dopo, dell'elemento.
::before {
regole css;
}
Tra le regole di stile bisogna specificare anche la proprietà content con il testo da anteporre all'elemento indicato dal selettore.
Il selettore a cui applicare le proprietà potrebbe essere un qualsiasi tag di html, ma conviene, invece, definire dei marcatori personalizzati.
Per creare i nuovi tag occorre dichiararli in uno script. Il nome del nuovo marcatore deve contenere, obbligatoriamente, il segno "-" (trattino):
<script>
document.createElement("x-programma")
document.createElement("x-istruzioni")
</script>
Definire lo stile per i nuovi marcatori:
<style>
x-programma {
counter-reset: righe;
}
</style>
x-programma è il selettore del tag. righe è un contatore. Ogni volta che si apre una sezione con il tag "x-programma" il contatore x-istruzioni viene portato a 0.
<script>
document.createElement("x-programma")
document.createElement("x-istruzioni")
</script>
<style>
x-programma {
counter-reset: righe;
}
x-istruzioni {
counter-increment: righe;
}
x-programma x-istruzioni::before {
content: counter(righe) ". ";
color:gray;
}
</style>
Alcuni IDE coadiuvano il programmatore offrendo un'analisi sintattica delle righe. Ciò viene ottenuto colorando gli elementi che compongono la riga. Ad esempio, se il programmatore dimentica di chiudere una stringa, se ne accorge perchè anche gli elementi che seguono la stringa vengono rappresentati con lo stesso colore.
Conviene individuare gli elementi che possono comparire su una riga del programma e creare un marcatore per poi assegnargli le proprietà di stile.
In un programma possono comparire:
| elemento | marcatore | proprietà |
| tipo di variabile | tipo | blu |
| variabile | var | verde |
| costante | cost | arancio |
| funzione | fun | viola |
Nella sezione script creare i nuovi elementi:
<script>
document.createElement("x-tipo")
document.createElement("x-var")
document.createElement("x-cost")
document.createElement("x-fun")
</script>
Nella sezione style applicare le proprietà a ciascun marcatore:
<style>
x-tipo {
color:blue;
}
x-var {
color:green;
}
x-cost {
color:orange;
}
x-fun {
color:purple;
}
</style>
Con queste regole di stile, il documento precedente assume il seguente aspetto:
<script>
document. createElement("x-programma" )
document. createElement("x-istruzioni" )
</script>
<style>
x-programma { counter-reset: righe ;
} x-istruzioni { counter-increment: righe ;
} x-programma x-istruzioni ::before { content: counter(righe ) ". " ; color: gray;
} </style>
Un appropriato colore di sfondo può migliorare la lettura.
Le regole di stile che sono state applicate introducono il problema del corretto incolonnamento delle linee, infatti il programmatore usa l'indent (incolonnamento) per delimitare i vari blocchi del codice. Il numero di cifre del contatore sottrae spazio al testo e quindi passando dal numero 9 al numero 10 le nuove righe si spostano a destra.
Le seguenti regole impongono al browser di trattare ogni marcatore <x-istruzioni> contenuto tra i marcatori <x-programma> come se fosse una riga di tabella, e le due parti che compongono ciascuna riga (quella con il contatore e quella con il contenuto) come celle di una tabella:
x-programma x-istruzioni {
display:table-row;
}
x-programma x-istruzioni::before {
content: counter(righe) ". ";
color: yellow;
display:table-cell;
}
x-istruzioni {
display:table-cell;
}