DOCSEARCHbyAlgolia
Submit Docs

Paper CSS

repository·master·Indexed 25 days ago

https://github.com/cognitom/paper-css

A front-end printing solution that allows developers to design and preview printable documents directly in the browser using HTML and CSS. It supports various page sizes including A5, A4, A3, letter, and legal, eliminating the need for a back-end to generate print-ready layouts.

Tokens
791
Snippets
4
Records
4
Agent score
33%

What's inside paper-css

  1. Preview your document with live-server

    master

    To see changes in real-time as you edit your HTML/CSS, use live-server.

    1. Install live-server globally:
      $ npm install --global live-server
    2. Run the preview:
      $ live-server your-document.html

    This will open your document in the browser and automatically reload the page whenever changes are detected.

    $ npm install --global live-server
$ live-server your-document.html

  2. Basic Usage of Paper CSS

    master

    To use Paper CSS, follow these steps:

    1. Load the CSS: Include paper.css in your <head>.
    2. Define Page Size: Use the @page CSS rule to set the base size (e.g., A5, A4, or A3).
    3. Configure the Body: Apply a class to the <body> element corresponding to your desired page size (e.g., A4, A4 landscape, A3, etc.).
    4. Create Sheets: Wrap each page's content in a <section> element with the class sheet. You can optionally add padding classes like padding-10mm, padding-15mm, padding-20mm, or padding-25mm.

    Supported Page Sizes:

    • A5, A5 landscape
    • A4, A4 landscape
    • A3, A3 landscape
    • letter, letter landscape
    • legal, legal landscape
    <!-- Load paper.css for happy printing -->
<link rel="stylesheet" href="dist/paper.css">

<!-- Set page size here: A5, A4 or A3 -->
<style>@page { size: A5 }</style>

<!-- Set "A5", "A4" or "A3" for class name -->
<body class="A5">

  <!-- Each sheet element should have the class "sheet" -->
  <!-- "padding-**mm" is optional: you can set 10, 15, 20 or 25 -->
  <section class="sheet padding-10mm">

    <!-- Write HTML just like a web page -->
    <article>This is an A5 document.</article>

  </section>

</body>

  3. Generate a PDF from HTML using electron-pdf

    master

    Paper CSS recommends using electron-pdf for converting your HTML documents into PDF files (replacing the deprecated paper-css CLI tool).

    1. Install electron-pdf globally:
      $ npm install --global electron-pdf
    2. Generate the PDF:
      $ electron-pdf your-document.html your-document.pdf
    $ npm install --global electron-pdf
$ electron-pdf your-document.html your-document.pdf

  4. Install Paper CSS

    master

    You can install Paper CSS using one of the following methods:

    Via CDN (Recommended)

    Add the stylesheet link directly to your HTML <head>:

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/paper-css/0.3.0/paper.css">

    Via npm

    Install the package locally using npm:

    $ npm install paper-css

    Manual Download

    Download the paper.css file directly from the GitHub repository.