print-friendly

Convert a markdown file to a print-ready, styled HTML file

0.4.1
latest
Source
npm

Version published: 2 months ago

Maintainers: 0

Created: last year

Source

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-friendly

import 'print-friendly';
import 'print-friendly/index.css'; // full-path

Usage

[!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;
  }
}

Keywords

FAQs

What is print-friendly?

Is print-friendly well maintained?

Package last updated on 29 Dec 2024

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.

Install