Skip to content

Instantly share code, notes, and snippets.

@BadCoder1337

BadCoder1337/index.html

Last active July 8, 2023 11:36
Show Gist options
  • Save BadCoder1337/b0e5b44070a46b92520652dbfc0c5a0f to your computer and use it in GitHub Desktop.
Save BadCoder1337/b0e5b44070a46b92520652dbfc0c5a0f to your computer and use it in GitHub Desktop.
Download ZIP
Print Issue
Raw
index.html
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="print.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="/favicon.ico">
</head>
<body>
<section class="A4 portrait">
<div class="wrapper">
<h1>A4-portrait</h1><img src="https://placehold.co/1600x1600" alt="placehold">
</div>
</section>
<section class="A4 landscape">
<div class="wrapper">
<h1>A4-landscape</h1><img src="https://placehold.co/1600x1600" alt="placehold">
</div>
</section>
<section class="A3 portrait">
<div class="wrapper">
<h1>A3-portrait</h1><img src="https://placehold.co/1600x1600" alt="placehold">
</div>
</section>
<section class="A3 landscape">
<div class="wrapper">
<h1>A3-landscape</h1><img src="https://placehold.co/1600x1600" alt="placehold">
</div>
</section>
<section class="A2 portrait">
<div class="wrapper">
<h1>A2-portrait</h1><img src="https://placehold.co/1600x1600" alt="placehold">
</div>
</section>
<section class="A2 landscape">
<div class="wrapper">
<h1>A2-landscape</h1><img src="https://placehold.co/1600x1600" alt="placehold">
</div>
</section>
</body>
</html>
Raw
print.css
* {
box-sizing: border-box;
padding: 0;
margin: 0;
outline: solid 1px red;
}
section {
overflow: hidden;
margin: 0;
break-after: always;
padding: 5mm 5mm 5mm 20mm;
break-inside: avoid;
}
.wrapper {
overflow: hidden;
height: calc(100%);
}
@page { margin: 0; }
@page a0portrait { size: 841mm 1189mm; }
@page a0landscape { size: 1189mm 841mm; }
@page a1portrait { size: 594mm 841mm; }
@page a1landscape { size: 841mm 594mm; }
@page a2portrait { size: 420mm 594mm; }
@page a2landscape { size: 594mm 420mm; }
@page a3portrait { size: 297mm 420mm; }
@page a3landscape { size: 420mm 297mm; }
@page a4portrait { size: 210mm 297mm; }
@page a4landscape { size: 297mm 210mm; }
@page a5portrait { size: 148mm 210mm; }
@page a5landscape { size: 210mm 148mm; }
/* -1mm to fix A0 portrait */
section.A0.portrait { page: a0portrait; width: 840mm; height: 1188mm; }
section.A0.landscape { page: a0landscape; width: 1189mm; height: 841mm; }
section.A1.portrait { page: a1portrait; width: 594mm; height: 841mm; }
section.A1.landscape { page: a1landscape; width: 841mm; height: 594mm; }
section.A2.portrait { page: a2portrait; width: 420mm; height: 594mm; }
section.A2.landscape { page: a2landscape; width: 594mm; height: 420mm; }
section.A3.portrait { page: a3portrait; width: 297mm; height: 420mm; }
section.A3.landscape { page: a3landscape; width: 420mm; height: 297mm; }
section.A4.portrait { page: a4portrait; width: 210mm; height: 297mm; }
section.A4.landscape { page: a4landscape; width: 297mm; height: 210mm; }
section.A5.portrait { page: a5portrait; width: 148mm; height: 210mm; }
section.A5.landscape { page: a5landscape; width: 210mm; height: 148mm; }
/** screen preview **/
@media screen {
body {
background: #e0e0e0;
}
section {
overflow: hidden;
background: white;
box-shadow: 0 0.5mm 2mm rgba(0, 0, 0, 0.3);
margin: 5mm auto;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment