JarCasting
JarCasting JarCasting

paper-css

WebJar for paper-css

License

License

MIT
Categories

Categories

Github Development Tools Version Controls
GroupId

GroupId

org.webjars.npm
ArtifactId

ArtifactId

github-com-cognitom-paper-css
Last Version

Last Version

0.4.1
Release Date

Release Date
Type

Type

jar
Description

Description

paper-css
WebJar for paper-css
Project URL

Project URL

http://webjars.org
Source Code Management

Source Code Management

https://github.com/cognitom/paper-css

Download github-com-cognitom-paper-css

Filename Size
github-com-cognitom-paper-css-0.4.1.pom
github-com-cognitom-paper-css-0.4.1.jar 956 KB
github-com-cognitom-paper-css-0.4.1-sources.jar 22 bytes
github-com-cognitom-paper-css-0.4.1-javadoc.jar 22 bytes
Browse

How to add to project

<!-- https://jarcasting.com/artifacts/org.webjars.npm/github-com-cognitom-paper-css/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>github-com-cognitom-paper-css</artifactId>
    <version>0.4.1</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.npm/github-com-cognitom-paper-css/
implementation 'org.webjars.npm:github-com-cognitom-paper-css:0.4.1'
// https://jarcasting.com/artifacts/org.webjars.npm/github-com-cognitom-paper-css/
implementation ("org.webjars.npm:github-com-cognitom-paper-css:0.4.1")
'org.webjars.npm:github-com-cognitom-paper-css:jar:0.4.1'
<dependency org="org.webjars.npm" name="github-com-cognitom-paper-css" rev="0.4.1">
  <artifact name="github-com-cognitom-paper-css" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.npm', module='github-com-cognitom-paper-css', version='0.4.1')
)
libraryDependencies += "org.webjars.npm" % "github-com-cognitom-paper-css" % "0.4.1"
[org.webjars.npm/github-com-cognitom-paper-css "0.4.1"]

Dependencies

There are no dependencies for this project. It is a standalone project that does not depend on any other jars.

Project Modules

There are no modules declared in this project.

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

Versions

Version
0.4.1