• Stars
    star
    2,443
  • Rank 18,287 (Top 0.4 %)
  • Language
    CSS
  • License
    MIT License
  • Created over 8 years ago
  • Updated about 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Paper CSS for happy printing

Paper CSS for happy printing

CDNJS

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

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

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>

  </section>

</body>

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?

Previewable

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

Live-reloading

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

Live reloading

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

More Repositories

1

symbols-for-sketch

Symbol font templates for Sketch.app
JavaScript
680
star
2

gulp-sketch

A SketchTool plugin for gulp
CoffeeScript
300
star
3

riot-bootstrap

Bootstrap-like Components for Riot.js
JavaScript
136
star
4

felt

On-demand bundler for ES6 / CSS Next
JavaScript
118
star
5

keiyaku-css

Crazy Style Formatter for Japanese Contract Document
CSS
107
star
6

momy

MongoDB to MySQL replication
JavaScript
98
star
7

tokoro

住所緯度経度変換ライブラリ (ジオコーディング)
CoffeeScript
93
star
8

webdriverio-examples

JavaScript
64
star
9

ikki

An extention toolkit for Riot.js
JavaScript
53
star
10

symbols

The Template of Symbol Fonts for Web
CSS
48
star
11

symbol-font-in-web

CoffeeScript
48
star
12

gulp-slim

Slim plugin for gulp
CoffeeScript
44
star
13

ModernAqua-Theme-for-SugarCRM

MacOSX-like theme by CogniTom
CSS
20
star
14

gulp-straw

Gulp Task Manager: The command-line tool for managing your gulpfile.
CoffeeScript
17
star
15

Qiita

Articles on Qiita
14
star
16

shinkan.today

「新刊トゥデイ」
JavaScript
14
star
17

riot-mixin-pack

JavaScript
12
star
18

sankaku

三角かな配列 ― USキーボードでカナ入力
12
star
19

sometime-riot

Timepicker for Riot.js
JavaScript
12
star
20

coder2-docker

Dockerfile
10
star
21

west-or-east

郵便番号から、西日本か東日本を判定
JavaScript
9
star
22

wdio-phantomjs-service

WebdriverIO service to start & stop PhantomJS
JavaScript
8
star
23

riot-fa

Font Awesome icons for Riot.js
JavaScript
8
star
24

fafgag

Creates an Observable from FAFGAG (Function / Async Function / Generator / Async Generator)
JavaScript
8
star
25

es-http-error

HttpError class for browsers (without Node.js dependencies)
JavaScript
7
star
26

gulp-handbook

gulp.js Handbook
CoffeeScript
7
star
27

electron-starter

Electron Sample Application
CoffeeScript
7
star
28

gulpfiles

gulpfiles for gulp.js
CoffeeScript
6
star
29

gulp-phantom

PhantomJS plugin for gulp
CoffeeScript
6
star
30

comic-viewer

A comic viewer built on Riot.js
JavaScript
6
star
31

dominiq

A happy medium between classic DOMs and upcoming new ES features
JavaScript
5
star
32

riot-action

JavaScript
5
star
33

mornin

Check-in! Mornin'!
JavaScript
5
star
34

CAPITALS

CAPITALS illustrates how to attach source map to the code during compilation.
JavaScript
5
star
35

riotjs-currency-calculator

Riot.js Currency Calculator
CoffeeScript
4
star
36

bookreader.js

JavaScript
4
star
37

EventWall

JavaScript
4
star
38

SugarCE-JLP

Japanese Language Pack for SugarCE
PHP
3
star
39

dotfiles

Dotfiles without dotfiles
Shell
3
star
40

presentation-cmu12

CSS
3
star
41

riot-tutorial

HTML
3
star
42

entry

Sample app with Riot.js
JavaScript
3
star
43

riot-checker

Riot Tag Syntax Checker
HTML
2
star
44

felt-rollup

JavaScript
2
star
45

felt-recipe-minimal

Minimal recipe for Felt
JavaScript
2
star
46

felt-recipe-react

A recipe for Felt with React
JavaScript
2
star
47

felt-recipe-riot

A recipe for Felt with Riot
JavaScript
2
star
48

StaffRoll.net-Libraries-and-Themes

JavaScript
2
star
49

windmill

A keymap for 40% ortholinear keyboards.
C
1
star
50

mb_emulator

PHP
1
star
51

dali-example

JavaScript
1
star
52

CoffeeSugar

Helper functions written in CoffeeScript
1
star
53

Vagrant-LAMP-concrete5

A LAMP stack for Laravel using Vagrant with Chef
Ruby
1
star
54

canvas-lesson

1
star
55

CycleThroughWindows

1
star
56

wagon

Embed images into the CSS on the fly.
PHP
1
star
57

cognitom.github.com

public site
PHP
1
star
58

felt-postcss

JavaScript
1
star
59

devsync

Syncing npm modules while development
JavaScript
1
star