Skip to content

Instantly share code, notes, and snippets.

@arthurattwell arthurattwell/README.md
Last active Dec 20, 2016

Embed
What would you like to do?
PrinceXML workaround for 'border-inside' (or 'border-outside')

PrinceXML workaround for 'border-inside' (or 'border-outside')

Currently, Prince does not give us 'border-inside', only margin-inside (e.g. see http://www.princexml.com/forum/topic/717/padding-inside-padding-outside). But sometimes we really want a border-inside or border-outside, for example when we have sidenotes in an outer sidebar.

Hence this workaround! We position this element relative and give it a background color, then we put a pseudo element with a solid background colour exactly behind it (position: absolute) adjusting top and bottom for padding if necessary.

We need to put some invisible content in there to make it appear.

Finally, we shift it inside slightly exposing its edge as a 'border', and hide the rest behind its parent with a negative z-index.

/* Prince does not give us 'border-inside', only margin-inside.
* (http://www.princexml.com/forum/topic/717/padding-inside-padding-outside)
* But sometimes we really want a border-inside or border-outside,
* for example when we have sidenotes in an outer sidebar.
* Hence this workaround! We position this element relative
* and give it a background color, then we put a pseudo element
* with a solid background colour exactly behind it (position: absolute)
* adjusting top and bottom for padding if necessary.
* We need to put some invisible content in there to make it appear.
* Finally, we shift it inside slightly exposing its edge as a 'border',
* and hide the rest behind its parent with a negative z-index.
*/
.element {
position: relative;
background: white
}
.element:before {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: block;
background: blue;
content: "\2009";
margin-inside: -2pt;
z-index: -1
}
<!doctype html>
<html lang="en">
<head>
<title></title>
<link rel="stylesheet" href="border-inside.css">
</head>
<body>
<h1>Page 1</h1>
<p class="element">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<title></title>
<link rel="stylesheet" href="border-inside.css">
</head>
<body>
<h1>Page 2</h1>
<p class="element">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<title></title>
<link rel="stylesheet" href="border-inside.css">
</head>
<body>
<h1>Page 3</h1>
<p class="element">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>
:: On Windows, double-click this file to convert these files to PDF with Prince.
:: On other OSes, just use the command below in a terminal.
prince -v page-1.html page-2.html page-3.html -o border-inside.pdf
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.