Modern browsers are supposed to support the CSS page-break properties to some degree. However I haven't been able to get any browser to print any differently when I use avoid
, widows
, or orphans
. Am I doing something wrong, or is the browser support just not as solid as advertised?
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css" media="screen">
h2 {
page-break-after: avoid;
}
p {
page-break-inside: avoid;
orphans: 2;
widows: 2;
}
</style>
<title>Page Break Test</title>
</head>
<body>
<h2>Header</h2>
<p>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>
<!--
Cut and past the above header and paragraph 20+ times
so it will span several pages when printed.
-->
</body>
</html>