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.

Further reading:

Repository files

PDF files

Converter Status PDF Preview
PDFreactor  OK
PrinceXML  OK
Antennahouse  OK
Weasyprint  OK
PagedJS  OK
Typeset.sh  OK

HTML input

<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>

Stylesheet

@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);
}