0.4.1 • Published 7 months ago
print-friendly v0.4.1
print-friendly
Responsive CSS for screen and paper. Optimized for printing and PDF conversion. Demo
Installation
CDN
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/print-friendly@0.4/index.css" />
</head>Node.js
npm i print-friendlyimport 'print-friendly';
import 'print-friendly/index.css'; // full-pathUsage
!IMPORTANT Inform users to set the (Paper size) and (Margins: Default) in the print dialog.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<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 {
.page-container {
--background-color: lightgray;
--page-color: white;
--page-width: 21cm;
--page-height: 29.7cm;
--page-padding: 0.25in;
--page-gap-y: 0.5in;
}
}
@media screen and (min-width: 21cm) {
.page-container {
--page-min-height: var(--page-height);
--page-padding: 0.5in;
--page-gap-y: 0.75in;
}
}
.page > *:first-child {
margin-top: 0;
}
</style>
</head>
<body>
<div class="page-container">
<!-- 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;
}
}