Page areas

This example renders the page regions as defined in the CSS Paged Media specs.

Further reading:

Repository files

PDF files

Converter Status PDF Preview
PDFreactor  OK
PrinceXML  OK
Antennahouse  OK
Weasyprint  OK
page areas are fully support. However the top-center and bottom-center rendering looks a bit weird
PagedJS  OK
Typeset.sh  OK
Vivliostyle  OK
Weird: grey color for @top-center and @bottom-center
BFO  OK
OK OK with issues Error Unsupported

HTML input

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="styles.css" />
    </head>
    <body>

        <p id="c-1">
        Pulvinar non pellentesque pellentesque nisi nascetur elementum platea
turpis, eu, pulvinar et, a mauris, etiam vel, facilisis mus, egestas in dapibus
sagittis ac mattis. Phasellus massa cum, habitasse augue sagittis, turpis
penatibus auctor sagittis aenean in! Aenean porta tincidunt ultricies est
lorem, facilisis dignissim tempor auctor ut sociis pulvinar eros egestas eros
placerat habitasse, mid sed mattis velit platea aliquam, purus lorem, lacus et
integer, natoque augue a, facilisis augue, mattis cras! A pid mattis lorem urna
rhoncus. Elementum tincidunt, mus elementum turpis quis ridiculus eu odio
egestas, elit auctor turpis mus platea sed, rhoncus tempor, augue dictumst
phasellus tortor, ac. Massa sagittis sociis integer mid magna a turpis
pellentesque, placerat lundium! Lacus, enim mus odio placerat? Nec cursus
augue.
        </p>

    </body>
</html>

Stylesheet

@import url("../styles/a4.css");

@page {
    border: 1px solid blue;
    color: black;
    font-size: 8pt;

    @top-left-corner {
        content: "@top-left-corner";
        border: 1px solid red;
        color: black;
    }
    @top-left {
        content: "@top-left";
        border: 1px solid red;
        color: black;
    }
    @top-center {
        content: "@top-center";
        border: 1px solid red;
        color: black;
    }
    @top-right {
        content: "@top-right";
        border: 1px solid red;
        color: black;
    }
    @top-right-corner {
        content: "@top-rightcorner";
        border: 1px solid red;
        color: black;
    }

    @bottom-left-corner {
        content: "@bottom-left-corner";
        border: 1px solid red;
        color: black;
    }
    @bottom-left {
        content: "@bottom-left";
        border: 1px solid red;
        color: black;
    }
    @bottom-center {
        content: "@bottom-center";
        border: 1px solid red;
        color: black;
    }
    @bottom-right {
        content: "@bottom-right";
        border: 1px solid red;
        color: black;
    }
    @bottom-right-corner {
        content: "@bottom-rightcorner";
        border: 1px solid red;
        color: black;
    }

    @left-top {
        content: "@left-top";
        border: 1px solid red;
        color: black;
    }
    @left-middle {
        content: "@left-middle";
        border: 1px solid red;
        color: black;
    }
    @left-bottom {
        content: "@left-bottom";
        border: 1px solid red;
        color: black;
    }

    @right-top {
        content: "@right-top";
        border: 1px solid red;
        color: black;
    }
    @right-middle {
        content: "@right-middle";
        border: 1px solid red;
        color: black;
    }
    @right-bottom {
        content: "@right-bottom";
        border: 1px solid red;
        color: black;
    }


    /* PDFreactor (from brochure/styles.css) */
    -ro-media-size: A4;
    -ro-bleed-width: 3mm;
    -ro-crop-size: trim;
    
    /* Printer Marks */
    -ro-marks: bleed trim registration;
    
    -ro-colorbar-left-top: gradient-tint;
    -ro-colorbar-right-top: progressive-color;
    
    -ro-colorbar-left-bottom: cmyk(100%, 0%, 0%, 0%) cmyk(75%, 0%, 0%, 0%) cmyk(50%, 0%, 0%, 0%) cmyk(25%, 0%, 0%, 0%)
                              cmyk(0%, 100%, 0%, 0%) cmyk(0%, 75%, 0%, 0%) cmyk(0%, 50%, 0%, 0%) cmyk(0%, 25%, 0%, 0%);
                              
    -ro-colorbar-right-bottom: cmyk(0%, 0%, 25%, 0%) cmyk(0%, 0%, 50%, 0%) cmyk(0%, 0%, 75%, 0%) cmyk(0%, 0%, 100%, 0%)
                               cmyk(0%, 0%, 0%, 25%) cmyk(0%, 0%, 0%, 50%) cmyk(0%, 0%, 0%, 75%) cmyk(0%, 0%, 0%, 100%);


    /* PrinceXML */
    prince-bleed: 10mm;
    marks: crop cross;

    /* WeasyPrint */
    bleed: 10mm;

}