paper-css
Advanced tools
Readme
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.
Get Paper CSS from cdnjs (recommended):
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/paper-css/0.3.0/paper.css">
Or download paper.css file from GitHub manually, or via npm:
$ npm install paper-css
Load paper-css into <head> like this:
<!-- Load paper.css for happy printing -->
<link rel="stylesheet" href="dist/paper.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>
</body>
All available page sizes is listed below:
See also the examples for detail.
Install live-server:
$ npm install --global live-server
Then, preview your HTML file:
$ 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.
Install electron-pdf:
$ npm install --global electron-pdf
Then, generate a PDF file from your HTML file:
$ 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.
You can check the design and layout before printing. See the browser like when you build a web page.
This example could be printed like this.
It's just HTML/CSS, so we can edit it with live-reloading. See Live Preview section above.
| type | expression | learning cost | editable | in-browser | multipage |
|---|---|---|---|---|---|
| HTML | Enough | already known | No | OK | ~100 pages * |
| SVG | Enough | not so difficult | No | OK | |
| 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.
MIT © Tsutomu Kawamura
FAQs
Paper CSS for happy printing
The npm package paper-css receives a total of 1,978 weekly downloads. As such, paper-css popularity was classified as popular.
We found that paper-css demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
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.
Security News
Socket CEO Feross Aboukhadijeh joins a16z partners to discuss how modern, sophisticated supply chain attacks require AI-driven defenses and explore the challenges and solutions in leveraging AI for threat detection early in the development life cycle.
Security News
NIST's new AI Risk Management Framework aims to enhance the security and reliability of generative AI systems and address the unique challenges of malicious AI exploits.
Security News
This episode of the Risky Biz podcast discusses how the rise of small open source packages and the shift towards individual maintainers makes the ecosystem more vulnerable to supply chain attacks.