print-friendly
Advanced tools
Responsive CSS for screen and paper. Optimized for printing and PDF conversion.
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/print-friendly@0.3/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>
ol,
ul {
/* Browser default is 40px. */
padding-inline-start: 16px;
}
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;
}
}
@media print {
.page {
/* Browser default is 16px. */
font-size: 12px;
}
}
FAQs
Convert a markdown file to a print-ready, styled HTML file
We found that print-friendly demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.