Lesson: lesson-chapter-numbering

This example outlines the structure of a HTML document with nested chapters. The counters of the section are being automatically generated using CSS counters.

PDF files

Converter PDF Preview
PDFreactor
OK
Download
PrinceXML
OK
Download
Antennahouse
OK
Download
Vivliostyle
OK
Download

Stylesheet

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
@import url("../styles/a5.css");

h1 {
    counter-increment: c1;
    counter-reset: c3;
    counter-reset: c2;
}

h2 {
    counter-increment: c2;
    counter-reset: c3;
}

h3 {
    counter-increment: c3;
}

h1:before,
h2:before,
h3:before {
    color: red;
    width: 2cm;
    display: inline-block;
    text-align: right;
    padding-right: 0.25cm;
}


h1:before {
    content: counter(c1);
}

h2:before {
    content: counter(c1) "." counter(c2);
}

h3:before {
    content: counter(c1) "." counter(c2) "." counter(c3);
}

HTML input

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="styles.css" />
    </head>
    <body>

        <h1>Chapter Level 1</h1>
            <h2>Chapter Level 2</h2>
            <h2>Chapter Level 2</h2>
                <h3>Chapter Level 3</h3>
                <h3>Chapter Level 3</h3>
                <h3>Chapter Level 3</h3>
            <h2>Chapter Level 2</h2>
        <h1>Chapter Level 1</h1>
            <h2>Chapter Level 2</h2>
            <h2>Chapter Level 2</h2>
                <h3>Chapter Level 3</h3>
            <h2>Chapter Level 2</h2>
        <h1>Chapter Level 1</h1>
            <h2>Chapter Level 2</h2>
            <h2>Chapter Level 2</h2>
                <h3>Chapter Level 3</h3>
            <h2>Chapter Level 2</h2>

    </body>
</html>