Paper Css

Paper CSS for happy printing
Alternatives To Paper Css
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Paper Css1,6282793 years ago11May 06, 201817mitCSS
Paper CSS for happy printing
4 years ago8apache-2.0Kotlin
Paper phone experimental android app
3 years agootherGo
Mini prototype of FG/FGG/FGR in Go.
Scalable Pen Plotter61
5 months ago3agpl-3.0G-code
Open Source Scalable Pen Plotter
2 years agootherC++
🏡🖨 An App which converts your minecraft .schematic files to blueprints for papercraft
6 years agoJavaScript
The software which powers Written in AngularJS it generates paper ready for printing using the HTML5 canvas directly in the browser.
10 years ago4April 24, 2013mitRuby
Downloads metadata and pdfs given a paper search query.
10 years agoHaskell
LambdaJam 2013 Workshop
Paper Store13
4 years agomitShell
Cold store small files on paper as QR codes -- PGP keys, Bitcoin keys, Tox keys or any other small files in general.
Music Box Paper11
6 years ago2Makefile
Print your own strips for DIY music boxes.
Alternatives To Paper Css
Select To Compare

Alternative Project Comparisons

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


Get Paper CSS from cdnjs (recommended):

<link rel="stylesheet" href="">

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

$ npm install paper-css

Basic Usage

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>



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:

$ 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.

PDF Generation

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.

Why Paper CSS?


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.

Live reloading


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.


MIT © Tsutomu Kawamura

Popular Printing Projects
Popular Paper Projects
Popular User Interface Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.