Can I use a line break in Paged.js margin box?

85 Views Asked by At

I am generating a document using Paged.js. As per company policy, the document must have a footer on each page as follows:

QFxxx
'
VERIFY REVISION BEFORE USE
Page x / x
MM/dd/yyyy
'

I am having difficulty putting the "verify revision..." and page numbers in the same margin box. My first attempt at this was to use running-elements, since the "verify..." needs to bold and italic:

<style>
    @page {
        @bottom-center {
            content: element(footRunning);
        }
    }

    .foot-center {
        position: running(footRunning);
        font-style: italic;
        font-weight: bold;
    }
</style>

<!-- ... -->

<span class="foot-center">VERIFY REVISION BEFORE USE</span>

This works insofar as positioning and styling is concerned, but I cannot figure out how to add the page numbers. I wanted to see if using content alone could at least achieve the line break (inspiration):

@bottom-center {
    content: "VERIFY REVISION BEFORE USE\APage " counter(page) " of " counter(pages);   
}

Instead of line-breaking, however, this only replaced \A with a space.

Is there a way for me add line-breaks in the content property OR to list the page numbers in a running-element?

1

There are 1 best solutions below

0
On

So for anyone out there with the same issue, I found that it worked well to use a container and adding a child with the after pseudo element for the generated content (e.i. page numbers):

<style>
    @page {
        margin-bottom: 1in;

        @bottom-center {
            content: element(footRunning);
        }
    }

    .footnote {
        position: running(footRunning);
    }

    .footnote>*:first-child {
        font-style: italic;
        font-weight: bold;
    }

    .footnote>*:last-child::after {
        content: "Page " counter(page) " of " counter(pages);
    }
</style>

<!-- ... -->

<div class="footnote">
    <span>VERIFY REVISION BEFORE USE</span>
    <br>
    <span></span>
</div>

Make sure to test your margins or the page numbers will go off the bottom of the page.