...
 
Commits (2)
......@@ -5,7 +5,7 @@
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>example for the page borders and background-origin feature</title>
<script src="../../../dist/paged.polyfill.js"></script>
<script src="../../dist/paged.polyfill.js"></script>
<style>
@page {
size: letter;
......@@ -31,6 +31,10 @@
page: partTwo;
}
.part-two {
page: partThree;
}
@page partOne {
border-top: 10px solid orange;
/* padding-top: 3em; */
......@@ -49,7 +53,15 @@
border-bottom: 5px solid green;
background: purple;
background-origin: content-box;
}
@page partThree {
border-top-style: dashed;
border-top-color: blue;
border-top-width: 15px;
border-color: coral;
border-width: 5px;
background-origin: content-box;
}
</style>
</head>
......@@ -67,6 +79,12 @@
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis quibusdam soluta magni nam, blanditiis maxime alias aliquam vero quod doloribus, asperiores placeat rem provident, molestiae in qui dolorum ullam necessitatibus?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis quibusdam soluta magni nam, blanditiis maxime alias aliquam vero quod doloribus, asperiores placeat rem provident, molestiae in qui dolorum ullam necessitatibus?</p>
</section>
<section class="part-three">
<h2>lol</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis quibusdam soluta magni nam, blanditiis maxime alias aliquam vero quod doloribus, asperiores placeat rem provident, molestiae in qui dolorum ullam necessitatibus?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis quibusdam soluta magni nam, blanditiis maxime alias aliquam vero quod doloribus, asperiores placeat rem provident, molestiae in qui dolorum ullam necessitatibus?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis quibusdam soluta magni nam, blanditiis maxime alias aliquam vero quod doloribus, asperiores placeat rem provident, molestiae in qui dolorum ullam necessitatibus?</p>
</section>
</body>
</html>
\ No newline at end of file
</html>
<!DOCTYPE html PUBLIC>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mixing Page Orientations</title>
<script src="../../../../dist/paged.polyfill.js"></script>
<style type="text/css">
@page {
size: A4 landscape;
margin: 20mm 20mm;
}
@page portrait {
size: A4 portrait;
margin: 20mm 20mm;
}
.portrait {
page: portrait;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
table th, td {
border: 1px solid #dbdbdb;
padding: .5em .75em;
vertical-align: top;
}
@media screen {
.pagedjs_page {
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
}
}
</style>
</head>
<body>
<section class="portrait">
<h1>Portrait</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper lobortis mauris, posuere ultricies ipsum porttitor sed. Etiam vestibulum dignissim risus, ac hendrerit mi
vehicula ac. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Aenean vehicula arcu non porttitor sollicitudin. Duis in fermentum diam, non aliquam
mauris. Etiam gravida lacus et nisl accumsan, quis condimentum nulla bibendum. Vestibulum eu convallis purus. Integer enim turpis, commodo et finibus quis, elementum nec
mauris. Etiam rhoncus massa sit amet felis congue, id pellentesque lacus placerat. Suspendisse cursus convallis tellus sed tempus. Ut tempus nec libero eget luctus. Donec
porttitor, turpis et posuere maximus, sapien metus pellentesque risus, ac molestie nulla dui in erat. Morbi condimentum ipsum vel nisl tincidunt, sit amet bibendum nisl
mattis.</p>
<p>Vestibulum semper, ex ut ullamcorper ultricies, nunc nisl ultrices mauris, et fringilla justo tortor id est. Praesent in dictum tortor, imperdiet porta mauris. Morbi dignissim
eros ut lobortis congue. In sit amet gravida augue, faucibus dignissim tellus. Vestibulum porttitor ullamcorper sem, ac volutpat velit porta quis. Duis non ultricies est.
Suspendisse hendrerit ullamcorper est.</p>
<p>Ut at arcu pulvinar, condimentum elit vitae, finibus orci. Integer turpis arcu, vulputate id mi in, posuere molestie lorem. Maecenas convallis orci vel dui vestibulum, id
vehicula elit tempor. Fusce dignissim imperdiet nulla id aliquam. Maecenas mollis dui a imperdiet laoreet. Nunc sodales laoreet dui eget gravida. Sed at erat pretium,
sollicitudin ex vitae, luctus ante. Vivamus a risus et lorem vulputate egestas at posuere urna.</p>
<p>Morbi rhoncus congue dolor quis bibendum. Vestibulum rutrum mi vitae lorem malesuada tincidunt. Maecenas eget nisi nulla. Pellentesque cursus consectetur sagittis. Sed
interdum dui eu ligula rhoncus, in feugiat justo rutrum. In dictum ipsum sodales vestibulum eleifend. Mauris sollicitudin pellentesque sollicitudin. Nulla facilisi. Suspendisse
leo nunc, luctus in placerat vitae, dictum id magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed sagittis laoreet libero, vitae
euismod diam pulvinar id. Fusce turpis nulla, bibendum sed mattis eu, malesuada quis massa. Suspendisse finibus felis ex, a faucibus velit tempor vel. Phasellus sodales augue
eu tempus ultricies.</p>
<p>Nunc porttitor sed lorem a dictum. Nunc vestibulum feugiat nunc, vitae suscipit orci rhoncus ac. Phasellus sit amet risus in odio congue pretium non id purus. Nam aliquet
consectetur urna a rhoncus. In pellentesque neque felis, a mattis tortor vehicula sit amet. Morbi mollis ipsum ac lectus rutrum consequat. Suspendisse tortor odio, finibus
mattis sem eget, vestibulum elementum sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec leo lorem, tempor quis diam
nec, vehicula eleifend ex.</p>
<p>Vestibulum pharetra euismod eros vel rhoncus. Ut at sodales ligula. Maecenas mattis congue ex. Quisque quis tellus non lorem facilisis vehicula et pharetra turpis. Nunc ac mi
scelerisque, facilisis nisi nec, accumsan arcu. Mauris dolor lacus, finibus tempor ornare sit amet, auctor eu turpis. Orci varius natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. Proin et auctor eros. Maecenas eu molestie neque. Ut viverra vel risus eu auctor. Nunc porttitor rutrum augue sit amet sodales. Aenean quis
tristique nunc, eu aliquam nulla. Mauris ultricies malesuada metus, eu malesuada massa. Aenean gravida ornare sem. Phasellus ut aliquet turpis, at interdum dui.</p>
</section>
<section class="landscape">
<h1>Landscape</h1>
<table class="table table-bordered table-hover table-condensed">
<thead><tr><th title="Field #1">id</th>
<th title="Field #2">first_name</th>
<th title="Field #3">last_name</th>
<th title="Field #4">email</th>
<th title="Field #5">ip_address</th>
<th title="Field #6">pet</th>
<th title="Field #7">city</th>
</tr></thead>
<tbody><tr>
<td align="right">1</td>
<td>Sapphire</td>
<td>Huncoot</td>
<td>shuncoot0@ed.gov</td>
<td>202.51.108.141</td>
<td>Gecko, bent-toed</td>
<td>Villa del Carmen</td>
</tr>
<tr>
<td align="right">2</td>
<td>Tabbatha</td>
<td>Iannazzi</td>
<td>tiannazzi1@comsenz.com</td>
<td>240.211.68.220</td>
<td>Eastern diamondback rattlesnake</td>
<td>Firmat</td>
</tr>
<tr>
<td align="right">3</td>
<td>Elvera</td>
<td>Casaro</td>
<td>ecasaro2@dailymotion.com</td>
<td>255.157.181.19</td>
<td>Seven-banded armadillo</td>
<td>Ropice</td>
</tr>
<tr>
<td align="right">4</td>
<td>Siffre</td>
<td>Pherps</td>
<td>spherps3@fema.gov</td>
<td>7.74.192.37</td>
<td>Long-necked turtle</td>
<td>Gwangtan</td>
</tr>
<tr>
<td align="right">5</td>
<td>Sadie</td>
<td>McQuode</td>
<td>smcquode4@lulu.com</td>
<td>164.65.78.49</td>
<td>Booby, masked</td>
<td>Gurung</td>
</tr>
<tr>
<td align="right">6</td>
<td>Wilona</td>
<td>Mendonca</td>
<td>wmendonca5@accuweather.com</td>
<td>75.47.40.125</td>
<td>Lemming, collared</td>
<td>Embi</td>
</tr>
<tr>
<td align="right">7</td>
<td>Dal</td>
<td>Libermore</td>
<td>dlibermore6@ed.gov</td>
<td>173.86.96.25</td>
<td>Scarlet macaw</td>
<td>Göteborg</td>
</tr>
<tr>
<td align="right">8</td>
<td>Ronalda</td>
<td>Sturm</td>
<td>rsturm7@cisco.com</td>
<td>109.248.136.92</td>
<td>Otter, canadian river</td>
<td>Lampa</td>
</tr>
<tr>
<td align="right">9</td>
<td>Billi</td>
<td>Radbond</td>
<td>bradbond8@mysql.com</td>
<td>185.28.47.114</td>
<td>Raccoon dog</td>
<td>San Jose</td>
</tr>
<tr>
<td align="right">10</td>
<td>Angeline</td>
<td>Dionis</td>
<td>adionis9@printfriendly.com</td>
<td>27.138.13.196</td>
<td>Southern ground hornbill</td>
<td>Ořechov</td>
</tr>
<tr>
<td align="right">11</td>
<td>Vivyanne</td>
<td>Iseton</td>
<td>visetona@yale.edu</td>
<td>247.4.162.222</td>
<td>Lappet-faced vulture</td>
<td>Västerås</td>
</tr>
<tr>
<td align="right">12</td>
<td>Maggy</td>
<td>Essam</td>
<td>messamb@zimbio.com</td>
<td>68.203.41.70</td>
<td>Mynah, common</td>
<td>Šabac</td>
</tr>
<tr>
<td align="right">13</td>
<td>Felecia</td>
<td>Mostin</td>
<td>fmostinc@icq.com</td>
<td>73.154.0.224</td>
<td>House crow</td>
<td>Gaoshi</td>
</tr>
<tr>
<td align="right">14</td>
<td>Tod</td>
<td>Capin</td>
<td>tcapind@yahoo.com</td>
<td>183.34.107.201</td>
<td>Pie, indian tree</td>
<td>Fosca</td>
</tr>
<tr>
<td align="right">15</td>
<td>Valma</td>
<td>Ebbitt</td>
<td>vebbitte@yellowpages.com</td>
<td>141.81.41.142</td>
<td>Pie, rufous tree</td>
<td>Lere</td>
</tr>
</tbody></table>
</section>
</body>
</html>
<!DOCTYPE html PUBLIC>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Landscape</title>
<style type="text/css">
@page {
size: A4 landscape;
margin: 10mm 10mm;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
table th, td {
border: 1px solid #dbdbdb;
padding: .5em .75em;
vertical-align: top;
}
</style>
</head>
<body>
<section class="landscape">
<h1>Landscape</h1>
<table class="table table-bordered table-hover table-condensed">
<thead><tr><th title="Field #1">id</th>
<th title="Field #2">first_name</th>
<th title="Field #3">last_name</th>
<th title="Field #4">email</th>
<th title="Field #5">ip_address</th>
<th title="Field #6">pet</th>
<th title="Field #7">city</th>
</tr></thead>
<tbody><tr>
<td align="right">1</td>
<td>Sapphire</td>
<td>Huncoot</td>
<td>shuncoot0@ed.gov</td>
<td>202.51.108.141</td>
<td>Gecko, bent-toed</td>
<td>Villa del Carmen</td>
</tr>
<tr>
<td align="right">2</td>
<td>Tabbatha</td>
<td>Iannazzi</td>
<td>tiannazzi1@comsenz.com</td>
<td>240.211.68.220</td>
<td>Eastern diamondback rattlesnake</td>
<td>Firmat</td>
</tr>
<tr>
<td align="right">3</td>
<td>Elvera</td>
<td>Casaro</td>
<td>ecasaro2@dailymotion.com</td>
<td>255.157.181.19</td>
<td>Seven-banded armadillo</td>
<td>Ropice</td>
</tr>
<tr>
<td align="right">4</td>
<td>Siffre</td>
<td>Pherps</td>
<td>spherps3@fema.gov</td>
<td>7.74.192.37</td>
<td>Long-necked turtle</td>
<td>Gwangtan</td>
</tr>
<tr>
<td align="right">5</td>
<td>Sadie</td>
<td>McQuode</td>
<td>smcquode4@lulu.com</td>
<td>164.65.78.49</td>
<td>Booby, masked</td>
<td>Gurung</td>
</tr>
<tr>
<td align="right">6</td>
<td>Wilona</td>
<td>Mendonca</td>
<td>wmendonca5@accuweather.com</td>
<td>75.47.40.125</td>
<td>Lemming, collared</td>
<td>Embi</td>
</tr>
<tr>
<td align="right">7</td>
<td>Dal</td>
<td>Libermore</td>
<td>dlibermore6@ed.gov</td>
<td>173.86.96.25</td>
<td>Scarlet macaw</td>
<td>Göteborg</td>
</tr>
<tr>
<td align="right">8</td>
<td>Ronalda</td>
<td>Sturm</td>
<td>rsturm7@cisco.com</td>
<td>109.248.136.92</td>
<td>Otter, canadian river</td>
<td>Lampa</td>
</tr>
<tr>
<td align="right">9</td>
<td>Billi</td>
<td>Radbond</td>
<td>bradbond8@mysql.com</td>
<td>185.28.47.114</td>
<td>Raccoon dog</td>
<td>San Jose</td>
</tr>
<tr>
<td align="right">10</td>
<td>Angeline</td>
<td>Dionis</td>
<td>adionis9@printfriendly.com</td>
<td>27.138.13.196</td>
<td>Southern ground hornbill</td>
<td>Ořechov</td>
</tr>
<tr>
<td align="right">11</td>
<td>Vivyanne</td>
<td>Iseton</td>
<td>visetona@yale.edu</td>
<td>247.4.162.222</td>
<td>Lappet-faced vulture</td>
<td>Västerås</td>
</tr>
<tr>
<td align="right">12</td>
<td>Maggy</td>
<td>Essam</td>
<td>messamb@zimbio.com</td>
<td>68.203.41.70</td>
<td>Mynah, common</td>
<td>Šabac</td>
</tr>
<tr>
<td align="right">13</td>
<td>Felecia</td>
<td>Mostin</td>
<td>fmostinc@icq.com</td>
<td>73.154.0.224</td>
<td>House crow</td>
<td>Gaoshi</td>
</tr>
<tr>
<td align="right">14</td>
<td>Tod</td>
<td>Capin</td>
<td>tcapind@yahoo.com</td>
<td>183.34.107.201</td>
<td>Pie, indian tree</td>
<td>Fosca</td>
</tr>
<tr>
<td align="right">15</td>
<td>Valma</td>
<td>Ebbitt</td>
<td>vebbitte@yellowpages.com</td>
<td>141.81.41.142</td>
<td>Pie, rufous tree</td>
<td>Lere</td>
</tr>
</tbody></table>
</section>
</body>
</html>
<!DOCTYPE html PUBLIC>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Portrait</title>
<style type="text/css">
@page {
size: A4 portrait;
margin: 20mm 20mm;
}
</style>
</head>
<body>
<section>
<h1>Portrait</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper lobortis mauris, posuere ultricies ipsum porttitor sed. Etiam vestibulum dignissim risus, ac hendrerit mi
vehicula ac. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Aenean vehicula arcu non porttitor sollicitudin. Duis in fermentum diam, non aliquam
mauris. Etiam gravida lacus et nisl accumsan, quis condimentum nulla bibendum. Vestibulum eu convallis purus. Integer enim turpis, commodo et finibus quis, elementum nec
mauris. Etiam rhoncus massa sit amet felis congue, id pellentesque lacus placerat. Suspendisse cursus convallis tellus sed tempus. Ut tempus nec libero eget luctus. Donec
porttitor, turpis et posuere maximus, sapien metus pellentesque risus, ac molestie nulla dui in erat. Morbi condimentum ipsum vel nisl tincidunt, sit amet bibendum nisl
mattis.</p>
<p>Vestibulum semper, ex ut ullamcorper ultricies, nunc nisl ultrices mauris, et fringilla justo tortor id est. Praesent in dictum tortor, imperdiet porta mauris. Morbi dignissim
eros ut lobortis congue. In sit amet gravida augue, faucibus dignissim tellus. Vestibulum porttitor ullamcorper sem, ac volutpat velit porta quis. Duis non ultricies est.
Suspendisse hendrerit ullamcorper est.</p>
<p>Ut at arcu pulvinar, condimentum elit vitae, finibus orci. Integer turpis arcu, vulputate id mi in, posuere molestie lorem. Maecenas convallis orci vel dui vestibulum, id
vehicula elit tempor. Fusce dignissim imperdiet nulla id aliquam. Maecenas mollis dui a imperdiet laoreet. Nunc sodales laoreet dui eget gravida. Sed at erat pretium,
sollicitudin ex vitae, luctus ante. Vivamus a risus et lorem vulputate egestas at posuere urna.</p>
<p>Morbi rhoncus congue dolor quis bibendum. Vestibulum rutrum mi vitae lorem malesuada tincidunt. Maecenas eget nisi nulla. Pellentesque cursus consectetur sagittis. Sed
interdum dui eu ligula rhoncus, in feugiat justo rutrum. In dictum ipsum sodales vestibulum eleifend. Mauris sollicitudin pellentesque sollicitudin. Nulla facilisi. Suspendisse
leo nunc, luctus in placerat vitae, dictum id magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed sagittis laoreet libero, vitae
euismod diam pulvinar id. Fusce turpis nulla, bibendum sed mattis eu, malesuada quis massa. Suspendisse finibus felis ex, a faucibus velit tempor vel. Phasellus sodales augue
eu tempus ultricies.</p>
<p>Nunc porttitor sed lorem a dictum. Nunc vestibulum feugiat nunc, vitae suscipit orci rhoncus ac. Phasellus sit amet risus in odio congue pretium non id purus. Nam aliquet
consectetur urna a rhoncus. In pellentesque neque felis, a mattis tortor vehicula sit amet. Morbi mollis ipsum ac lectus rutrum consequat. Suspendisse tortor odio, finibus
mattis sem eget, vestibulum elementum sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec leo lorem, tempor quis diam
nec, vehicula eleifend ex.</p>
<p>Vestibulum pharetra euismod eros vel rhoncus. Ut at sodales ligula. Maecenas mattis congue ex. Quisque quis tellus non lorem facilisis vehicula et pharetra turpis. Nunc ac mi
scelerisque, facilisis nisi nec, accumsan arcu. Mauris dolor lacus, finibus tempor ornare sit amet, auctor eu turpis. Orci varius natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. Proin et auctor eros. Maecenas eu molestie neque. Ut viverra vel risus eu auctor. Nunc porttitor rutrum augue sit amet sodales. Aenean quis
tristique nunc, eu aliquam nulla. Mauris ultricies malesuada metus, eu malesuada massa. Aenean gravida ornare sem. Phasellus ut aliquet turpis, at interdum dui.</p>
</section>
</body>
</html>
<!DOCTYPE html PUBLIC>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mixing Page Orientations</title>
<style type="text/css">
@page {
/* with this configuration, we'll have access to advanced features in the print panel */
/* for instance, we can decide to print a range of pages, update the margin, orientation... */
size: auto;
margin: 10mm 10mm;
}
section {
page-break-before: always;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
table th, td {
border: 1px solid #dbdbdb;
padding: .5em .75em;
vertical-align: top;
}
</style>
</head>
<body>
<section class="portrait">
<h1>Portrait</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper lobortis mauris, posuere ultricies ipsum porttitor sed. Etiam vestibulum dignissim risus, ac hendrerit mi
vehicula ac. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Aenean vehicula arcu non porttitor sollicitudin. Duis in fermentum diam, non aliquam
mauris. Etiam gravida lacus et nisl accumsan, quis condimentum nulla bibendum. Vestibulum eu convallis purus. Integer enim turpis, commodo et finibus quis, elementum nec
mauris. Etiam rhoncus massa sit amet felis congue, id pellentesque lacus placerat. Suspendisse cursus convallis tellus sed tempus. Ut tempus nec libero eget luctus. Donec
porttitor, turpis et posuere maximus, sapien metus pellentesque risus, ac molestie nulla dui in erat. Morbi condimentum ipsum vel nisl tincidunt, sit amet bibendum nisl
mattis.</p>
<p>Vestibulum semper, ex ut ullamcorper ultricies, nunc nisl ultrices mauris, et fringilla justo tortor id est. Praesent in dictum tortor, imperdiet porta mauris. Morbi dignissim
eros ut lobortis congue. In sit amet gravida augue, faucibus dignissim tellus. Vestibulum porttitor ullamcorper sem, ac volutpat velit porta quis. Duis non ultricies est.
Suspendisse hendrerit ullamcorper est.</p>
<p>Ut at arcu pulvinar, condimentum elit vitae, finibus orci. Integer turpis arcu, vulputate id mi in, posuere molestie lorem. Maecenas convallis orci vel dui vestibulum, id
vehicula elit tempor. Fusce dignissim imperdiet nulla id aliquam. Maecenas mollis dui a imperdiet laoreet. Nunc sodales laoreet dui eget gravida. Sed at erat pretium,
sollicitudin ex vitae, luctus ante. Vivamus a risus et lorem vulputate egestas at posuere urna.</p>
<p>Morbi rhoncus congue dolor quis bibendum. Vestibulum rutrum mi vitae lorem malesuada tincidunt. Maecenas eget nisi nulla. Pellentesque cursus consectetur sagittis. Sed
interdum dui eu ligula rhoncus, in feugiat justo rutrum. In dictum ipsum sodales vestibulum eleifend. Mauris sollicitudin pellentesque sollicitudin. Nulla facilisi. Suspendisse
leo nunc, luctus in placerat vitae, dictum id magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed sagittis laoreet libero, vitae
euismod diam pulvinar id. Fusce turpis nulla, bibendum sed mattis eu, malesuada quis massa. Suspendisse finibus felis ex, a faucibus velit tempor vel. Phasellus sodales augue
eu tempus ultricies.</p>
<p>Nunc porttitor sed lorem a dictum. Nunc vestibulum feugiat nunc, vitae suscipit orci rhoncus ac. Phasellus sit amet risus in odio congue pretium non id purus. Nam aliquet
consectetur urna a rhoncus. In pellentesque neque felis, a mattis tortor vehicula sit amet. Morbi mollis ipsum ac lectus rutrum consequat. Suspendisse tortor odio, finibus
mattis sem eget, vestibulum elementum sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec leo lorem, tempor quis diam
nec, vehicula eleifend ex.</p>
<p>Vestibulum pharetra euismod eros vel rhoncus. Ut at sodales ligula. Maecenas mattis congue ex. Quisque quis tellus non lorem facilisis vehicula et pharetra turpis. Nunc ac mi
scelerisque, facilisis nisi nec, accumsan arcu. Mauris dolor lacus, finibus tempor ornare sit amet, auctor eu turpis. Orci varius natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. Proin et auctor eros. Maecenas eu molestie neque. Ut viverra vel risus eu auctor. Nunc porttitor rutrum augue sit amet sodales. Aenean quis
tristique nunc, eu aliquam nulla. Mauris ultricies malesuada metus, eu malesuada massa. Aenean gravida ornare sem. Phasellus ut aliquet turpis, at interdum dui.</p>
</section>
<section class="landscape">
<h1>Landscape</h1>
<table class="table table-bordered table-hover table-condensed">
<thead><tr><th title="Field #1">id</th>
<th title="Field #2">first_name</th>
<th title="Field #3">last_name</th>
<th title="Field #4">email</th>
<th title="Field #5">ip_address</th>
<th title="Field #6">pet</th>
<th title="Field #7">city</th>
</tr></thead>
<tbody><tr>
<td align="right">1</td>
<td>Sapphire</td>
<td>Huncoot</td>
<td>shuncoot0@ed.gov</td>
<td>202.51.108.141</td>
<td>Gecko, bent-toed</td>
<td>Villa del Carmen</td>
</tr>
<tr>
<td align="right">2</td>
<td>Tabbatha</td>
<td>Iannazzi</td>
<td>tiannazzi1@comsenz.com</td>
<td>240.211.68.220</td>
<td>Eastern diamondback rattlesnake</td>
<td>Firmat</td>
</tr>
<tr>
<td align="right">3</td>
<td>Elvera</td>
<td>Casaro</td>
<td>ecasaro2@dailymotion.com</td>
<td>255.157.181.19</td>
<td>Seven-banded armadillo</td>
<td>Ropice</td>
</tr>
<tr>
<td align="right">4</td>
<td>Siffre</td>
<td>Pherps</td>
<td>spherps3@fema.gov</td>
<td>7.74.192.37</td>
<td>Long-necked turtle</td>
<td>Gwangtan</td>
</tr>
<tr>
<td align="right">5</td>
<td>Sadie</td>
<td>McQuode</td>
<td>smcquode4@lulu.com</td>
<td>164.65.78.49</td>
<td>Booby, masked</td>
<td>Gurung</td>
</tr>
<tr>
<td align="right">6</td>
<td>Wilona</td>
<td>Mendonca</td>
<td>wmendonca5@accuweather.com</td>
<td>75.47.40.125</td>
<td>Lemming, collared</td>
<td>Embi</td>
</tr>
<tr>
<td align="right">7</td>
<td>Dal</td>
<td>Libermore</td>
<td>dlibermore6@ed.gov</td>
<td>173.86.96.25</td>
<td>Scarlet macaw</td>
<td>Göteborg</td>
</tr>
<tr>
<td align="right">8</td>
<td>Ronalda</td>
<td>Sturm</td>
<td>rsturm7@cisco.com</td>
<td>109.248.136.92</td>
<td>Otter, canadian river</td>
<td>Lampa</td>
</tr>
<tr>
<td align="right">9</td>
<td>Billi</td>
<td>Radbond</td>
<td>bradbond8@mysql.com</td>
<td>185.28.47.114</td>
<td>Raccoon dog</td>
<td>San Jose</td>
</tr>
<tr>
<td align="right">10</td>
<td>Angeline</td>
<td>Dionis</td>
<td>adionis9@printfriendly.com</td>
<td>27.138.13.196</td>
<td>Southern ground hornbill</td>
<td>Ořechov</td>
</tr>
<tr>
<td align="right">11</td>
<td>Vivyanne</td>
<td>Iseton</td>
<td>visetona@yale.edu</td>
<td>247.4.162.222</td>
<td>Lappet-faced vulture</td>
<td>Västerås</td>
</tr>
<tr>
<td align="right">12</td>
<td>Maggy</td>
<td>Essam</td>
<td>messamb@zimbio.com</td>
<td>68.203.41.70</td>
<td>Mynah, common</td>
<td>Šabac</td>
</tr>
<tr>
<td align="right">13</td>
<td>Felecia</td>
<td>Mostin</td>
<td>fmostinc@icq.com</td>
<td>73.154.0.224</td>
<td>House crow</td>
<td>Gaoshi</td>
</tr>
<tr>
<td align="right">14</td>
<td>Tod</td>
<td>Capin</td>
<td>tcapind@yahoo.com</td>
<td>183.34.107.201</td>
<td>Pie, indian tree</td>
<td>Fosca</td>
</tr>
<tr>
<td align="right">15</td>
<td>Valma</td>
<td>Ebbitt</td>
<td>vebbitte@yellowpages.com</td>
<td>141.81.41.142</td>
<td>Pie, rufous tree</td>
<td>Lere</td>
</tr>
</tbody></table>
</section>
</body>
</html>
<!DOCTYPE html PUBLIC>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mixing Page Orientations</title>
<style type="text/css">
@page {
size: A4 landscape;
margin: 10mm 10mm;
}
@page portrait {
size: A4 portrait;
margin: 20mm 20mm;
}
.portrait {
page: portrait;
}
.landscape {
page: landscape;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
table th, td {
border: 1px solid #dbdbdb;
padding: .5em .75em;
vertical-align: top;
}
</style>
</head>
<body>
<section class="portrait">
<h1>Portrait</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper lobortis mauris, posuere ultricies ipsum porttitor sed. Etiam vestibulum dignissim risus, ac hendrerit mi
vehicula ac. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Aenean vehicula arcu non porttitor sollicitudin. Duis in fermentum diam, non aliquam
mauris. Etiam gravida lacus et nisl accumsan, quis condimentum nulla bibendum. Vestibulum eu convallis purus. Integer enim turpis, commodo et finibus quis, elementum nec
mauris. Etiam rhoncus massa sit amet felis congue, id pellentesque lacus placerat. Suspendisse cursus convallis tellus sed tempus. Ut tempus nec libero eget luctus. Donec
porttitor, turpis et posuere maximus, sapien metus pellentesque risus, ac molestie nulla dui in erat. Morbi condimentum ipsum vel nisl tincidunt, sit amet bibendum nisl
mattis.</p>
<p>Vestibulum semper, ex ut ullamcorper ultricies, nunc nisl ultrices mauris, et fringilla justo tortor id est. Praesent in dictum tortor, imperdiet porta mauris. Morbi dignissim
eros ut lobortis congue. In sit amet gravida augue, faucibus dignissim tellus. Vestibulum porttitor ullamcorper sem, ac volutpat velit porta quis. Duis non ultricies est.
Suspendisse hendrerit ullamcorper est.</p>
<p>Ut at arcu pulvinar, condimentum elit vitae, finibus orci. Integer turpis arcu, vulputate id mi in, posuere molestie lorem. Maecenas convallis orci vel dui vestibulum, id
vehicula elit tempor. Fusce dignissim imperdiet nulla id aliquam. Maecenas mollis dui a imperdiet laoreet. Nunc sodales laoreet dui eget gravida. Sed at erat pretium,
sollicitudin ex vitae, luctus ante. Vivamus a risus et lorem vulputate egestas at posuere urna.</p>
<p>Morbi rhoncus congue dolor quis bibendum. Vestibulum rutrum mi vitae lorem malesuada tincidunt. Maecenas eget nisi nulla. Pellentesque cursus consectetur sagittis. Sed
interdum dui eu ligula rhoncus, in feugiat justo rutrum. In dictum ipsum sodales vestibulum eleifend. Mauris sollicitudin pellentesque sollicitudin. Nulla facilisi. Suspendisse
leo nunc, luctus in placerat vitae, dictum id magna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed sagittis laoreet libero, vitae
euismod diam pulvinar id. Fusce turpis nulla, bibendum sed mattis eu, malesuada quis massa. Suspendisse finibus felis ex, a faucibus velit tempor vel. Phasellus sodales augue
eu tempus ultricies.</p>
<p>Nunc porttitor sed lorem a dictum. Nunc vestibulum feugiat nunc, vitae suscipit orci rhoncus ac. Phasellus sit amet risus in odio congue pretium non id purus. Nam aliquet
consectetur urna a rhoncus. In pellentesque neque felis, a mattis tortor vehicula sit amet. Morbi mollis ipsum ac lectus rutrum consequat. Suspendisse tortor odio, finibus
mattis sem eget, vestibulum elementum sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec leo lorem, tempor quis diam
nec, vehicula eleifend ex.</p>
<p>Vestibulum pharetra euismod eros vel rhoncus. Ut at sodales ligula. Maecenas mattis congue ex. Quisque quis tellus non lorem facilisis vehicula et pharetra turpis. Nunc ac mi
scelerisque, facilisis nisi nec, accumsan arcu. Mauris dolor lacus, finibus tempor ornare sit amet, auctor eu turpis. Orci varius natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. Proin et auctor eros. Maecenas eu molestie neque. Ut viverra vel risus eu auctor. Nunc porttitor rutrum augue sit amet sodales. Aenean quis
tristique nunc, eu aliquam nulla. Mauris ultricies malesuada metus, eu malesuada massa. Aenean gravida ornare sem. Phasellus ut aliquet turpis, at interdum dui.</p>
</section>
<section class="landscape">
<h1>Landscape</h1>
<table class="table table-bordered table-hover table-condensed">
<thead><tr><th title="Field #1">id</th>
<th title="Field #2">first_name</th>
<th title="Field #3">last_name</th>
<th title="Field #4">email</th>
<th title="Field #5">ip_address</th>
<th title="Field #6">pet</th>
<th title="Field #7">city</th>
</tr></thead>
<tbody><tr>
<td align="right">1</td>
<td>Sapphire</td>
<td>Huncoot</td>
<td>shuncoot0@ed.gov</td>
<td>202.51.108.141</td>
<td>Gecko, bent-toed</td>
<td>Villa del Carmen</td>
</tr>
<tr>
<td align="right">2</td>
<td>Tabbatha</td>
<td>Iannazzi</td>
<td>tiannazzi1@comsenz.com</td>
<td>240.211.68.220</td>
<td>Eastern diamondback rattlesnake</td>
<td>Firmat</td>
</tr>
<tr>
<td align="right">3</td>
<td>Elvera</td>
<td>Casaro</td>
<td>ecasaro2@dailymotion.com</td>
<td>255.157.181.19</td>
<td>Seven-banded armadillo</td>
<td>Ropice</td>
</tr>
<tr>
<td align="right">4</td>
<td>Siffre</td>
<td>Pherps</td>
<td>spherps3@fema.gov</td>
<td>7.74.192.37</td>
<td>Long-necked turtle</td>
<td>Gwangtan</td>
</tr>
<tr>
<td align="right">5</td>
<td>Sadie</td>
<td>McQuode</td>
<td>smcquode4@lulu.com</td>
<td>164.65.78.49</td>
<td>Booby, masked</td>
<td>Gurung</td>
</tr>
<tr>
<td align="right">6</td>
<td>Wilona</td>
<td>Mendonca</td>
<td>wmendonca5@accuweather.com</td>
<td>75.47.40.125</td>
<td>Lemming, collared</td>
<td>Embi</td>
</tr>
<tr>
<td align="right">7</td>
<td>Dal</td>
<td>Libermore</td>
<td>dlibermore6@ed.gov</td>
<td>173.86.96.25</td>
<td>Scarlet macaw</td>
<td>Göteborg</td>
</tr>
<tr>
<td align="right">8</td>
<td>Ronalda</td>
<td>Sturm</td>
<td>rsturm7@cisco.com</td>
<td>109.248.136.92</td>
<td>Otter, canadian river</td>
<td>Lampa</td>
</tr>
<tr>
<td align="right">9</td>
<td>Billi</td>
<td>Radbond</td>
<td>bradbond8@mysql.com</td>
<td>185.28.47.114</td>
<td>Raccoon dog</td>
<td>San Jose</td>
</tr>
<tr>
<td align="right">10</td>
<td>Angeline</td>
<td>Dionis</td>
<td>adionis9@printfriendly.com</td>
<td>27.138.13.196</td>
<td>Southern ground hornbill</td>
<td>Ořechov</td>
</tr>
<tr>
<td align="right">11</td>
<td>Vivyanne</td>
<td>Iseton</td>
<td>visetona@yale.edu</td>
<td>247.4.162.222</td>
<td>Lappet-faced vulture</td>
<td>Västerås</td>
</tr>
<tr>
<td align="right">12</td>
<td>Maggy</td>
<td>Essam</td>
<td>messamb@zimbio.com</td>
<td>68.203.41.70</td>
<td>Mynah, common</td>
<td>Šabac</td>
</tr>
<tr>
<td align="right">13</td>
<td>Felecia</td>
<td>Mostin</td>
<td>fmostinc@icq.com</td>
<td>73.154.0.224</td>
<td>House crow</td>
<td>Gaoshi</td>
</tr>
<tr>
<td align="right">14</td>
<td>Tod</td>
<td>Capin</td>
<td>tcapind@yahoo.com</td>
<td>183.34.107.201</td>
<td>Pie, indian tree</td>
<td>Fosca</td>
</tr>
<tr>
<td align="right">15</td>
<td>Valma</td>
<td>Ebbitt</td>
<td>vebbitte@yellowpages.com</td>
<td>141.81.41.142</td>
<td>Pie, rufous tree</td>
<td>Lere</td>
</tr>
</tbody></table>
</section>
</body>
</html>
......@@ -171,8 +171,9 @@ class AtPage extends Handler {
page.block = node.block;
}
// Remove the rule
list.remove(item);
// Do not remove the rule!
// Chrome now supports `page: landscape` property and named `@page landscape { size: landscape }`
//list.remove(item);
}
/* Handled in breaks */
......@@ -388,7 +389,9 @@ class AtPage extends Handler {
else if (prop === "size") {
parsed.size = this.getSize(declaration);
dList.remove(dItem);
// Do not remove the rule!
// Chrome now supports `page: landscape` property and named `@page landscape { size: landscape }`
//dList.remove(dItem);
} else if (prop === "bleed") {
parsed.bleed = [];
......@@ -1613,6 +1616,12 @@ class AtPage extends Handler {
page.name = named;
page.element.classList.add("pagedjs_named_page");
page.element.classList.add("pagedjs_" + named + "_page");
// HACK! assign the page name to the page element
page.element.style = "page: " + named + ";" +
// HACK! assign the width and height
"--pagedjs-width: var(--pagedjs-pagebox-width);--pagedjs-height: var(--pagedjs-pagebox-height);" +
"width: var(--pagedjs-width);height: var(--pagedjs-height);";
page.element.querySelector(".pagedjs_sheet").style = "width: var(--pagedjs-width);height: var(--pagedjs-height);";
if (!start.dataset.splitFrom) {
page.element.classList.add("pagedjs_" + named + "_first_page");
......