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
Vivliostyle  OK
BFO  OK
OK OK with issues Error Unsupported

HTML input

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="styles.css" />
        <link rel="stylesheet" type="text/css" href="../styles/a4.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: c2 c3;
}

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