borders on @page breaks the rendering
When there is a border on the @page, it’s added to the outer box of the .page
element, which breaks the rendering.
(coming from https://github.com/pagedjs/pagedjs/issues/14)
First, i came up with this simple solution to recreate the borders mecanism for the page: create an empty an empty element with position:absolute
using the informations from the borders properties found in the @page
and offset it using top/right/bottom/left, like this:
.page-borders {
border: 4px solid red;
border-bottom: 8px dotted green;
position: absolute;
top: 4px;
right: 4px;
bottom: 8px;
left: 4px;
}
And then i checked the specs: the borders of the page should actually be set inside the margins: https://drafts.csswg.org/css-page-3/#page-model. You can look at this screenshot:
Therefore, the simplest thing to do is to reuse any border property in the @page
and set it on the .pagedjs_page_content
.
The borders will now be inside the margins. This means that box-shadow
, background-origin
, etc. should have the same behavior, as the stacking context will be the same, meaning that they should all be relative to the page content.
For me it shouldn’t be the case, and i’m strongly against this. But we need to follow the specs. Let’s make sure that, by doing so, we don’t make it impossible to have borders on the side.