Log in / Register

Forum › How do I...?

Use of @page-float-bottom

blairjanis
Using version 14. @page-float-bottom content is not showing up.

                @page-float-top {
                    content: "page-float-top";
                }


Any guidance on how to get this to work is appreciated.
blairjanis
Sorry for any confusion. I'm struggling with both @page-float-top and @page-float-bottom.
mikeday
For page headers/footers you can use the @top-center / @bottom-center page regions. Prince doesn't support generated content on the page float region, you can create page floats with the float property on a regular element.
henning
Do you have an example that shows how @page-float-top and @page-float-bottom can be used?
Thank you!
csant
The illustration in the docs is created with HTML and CSS.

The code:
<html>
<head>
<title>Foo</title>
<style>
@page {
    size: a4;
    border: 8px black solid;
    padding: 0cm;
    margin: 4cm;
    background-color: lightgrey;
    font-size: 22pt;
    font-family: sans-serif;
    @top-center {
        content: "@top-center";
        background-color: lemonchiffon;
    }
    @bottom-center {
        content: "@bottom-center";
        background-color: lemonchiffon;
    }
    @left-middle {
        content: "@left-middle";
        background-color: lightcoral;
    }
    @right-middle {
        content: "@right-middle";
        background-color: lightcoral;
    }
    @top-left {
        content: "@top-left";
        background-color: lightgreen;
    }
    @left-top {
        content: "@left-top";
        background-color: lightgreen;
    }
    @top-right-corner {
        content: "@top-right-corner";
        font-size: 15pt;
        background-color: cornflowerblue;
    }
    @leftnote {
        width: 10vw;
        background-color: pink;
    }
    @rightnote {
        width: 10vw;
        background-color: thistle;
    }
    @footnote {
        background-color: aliceblue;
    }
    @prince-overlay {
        background: repeating-linear-gradient(
            -45deg,
            rgba(255,255,255, 0.1),
            rgba(255,255,255, 0.1) 20px,
            rgba(255,0,0, 0.2) 20px,
            rgba(255,0,0, 0.2) 40px
        );
        color: rgba(255,0,0, 0.6);
        content: "@prince-overlay";
    }
    @page-float-top {
        background-color: lightblue;
    }
    @page-float-bottom {
        background-color: gainsboro;
    }
}
body {
    background-color: white;
    padding: 0.2cm;
    font-size: 48pt;
    text-align: center;
    font-family: sans-serif;
}
p {
    font-weight: bold;
}
#footnote {
    float: footnote;
    font-size: 22pt;
    font-weight: normal;
}
#leftnote {
    float: leftnote align-bottom;
    font-size: 22pt;
    transform: rotate(-90deg);
    margin-bottom: -6em;
    font-weight: normal;
}
#rightnote {
    float: rightnote;
    font-size: 22pt;
    transform: rotate(90deg);
    padding-left: 9vw;
    font-weight: normal;
}
#pagefloattop {
    float: top;
    font-weight: normal;
    font-size: 22pt;
    font-style: italic;
}
#pagefloatbottom {
    float: bottom;
    font-weight: normal;
    font-size: 22pt;
    font-style: italic;
}
*::footnote-call, *::footnote-marker {
    content: "";
}
</style>
</head>
<body>
<p>Page area<span id="footnote">@footnote</span><span id="leftnote">@leftnote</span><span id="rightnote">@rightnote</span></p>
<p id="pagefloattop">@page-float-top</p>
<p id="pagefloatbottom">@page-float-bottom</p>
</body>
</html>