Näita sildipilve

Nummerdatud pealkirjad ja lõigud (süsteemitähis)

Kirjutas ,

SüsteemitähisMa olen pikemat aega püüdnud leida CSS lahendust juriidiliste dokumentide sisu numereerimiseks. Seni olen veebis näinud erinevaid lahendusi. Nende hulgas nii Javascripti lahendusi, kus Javascript lisab dünaamiliselt numeratsiooni, kui ka näiteks PHP lahendusi, mille puhul genereeritakse sisule juurde numbrid juba serveris. Kõik lahendused on viinud soovitud tulemuseni. Kuna tegemist on siiski vormindamisega, siis peaks see olema kõik tehtud ja kontrollitud CSS’is.

HTML

Juriidiliste dokumentide ülesehitus on üldjuhul ühesugune: need koosnevad pealkirjadest ja lõikudest. Alljärgnev HTML kujutab just seda.

<h1>Eeskiri</h1>

<h2>Üldsätted</h2>
<p>Esimene lõik</p>
<p>Teine lõik</p>
<p>Kolmas lõik</p>

<h2>Kohustused</h2>
<p>Esimene lõik</p>
<p>Teine lõik</p>

Muidugi ei saa jätta märkimata, et osadel dokumentidel on kasutuses ka loendid. Loenditele soovitud numeratsiooni lisamist saab teha analoogselt.

CSS

CSS3 pakub selliseid atribuute nagu counter-increment ja counter-reset. Esimese abil saame deklareerida nn muutuja (ehk identifikaatori), mis hoiab meie jaoks meeles, mitu tulemust kasutatud selektor andis (selles näites on selektoriteks HTML element h2 ja p). Teise abil saame muutuja (identifikaatori) nullida. Seda on meil vaja, et peale igat h2 saaksime muutuja väärtuse nullida. Olemasolevat väärtust saame rakendada juba CSS2 spetsifikatsioonist tuntud atribuudi content abil. Kombineerides idenifikaatori ja pseudoelemendi before (CSS2), saame luua efekti, nagu me kasutaksime mitmeastmelist loendit.

Eelmises lõigus pole kõik kirjas, mida lahendus nõuab. Täpsem CSS’i osa on kirjeldatud alumises kastis.

H2 { counter-increment: headers; counter-reset: paragraphs }
H2:before { content: counter(headers) ". " }
P { counter-increment: paragraphs }
P:before { content: counter(headers) "." counter(paragraphs) ". " }

Vaata ka

Kokkuvõte

On soovitav hoida eraldi vormingut ja struktuuri. Kuna levinud seisukoha järgi kasutatakse HTML’i ainult struktuuri kirjeldamiseks ja sellele tähenduse (semantika) andmiseks, siis ei tohiks HTML sisaldada üleliigseid, sisuga mitte kokku sobivaid osi. Käesolev katsetus on neile, kes soovivad oma veebilehe struktuuri hoida puhtana ja vormingut stiililehes.

Lahendust olen testinud nii Firefox 3.5 kui ka IE8. Nimetatud veebilehitsejad on võtnud need CSS3 atribuudid kenasti omaks. Jääb vaid loota, et CSS2 ja CSS3 toetamine laieneb veelgi ja lähitulevikus pole vaja enam leiutada süsteemitähiste lisamiseks keerukaid lahendusi.