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.

Repository files

PDF files

Converter Status PDF Preview
PDFreactor  OK
PrinceXML  OK
Antennahouse  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);
}