...
 
Commits (30)
......@@ -3,61 +3,92 @@
Paged.js - Paged Media Tools
===========
Paged.js is an open-source library to display paginated content in the browser and to generate print books using web technology.
It contains a set of handlers for CSS transformations and fragmented layout which polyfill the [CSS Paged Media][] and [CSS Generated Content][] CSS modules, along with hooks to create new handlers for custom properties.
## NPM Module
```sh
The currently supported properties can be found on [the wiki](https://gitlab.pagedmedia.org/tools/pagedjs/wikis/Support-of-specifications).
A quick overview to getting started with Paged Media CSS and Paged.js is available on [pagedmedia.org](https://www.pagedmedia.org/paged-js/).
## Install
Paged.js is available via a CDN like [jsDelivr][] or [unpkg][] for a quick use.
See below for how to use it.
You can also integrate Paged.js with your toolchain [via NPM][npm].
```bash
$ npm install pagedjs
```
```js
import { Previewer } from 'pagedjs';
let paged = new Previewer();
let flow = paged.preview(DOMContent, ["path/to/css/file.css"], document.body).then((flow) => {
console.log("Rendered", flow.total, "pages.");
})
## Polyfill
The polyfill is the easiest way to replace all `@page` css. It renders the html page according to the [CSS Paged Media][] spec.
```html
<script type="module">
import {Polyfill} from 'https://unpkg.com/pagedjs/dist/paged.polyfill.esm.js';
// whenever the document content is ready
Polyfill.preview();
</script>
```
## Polyfill
See it in action with the [Aurorae book](https://s3.amazonaws.com/pagedmedia/pagedjs/examples/polyfill.html).
Add the the `paged.polyfill.js` script to replace all `@page` css and render the html page with the Paged Media styles applied:
Use `auto: true` in the `PagedConfig` object to render when the script is loaded:
```html
<script>
window.PagedConfig = {
auto: true
};
</script>
<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
```
Try the [polyfill with Aurorae](https://s3.amazonaws.com/pagedmedia/pagedjs/examples/polyfill.html).
By default the polyfill will run automatically as soon as the DOM is ready.
However, you can add an async `before` function or return a Promise to delay the polyfill starting.
Execute code `before` or `after` the polyfill is applied:
```html
<script>
window.PagedConfig = {
auto: true,
before: () => {
return new Promise(resolve, reject) {
setTimeout(() => { resolve() }, 1000);
return new Promise(resolve) {
// do something before the rendering
// ...
// then runs the polyfill
resolve();
}
},
after: (flow) => { console.log("after", flow) },
after: () => { ... }
};
</script>
<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
```
## Previewer
```js
import { Previewer } from 'pagedjs';
let paged = new Previewer();
let flow = paged.preview(DOMContent, ["path/to/css/file.css"], document.body).then((flow) => {
console.log("Rendered", flow.total, "pages.");
});
```
Otherwise you can disable `auto` running the previewer and call `window.PagedPolyfill.preview();`
whenever you want to start.
### ECMAScript Module
```html
<script>
window.PagedConfig = {
auto: false
after: (flow) => { console.log("after", flow) },
};
<script type="module">
import { Previewer } from 'https://unpkg.com/pagedjs/dist/paged.polyfill.esm.js';
setTimeout(() => {
window.PagedPolyfill.preview();
}, 1000);
let paged = new Previewer();
// ...
</script>
```
......@@ -78,7 +109,7 @@ Examples:
### CLI
Command line interface to render out PDFs of HTML files using Puppeteer: [https://gitlab.pagedmedia.org/polyfills/pagedjs-cli](https://gitlab.pagedmedia.org/polyfills/pagedjs-cli).
[`pagedjs-cli`](https://gitlab.pagedmedia.org/polyfills/pagedjs-cli) is a command line interface to render out PDFs of HTML files. It uses [Puppeteer][] under the hood.
## Modules
......@@ -87,9 +118,10 @@ Modules are groups of handlers for that apply the layout and styles of a CSS mod
New handlers can be registered from `import { registerHandlers } from 'pagedjs'` or by calling `Paged.registerHandlers` on an html page.
```html
<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
<script>
class MyHandler extends Paged.Handler {
<script type="module">
import {Handler, registerHandlers} from 'https://unpkg.com/pagedjs/dist/paged.polyfill.esm.js';
class MyHandler extends Handler {
constructor(chunker, polisher, caller) {
super(chunker, polisher, caller);
}
......@@ -98,7 +130,8 @@ New handlers can be registered from `import { registerHandlers } from 'pagedjs'`
console.log(pageFragment);
}
}
Paged.registerHandlers(MyHandler);
registerHandlers(MyHandler);
</script>
```
......@@ -121,16 +154,23 @@ onAtPage(atPageNode)
onRule(ruleNode)
onDeclaration(declarationNode, ruleNode)
onContent(contentNode, declarationNode, ruleNode)
// Layout
layoutNode(node)
renderNode(node, sourceNode)
onOverflow(overflow, rendered, bounds)
onBreakToken(breakToken, overflow, rendered)
```
## Setup
## Local Development
Install dependencies
```sh
$ npm install
```
## Development
Run the local dev-server with livereload and autocompile on [http://localhost:9090/](http://localhost:9090/)
```sh
$ npm start
```
......@@ -208,12 +248,12 @@ npm run specs -- --updateSnapshot
### Docker
A `pagedmedia/pagedjs` docker image contains all the dependencies needed to run the `pagedjs` development server, as well as the pdf comparison tests.
A [`pagedmedia/pagedjs` docker image][docker-image] contains all the dependencies needed to run the `pagedjs` development server, as well as the pdf comparison tests.
To build the image run
```bash
docker build -t pagedmedia/pagedjs .
docker build -t pagedmedia/pagedjs .
```
By default the container will run the development server with `npm start`
......@@ -236,3 +276,13 @@ The core team behind paged.js includes [Adam Hyde](https://adamhyde.net), [Julie
## Licence
MIT License (MIT), which you can read [here](https://gitlab.pagedmedia.org/tools/pagedjs/blob/master/LICENSE.md)
[CSS Paged Media]: https://www.w3.org/TR/css-page-3/
[CSS Generated Content]: https://www.w3.org/TR/css-gcpm-3/
[Puppeteer]: https://pptr.dev/
[docker-image]: https://hub.docker.com/r/pagedmedia/pagedjs
[jsDelivr]: https://www.jsdelivr.com/package/npm/pagedjs
[unpkg]: https://unpkg.com/pagedjs
[via NPM]: https://npmjs.com/pagedjs
@page {
size: 8.5in 11in;
margin: 20mm 25mm;
marks: crop;
/* marks: crop; */
@footnote {
margin: 0.6em 0 0 0;
......@@ -12,7 +12,7 @@
@top-center {
vertical-align: bottom;
padding-bottom: 10mm;
content: string(booktitle);
content: string(booktitle, first-except);
}
}
......@@ -52,7 +52,7 @@
}
@top-center{
content: string(booktitle);
content: string(booktitle, first-except);
}
}
......@@ -115,7 +115,7 @@ font-style: italic;
}
article.section:nth-child(1) h1 {
article.section:nth-child(1) h1, article.section:nth-child(1) .title {
string-set: booktitle content(text);
}
......
#main {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
@media screen {
#navigation {
width: 500px;
position: fixed;
overflow: auto;
top: 0;
left: -525px;
#main {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
background: #ECECEC;
min-height: 100%;
height: 100%;
height: 100vh;
#navigation {
width: 500px;
position: fixed;
overflow: auto;
top: 0;
left: -525px;
overflow: scroll;
-webkit-overflow-scrolling: touch;
padding: 9px;
padding-top: 10px;
background: #ECECEC;
min-height: 100%;
height: 100%;
height: 100vh;
transition: left .2s ease-out;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
overflow: scroll;
-webkit-overflow-scrolling: touch;
padding: 9px;
padding-top: 10px;
z-index: 1;
}
transition: left .2s ease-out;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
#navigation.open {
left: 0;
}
z-index: 1;
}
#opener {
position: absolute;
top: 0;
left: 0;
padding: 10px;
stroke: #E2E2E2;
fill: #E2E2E2;
}
#navigation.open {
left: 0;
}
#opener:hover {
stroke: #777;
fill: #777;
}
#opener {
position: absolute;
top: 0;
left: 0;
padding: 10px;
stroke: #E2E2E2;
fill: #E2E2E2;
}
#header {
height: 30px;
}
#opener:hover {
stroke: #777;
fill: #777;
}
#update {
float: right;
}
#header {
height: 30px;
}
.CodeMirror {
border: 1px solid #eee;
height: calc(100vh - 24px);
box-sizing: border-box;
background: #fbfbfb;
box-shadow: inset 0 0 1px rgba(0,0,0,.8);
}
#update {
float: right;
}
.material-icons {
color: #333;
cursor: pointer;
}
.CodeMirror {
border: 1px solid #eee;
height: calc(100vh - 24px);
box-sizing: border-box;
background: #fbfbfb;
box-shadow: inset 0 0 1px rgba(0,0,0,.8);
}
.material-icons:hover {
color: #525252;
}
.material-icons {
color: #333;
cursor: pointer;
}
.material-icons:active {
color: #000;
}
.material-icons:hover {
color: #525252;
}
.material-icons:active {
color: #000;
}
.pagedjs_page {
box-shadow: 0 0 4px #ccc;
}
.pagedjs_page {
box-shadow: 0 0 4px #ccc;
}
@page {
size: 8.5in 11in;
margin: 20mm 25mm;
marks: crop;
/* marks: crop; */
@footnote {
margin: 0.6em 0 0 0;
......
......@@ -25,7 +25,7 @@
}
.pagedjs_pages {
width: calc((var(--width) * 2) + (var(--margin) * 4));
width: calc((var(--pagedjs-width) * 2) + (var(--margin) * 4));
display: flex;
flex-direction: row;
flex-wrap: wrap;
......
This diff is collapsed.
This diff is collapsed.
{
"name": "pagedjs",
"version": "0.1.30",
"version": "0.1.31",
"description": "Chunks up a document into paged media flows and applies print styles",
"author": "Fred Chasen",
"license": "MIT",
"homepage": "https://pagedmedia.org",
"main": "lib/index.js",
"module": "src/index.js",
"module": "dist/paged.esm.js",
"browser": "dist/paged.js",
"dependencies": {
"@babel/polyfill": "^7.0.0",
......
......@@ -11,34 +11,35 @@ const plugins = [
];
export default [
// browser-friendly UMD build
{
input: pkg.module,
output: {
name: 'Paged',
file: pkg.browser,
format: 'umd'
},
output: [
{
name: 'Paged',
file: pkg.browser,
format: 'umd'
},
{
file: './dist/paged.esm.js',
format: 'esm'
}
],
plugins: plugins
},
// {
// input: pkg.module,
// output: [
// {
// file: pkg.main,
// format: 'cjs'
// },
// ]
// },
{
input: "./src/polyfill/polyfill.js",
output: {
name: 'PagedPolyfill',
file: "./dist/paged.polyfill.js",
format: 'umd'
},
input: './src/polyfill/polyfill.js',
output: [
{
name: 'PagedPolyfill',
file: './dist/paged.polyfill.js',
format: 'umd'
},
{
file: './dist/paged.polyfill.esm.js',
format: 'esm'
}
],
plugins: plugins
}
];
This diff is collapsed.
const TIMEOUT = 10000; // Some book might take longer than this to renderer
describe('bleed', async () => {
let page;
let rendered;
beforeAll(async () => {
page = await loadPage('bleed/bleed.html')
return page.rendered;
}, TIMEOUT)
afterAll(async () => {
if (!DEBUG) {
await page.close();
}
})
it('should render text', async () => {
let text = await page.evaluate(() => document.body.textContent);
expect(text).toContain('Chapter 1. Loomings.');
})
it('should render 7 pages', async () => {
let pages = await page.$$eval(".pagedjs_page", (r) => r.length);
expect(pages).toBe(7);
})
if (!DEBUG) {
it('should create a pdf', async () => {
let pdf = await page.pdf(PDF_SETTINGS);
expect(pdf).toMatchPDFSnapshot(1);
})
}
}
)
......@@ -77,7 +77,7 @@
}
.pagedjs_pages {
width: calc(var(--width) * 2);
width: calc(var(--pagedjs-width) * 2);
display: flex;
flex-direction: row;
flex-wrap: wrap;
......
......@@ -90,7 +90,7 @@
}
.pagedjs_pages {
width: calc(var(--width) * 2);
width: calc(var(--pagedjs-width) * 2);
display: flex;
flex-direction: row;
flex-wrap: wrap;
......
......@@ -90,7 +90,7 @@
}
.pagedjs_pages {
width: calc(var(--width) * 2);
width: calc(var(--pagedjs-width) * 2);
display: flex;
flex-direction: row;
flex-wrap: wrap;
......
......@@ -89,7 +89,7 @@
}
.pagedjs_pages {
width: calc(var(--width) * 2);
width: calc(var(--pagedjs-width) * 2);
display: flex;
flex-direction: row;
flex-wrap: wrap;
......
......@@ -89,7 +89,7 @@
}
.pagedjs_pages {
width: calc(var(--width) * 2);
width: calc(var(--pagedjs-width) * 2);
display: flex;
flex-direction: row;
flex-wrap: wrap;
......
......@@ -90,7 +90,7 @@
}
.pagedjs_pages {
width: calc(var(--width) * 2);
width: calc(var(--pagedjs-width) * 2);
display: flex;
flex-direction: row;
flex-wrap: wrap;
......
......@@ -74,7 +74,7 @@
}
.pagedjs_pages {
width: calc(var(--width) * 2);
width: calc(var(--pagedjs-width) * 2);
display: flex;
flex-direction: row;
flex-wrap: wrap;
......
......@@ -88,7 +88,7 @@
}
.pagedjs_pages {
width: calc(var(--width) * 2);
width: calc(var(--pagedjs-width) * 2);
display: flex;
flex-direction: row;
flex-wrap: wrap;
......