CSS-based PDF: Make borders go all the way across page

Post here questions and problems related to editing and publishing DITA content.
mdslup
Posts: 167
Joined: Tue Mar 06, 2018 1:34 am

CSS-based PDF: Make borders go all the way across page

Post by mdslup »

Here is what my @page looks like:

@page {
size: us-letter landscape;
column-count: 2;
column-gap: 0.5in;
margin-left: 0.1in;
margin-right: 0.1in;
margin-top: 0.1in;
margin-bottom: 0.5in;

}

I'd like to have a border go all the way across the bottom of the page and override the margins. When I add something like this to my @page:

border-left: 0.5in solid yellow

that border is still constrained by the left and right margins. Is there a way to make it extend all the way, regardless of the margins?
Costin
Posts: 837
Joined: Mon Dec 05, 2011 6:04 pm

Re: CSS-based PDF: Make borders go all the way across page

Post by Costin »

Hi,

You should just add an additional "@bottom-left-corner" page-margin-box selector inside your "@page" rule.
For the "@bottom-left-corner" you should set the same margin and border on its left side.
More specific:

Code: Select all

@page {
size: us-letter landscape;
column-count: 2;
column-gap: 0.5in;
margin-left: 0.1in;
margin-right: 0.1in;
margin-top: 0.1in;
margin-bottom: 0.5in;

border-left: 0.5in solid yellow;

@bottom-left-corner{
content:"";
margin-left: 0.1in;
border-left: 0.5in solid yellow;
}
}
In the same way as you did for the content pages ("@page" selector), you could also add it to your cover page:

Code: Select all

@page front-page {
@bottom-left-corner{
content:"";
margin-left: 0.1in;
border-left: 0.5in solid yellow;
}
}
Regards,
Costin
Costin Sandoi
oXygen XML Editor and Author Support
Post Reply