Log in / Register

Forum › Bugs

different behaviour for named pages and height: 100vh

esef
I do not understand this behaviour of princexml

this version, with an unnamed page works, the complete page is filled with a green bg (nothing of the red from the page is seen)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>h-full</title>
    <style>
        @page {
            size: A4;
            margin: 0mm;
            background: red;
        }
    </style>
</head>

<body>
    <div style="height: 100vh; width: 100vw; background: lime">fills he whole page.</div>
</body>

</html>


but when I use this version with a named page, I have a red region at the right and bottom:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>h-full</title>
    <style>
        @page Title {
            size: A4;
            margin: 0mm;
            background: red;
        }
    </style>
</head>

<body>
    <div style="page: Title; height: 100vh; width: 100vw; background: lime">does not fill the whole page.</div>
</body>

</html>


tested with Prince 20241206 and 15.1
markbrown
Hi,

Prince resolves the vw/vh units against the size in the root @page (that is, the one without any selectors), or if not present then against the page size given on the command line, otherwise against the default page size. The same sizes are used throughout the document.

One solution might be put the size in a root @page rule. For example:
@page {
    size: A4;
    margin: 0mm;
}
@page Title {
    background: red;
}


You might also try using pvw/pvh units, which resolve against the page size as described above, but without considering margins.

Mark
esef
OK, so there is no way to fill the whole page when I have multiple pages with different margins?
For example if I set the default page's margin to 10mm and also have pages with 20mm using 100vh on those will lead to spill-ovder to the next page.

For the special case that I only have pages with two margins (and one being 0mm) this works, but its flaky.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>h-full</title>
    <style>
        @page { size: A4; margin: 20mm; }
        @page Title { size: A4; margin: 0mm; background: red; }
        @page Normal { size: A4; margin: 20mm; background: blue; }
    </style>
</head>
<body>
    <div style="page: Title; height: 100pvh; width: 100pvw; background: lime">
        using pvh on title which ignores margins to fill whole page even though default page has margins.
        (default page margins define calc of vh)
    </div>
    <div style="page: Normal; height: 100vh; width: 100vw; background: yellow">
        using vh as Normal page has same margins as default
    </div>
</body>
</html>


esef
Just noticed, that this does NOT work if margin set using a var.
Now prince seem to see the margin as 0 when calculating vh

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>h-full</title>
    <style>
        :root {
            --margin: 20mm;
        }
        @page { size: A4; margin: var(--margin); }
        @page Title { size: A4; margin: 0mm; background: red; }
        @page Normal { size: A4; margin: var(--margin); background: blue; }
    </style>
</head>
<body>
    <div style="page: Title; height: 100pvh; width: 100pvw; background: lime">
        using pvh on title which ignores margins to fill whole page even though default page has margins.
        (default page margins define calc of vh)
    </div>
    <div style="page: Normal; height: 100vh; width: 100vw; background: yellow">
        this spills to the next page if margin is set by a variable!
    </div>
    <div>
        test
    </div>
</body>
</html>
markbrown
> OK, so there is no way to fill the whole page when I have multiple pages with different margins?

Note that if you have non-zero page margins then "page" and "page area" don't mean the same thing (see https://www.princexml.com/doc/paged/#page-regions).

In your case 100pvw and 100pvh will always be the size of an A4 page.

To get something the size of the page area, assuming you're happy to repeat the margin values, you can mix units using calc. For example, "width: calc(100pvw - 40mm)". Alternatively, percentages on absolutely positioned elements will resolve against the body if there are no intervening elements with non-static position, so styling the div with "position: absolute; width: 100%; height: 100%;" should make it the same size as the page area.

Mark
markbrown
> Just noticed, that this does NOT work if margin set using a var.
> Now prince seem to see the margin as 0 when calculating vh

Thanks, we will look into this.