Skip to content

Instantly share code, notes, and snippets.

@cednore
Created April 22, 2022 20:16
Show Gist options
  • Save cednore/b72714c2eecf6dc264bb4396c5089eb0 to your computer and use it in GitHub Desktop.
Save cednore/b72714c2eecf6dc264bb4396c5089eb0 to your computer and use it in GitHub Desktop.
Example HTML file for printing both portrait and landscape pages in a single document
<!DOCTYPE html>
<html>
<head>
<style>
.printable-letter.printable-portrait {
page: letter-portrait;
}
.printable-letter.printable-landscape {
page: letter-landscape;
}
@page letter-portrait {
size: letter portrait;
max-height: 100%;
max-width: 100%
}
@page letter-landscape {
size: letter landscape;
max-height: 100%;
max-width: 100%
}
</style>
</head>
<body>
<div class="printable-portrait printable-letter">
1 Portrait section
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Commodo elit at imperdiet dui accumsan. Dignissim convallis aenean et tortor at. Leo integer malesuada nunc vel risus commodo viverra. Sed vulputate mi sit amet mauris commodo quis. Turpis in eu mi bibendum. Elit duis tristique sollicitudin nibh sit. Suspendisse interdum consectetur libero id. Nunc scelerisque viverra mauris in aliquam sem fringilla. Quam elementum pulvinar etiam non quam lacus suspendisse faucibus. Ullamcorper morbi tincidunt ornare massa eget egestas purus viverra accumsan. Rhoncus urna neque viverra justo nec ultrices dui. In eu mi bibendum neque egestas congue quisque egestas diam. Fermentum odio eu feugiat pretium nibh. Lectus vestibulum mattis ullamcorper velit sed. Consequat semper viverra nam libero justo laoreet. Dignissim suspendisse in est ante in nibh
</div>
<div class="printable-landscape printable-letter">
2 Landscape section
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Commodo elit at imperdiet dui accumsan. Dignissim convallis aenean et tortor at. Leo integer malesuada nunc vel risus commodo viverra. Sed vulputate mi sit amet mauris commodo quis. Turpis in eu mi bibendum. Elit duis tristique sollicitudin nibh sit. Suspendisse interdum consectetur libero id. Nunc scelerisque viverra mauris in aliquam sem fringilla. Quam elementum pulvinar etiam non quam lacus suspendisse faucibus. Ullamcorper morbi tincidunt ornare massa eget egestas purus viverra accumsan. Rhoncus urna neque viverra justo nec ultrices dui. In eu mi bibendum neque egestas congue quisque egestas diam. Fermentum odio eu feugiat pretium nibh. Lectus vestibulum mattis ullamcorper velit sed. Consequat semper viverra nam libero justo laoreet. Dignissim suspendisse in est ante in nibh.
Vivamus at augue eget arcu dictum. A condimentum vitae sapien pellentesque habitant morbi tristique senectus. Fermentum et sollicitudin ac orci phasellus egestas tellus. Sapien eget mi proin sed libero. Aliquam sem et tortor consequat id porta nibh venenatis. Arcu bibendum at varius vel. Purus faucibus ornare suspendisse sed nisi lacus sed viverra tellus. Habitant morbi tristique senectus et netus et malesuada. Elit sed vulputate mi sit amet. Amet facilisis magna etiam tempor orci eu lobortis elementum. Purus faucibus ornare suspendisse sed nisi lacus. Cras adipiscing enim eu turpis egestas pretium aenean.
Et pharetra pharetra massa massa ultricies mi quis hendrerit dolor. In nibh mauris cursus mattis. Rutrum tellus pellentesque eu tincidunt tortor aliquam nulla. Molestie at elementum eu facilisis. Quis lectus nulla at volutpat diam ut venenatis tellus in. Aliquet porttitor lacus luctus accumsan. Sit amet massa vitae tortor condimentum lacinia quis. Accumsan lacus vel facilisis volutpat est velit egestas dui. Sit amet consectetur adipiscing elit duis tristique sollicitudin. Feugiat pretium nibh ipsum consequat nisl. Tristique risus nec feugiat in fermentum posuere urna nec. Morbi blandit cursus risus at ultrices. Ornare arcu dui vivamus arcu felis bibendum. Nunc scelerisque viverra mauris in aliquam. Id diam maecenas ultricies mi eget. Tempus urna et pharetra pharetra massa massa ultricies. Habitasse platea dictumst quisque sagittis. Risus nullam eget felis eget nunc lobortis mattis aliquam.
Arcu odio ut sem nulla. Ligula ullamcorper malesuada proin libero nunc consequat interdum. Quam adipiscing vitae proin sagittis nisl rhoncus mattis. Montes nascetur ridiculus mus mauris. Ullamcorper sit amet risus nullam eget felis eget nunc lobortis. Massa ultricies mi quis hendrerit dolor magna eget est lorem. Elementum tempus egestas sed sed risus pretium quam vulputate dignissim. Id diam maecenas ultricies mi eget mauris pharetra. Congue nisi vitae suscipit tellus mauris a. Hac habitasse platea dictumst quisque sagittis purus sit amet. Euismod in pellentesque massa placerat duis ultricies lacus sed turpis. Posuere ac ut consequat semper viverra nam libero. Consequat id porta nibh venenatis cras sed felis eget. Amet nisl suscipit adipiscing bibendum est ultricies integer quis.
Blandit volutpat maecenas volutpat blandit aliquam. Magna sit amet purus gravida. Lacus vestibulum sed arcu non odio. Viverra tellus in hac habitasse. Diam vulputate ut pharetra sit amet aliquam id diam maecenas. Commodo odio aenean sed adipiscing. Cras adipiscing enim eu turpis egestas pretium aenean pharetra magna. Malesuada proin libero nunc consequat interdum varius sit. Sapien nec sagittis aliquam malesuada bibendum. Nec sagittis aliquam malesuada bibendum arcu. Congue mauris rhoncus aenean vel. Sagittis purus sit amet volutpat consequat mauris nunc congue nisi. Adipiscing elit duis tristique sollicitudin nibh sit amet.
Nibh tellus molestie nunc non blandit massa enim nec dui. Amet tellus cras adipiscing enim eu turpis egestas pretium. Nec ultrices dui sapien eget mi proin sed libero enim. Dolor sit amet consectetur adipiscing elit pellentesque. Ut porttitor leo a diam. Odio tempor orci dapibus ultrices in. Risus ultricies tristique nulla aliquet enim tortor at auctor. Ipsum dolor sit amet consectetur adipiscing elit duis. Sit amet purus gravida quis blandit turpis cursus in. Cras ornare arcu dui vivamus arcu. Aliquet enim tortor at auctor urna nunc id. Vestibulum lectus mauris ultrices eros in cursus turpis massa tincidunt. Est sit amet facilisis magna etiam tempor orci. Tempus quam pellentesque nec nam. Nulla malesuada pellentesque elit eget gravida cum sociis natoque penatibus. Pretium nibh ipsum consequat nisl vel pretium lectus. Quisque egestas diam in arcu cursus euismod quis viverra. Netus et malesuada fames ac. Integer vitae justo eget magna.
Vitae justo eget magna fermentum iaculis eu non. Orci ac auctor augue mauris augue neque gravida in fermentum. Suspendisse faucibus interdum posuere lorem ipsum dolor sit amet. Pharetra magna ac placerat vestibulum lectus mauris ultrices eros. Interdum consectetur libero id faucibus nisl tincidunt eget nullam. Habitant morbi tristique senectus et netus et malesuada fames. Porta non pulvinar neque laoreet suspendisse interdum consectetur libero. Ac auctor augue mauris augue neque gravida in fermentum. Neque aliquam vestibulum morbi blandit cursus risus at. Sit amet mattis vulputate enim nulla. Lorem ipsum dolor sit amet consectetur adipiscing elit ut aliquam. In metus vulputate eu scelerisque. Pulvinar sapien et ligula ullamcorper malesuada. Nulla aliquet porttitor lacus luctus accumsan tortor posuere ac. Elit scelerisque mauris pellentesque pulvinar.
At in tellus integer feugiat scelerisque varius morbi enim. Eget nunc lobortis mattis aliquam faucibus purus. Tristique et egestas quis ipsum suspendisse ultrices. Dictumst vestibulum rhoncus est pellentesque elit. Et leo duis ut diam quam nulla porttitor massa id. Tellus pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum. Posuere morbi leo urna molestie at elementum. Vitae purus faucibus ornare suspendisse. Amet mauris commodo quis imperdiet massa tincidunt nunc pulvinar sapien. Nisi quis eleifend quam adipiscing vitae. Semper eget duis at tellus at urna condimentum. Sagittis aliquam malesuada bibendum arcu vitae. Enim nulla aliquet porttitor lacus luctus accumsan tortor posuere ac. Habitasse platea dictumst vestibulum rhoncus est pellentesque. Senectus et netus et malesuada fames ac turpis.
</div>
<div class="printable-portrait printable-letter">
3 Another portrait section
At in tellus integer feugiat scelerisque varius morbi enim. Eget nunc lobortis mattis aliquam faucibus purus. Tristique et egestas quis ipsum suspendisse ultrices. Dictumst vestibulum rhoncus est pellentesque elit. Et leo duis ut diam quam nulla porttitor massa id. Tellus pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum. Posuere morbi leo urna molestie at elementum. Vitae purus faucibus ornare suspendisse. Amet mauris commodo quis imperdiet massa tincidunt nunc pulvinar sapien. Nisi quis eleifend quam adipiscing vitae. Semper eget duis at tellus at urna condimentum. Sagittis aliquam malesuada bibendum arcu vitae. Enim nulla aliquet porttitor lacus luctus accumsan tortor posuere ac. Habitasse platea dictumst vestibulum rhoncus est pellentesque. Senectus et netus et malesuada fames ac turpis.
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment