Css-print-framework NPM

Css Print Framework

Simply include the right stylesheet(s) in your html and load it only for a printer.

$ npm install css-print-framework

Basic Usage

Load css into <head> like this:

<!-- Load print.css for happy printing -->
<link rel="stylesheet" href="print.css">

<!-- Set page size here: A5, A4 or A3 -->
<!-- Set also "landscape" if you need -->
<style>@page { size: A5 }</style>

Set the class of <body> and also set "sheet" for each sheet.

<!-- Set "A5", "A4" or "A3" for class name -->
<!-- Set also "landscape" if you need -->
<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>

  <!-- The title will be on a new page -->
  <h1 class="break-before">My title</h1>

  <p class="break-after">I will break after this paragraph</p>
  <!-- Break here, the next paragraph will be on a new page -->
  <p>I am on a new page</p>

  <!-- Avoid break inside -->
  <div class="avoid-break-inside">
    <img src="image.png" />
    <p>I really don't want this part to be cut</p>
  </div>

</body>

All available page sizes is listed below:

A5, A5 landscape
A4, A4 landscape
A3, A3 landscape
letter, letter landscape
legal, legal landscape

Comparisons

type	expression	learning cost	editable	in-browser	multipage
HTML	Enough	already known	No	OK	~100 pages *
SVG	Enough	not so difficult	No	OK
PDF	Perfect	difficult	No	NG	no limit **
Excel	Not cool	sigh	Yes	NG	uncontrollable

css print pdf

@infinitebrahmanuniverse/nolb-css-p @everything-registry/sub-chunk-1420 @zalastax/nolb-css-p

1.0.0

3 years ago