print-friendly
v0.3.2
Published
Convert a markdown file to a print-ready, styled HTML file
Downloads
46
Maintainers
hyunbinseoReadme
print-friendly
Responsive CSS for screen and paper. Optimized for printing and PDF conversion.
Using the Stylesheet
The CSS file is hosted on CDNs such as jsDelivr.
[!IMPORTANT] Inform users to set the (Paper size) and (Margins: Default) in the print dialog.
[!NOTE] This package follows the semantic versioning. To avoid unwanted breaking changes, set the major version in the jsDelivr URL.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/index.css" />
<style>
/* Set the page size for print and screen. */
/* Example uses A4 portrait. 21cm x 29.7cm */
/* Microsoft Word's Narrow margin is 0.5in */
@page {
size: A4 portrait;
margin: 0.5in;
}
@media screen {
:root {
--page-width: 21cm;
--page-height: 29.7cm;
--page-padding: 0.25in;
--page-gap-y: 0.5in;
}
}
@media screen and (min-width: 21cm) {
:root {
--page-min-height: var(--page-height);
--page-padding: 0.5in;
--page-gap-y: 0.75in;
}
}
</style>
</head><body>
<div>
<!-- Elements without the .page class are hidden from print. -->
<header>
<!-- e.g. Guide users to print the page. -->
</header>
<!-- Multiple .page elements can be added. -->
<div class="page"></div>
<!-- Page gap is shown between the .page elements. -->
<div class="page">
<!-- Always printed starting on a new page. -->
</div>
</div>
</body>Additional Styling
Remove left margin on lists.
ol,
ul {
/* Browser default is 40px. */
padding-inline-start: 16px;
}Add image watermark to pages.
Printed even when the Background graphics is unchecked.
/* To show the watermark on the screen, remove the @media print at-rule. */
@media print {
.page {
position: relative;
}
.page::after {
position: absolute;
top: 50%;
left: 50%;
/* Use the scale() function to set the size. */
transform: translate(-50%, -50%) scale(0.5);
content: url('/path-to-image');
opacity: 0.1;
}
}Reduce base font-size in print.
@media print {
.page {
/* Browser default is 16px. */
font-size: 12px;
}
}