arthurattwell/README.md

## README.md

      
    Raw
  

              README.md
            
          
    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.

  
## inside-border.css
/* 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
}

## page-1.html
<!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>

## page-2.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>

## page-3.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>

## run-prince.bat
:: 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
	/* 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>
	:: 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