Paper CSS for happy printing


> Front-end printing solution - previewable and live-reloadable!

Recently, we say "front-end" every day. Then why don't we make the printing documents in front-end? We believe we can make it perfectly without back-end. Paper CSS is just a small snippet of CSS, but it helps us create them in browser easily.

Table of Contents

- Installation
- Basic Usage
- Live Preview
- PDF Generation
- Why Paper CSS?
- Previewable
- Live-reloading
- Comparisons
- License

Installation

Get Paper CSS from cdnjs (recommended):

``html

`

Or download paper.css file from GitHub manually, or via npm:

`bash
$ npm install paper-css
`

Basic Usage

Load paper-css into like this:

`html






`

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

`html





`

All available page sizes is listed below:

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

See also the examples for detail.

Live Preview

Install live-server:

`bash
$ npm install --global live-server
`

Then, preview your HTML file:

`bash
$ live-server your-document.html
`

Your browser will open the document. And the browser will automatically reload the page when changes are detected.

See more detail and all options here.

PDF Generation

Install electron-pdf:

`bash
$ npm install --global electron-pdf
`

Then, generate a PDF file from your HTML file:

`bash
$ electron-pdf your-document.html your-document.pdf
`

See more details and all options here.

Note: we used to provide a small CLI tool paper-css while v0.2.x, we've dropped it in favor of electron-pdf` which is a better option to do the same, basically.

Why Paper CSS?

$3

You can check the design and layout before printing. See the browser like when you build a web page.

!Preview

This example could be printed like this.

!Dialog

$3

It's just HTML/CSS, so we can edit it with live-reloading. See Live Preview section above.

!Live reloading

$3

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

\ It depends on user's environment. \\* Only if you have huge memory on the server.

License

MIT © Tsutomu Kawamura