Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/cognitom/paper-css
Paper CSS for happy printing
https://github.com/cognitom/paper-css
css printing
Last synced: 6 days ago
JSON representation
Paper CSS for happy printing
- Host: GitHub
- URL: https://github.com/cognitom/paper-css
- Owner: cognitom
- License: mit
- Created: 2015-10-05T03:13:39.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2023-05-16T23:55:20.000Z (over 1 year ago)
- Last Synced: 2024-10-29T15:32:49.920Z (3 months ago)
- Topics: css, printing
- Language: CSS
- Homepage: https://www.npmjs.com/package/paper-css
- Size: 1.19 MB
- Stars: 2,503
- Watchers: 69
- Forks: 342
- Open Issues: 28
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Paper CSS for happy printing
[](https://cdnjs.com/libraries/paper-css)
> 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](https://raw.githubusercontent.com/cognitom/paper-css/master/paper.css), but it helps us create them in browser easily.
## Table of Contents
- [Installation](#installation)
- [Basic Usage](#basic-usage)
- [Live Preview](#live-preview)
- [PDF Generation](#pdf-generation)
- Why Paper CSS?
- [Previewable](#previewable)
- [Live-reloading](#live-reloading)
- [Comparisons](#comparisons)
- [License](#license)
## Installation
Get Paper CSS from [cdnjs](https://cdnjs.com/libraries/paper-css) (recommended):
```html
```
Or download [paper.css](https://raw.githubusercontent.com/cognitom/paper-css/master/paper.css) file from GitHub manually, or via npm:
```bash
$ npm install paper-css
```
## Basic Usage
Load paper-css into `` like this:
```html
@page { size: A5 }
```
Set the class of `` and also set "sheet" for each sheet.
```html
This is an A5 document.
```
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](examples/) for detail.
## Live Preview
Install [live-server](https://github.com/tapio/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](https://github.com/tapio/live-server#usage-from-command-line).
## PDF Generation
Install [electron-pdf](https://github.com/fraserxu/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](https://github.com/fraserxu/electron-pdf#all-available-options).
**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?
### Previewable
You can check the design and layout before printing. See the browser like when you build a web page.
[This example](examples/receipt.html) could be printed like this.
### Live-reloading
It's just HTML/CSS, so we can edit it with live-reloading. See [Live Preview](#live-preview) section above.
### 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
\* It depends on user's environment. \*\* Only if you have huge memory on the server.
## License
MIT © Tsutomu Kawamura