Commit 994b317b authored by Julie Blanc's avatar Julie Blanc

parts reorganization + add part03 (how pagedjs works) and part03 (interface) +...

parts reorganization + add part03 (how pagedjs works) and part03 (interface) + modify quick presentation in part01
parent e77d51fd
......@@ -4,9 +4,19 @@
## A quick presentation of paged.js
Paged.js is an open-source javascript library to display paginated content in the browser and to generate print books using web technology.
It's composed of a *Chuncker* and a *Polisher*. The Chunker chunks up a document into paged media flows and applies print classes. The Polisher converts @page css to classes, and applies counters and content.
Paged.js is a free and open-source library to paginate content in the browser to create PDF outputs from any HTML content based on the W3C specifications.
With Paged.js you can do automated typesetting adaptable to any workflows. It will fragment your content, read and apply your print declarations and present a paginated rendering of the HTML document.
### Visual preview and command line version
With paginated content in the browser, Paged.js makes it possible to have a visual preview of the printed rendering directly in web browsers with a graphical interface. This allows designers to access development tools to make changes on the fly and control the rendering of the composition (easy debugging). It's also possible to insert Paged.js into other tools and to propose to users to configure their graphical rendering by adding functionalities.
Paged.js can easily be inserted into automated workflows thanks to the command line interface version (using an headless browser) that can generate a PDF from scriptable and automated commands.
......@@ -24,6 +34,10 @@ W3C CSS modules implemented by paged.js :
### A community
The code of paged.js is open-source with a MIT license and the development is community-driven. Everyone is invited to join us!
......@@ -46,9 +60,9 @@ How to start with paged.js? The first thing is to make the script work on your
* a (local) server,
* a web browser.
https://www.startpage.com/fr/
### Access to paged.js script
### Access to paged.polyfill.js script
**Option 1: CDN version**
......@@ -58,7 +72,7 @@ You can use the hosted version of the script, just copy this in the `head` of yo
<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
```
If you want to specify the release number of the script you are using, the different releases of the script will be available here: https://gitlab.pagedmedia.org/tools/pagedjs/releases
If you want to specify the release number of the script you are using, the different releases of the script will be available here: https://gitlab.pagedmedia.org/tools/pagedjs/releases. By default, the link bellow go to the latest release.
To use the script locally, without an internet connection, just copy the script into a file and change the link to your script, something like:
......@@ -66,7 +80,7 @@ To use the script locally, without an internet connection, just copy the script
<script src="js/paged.polyfill.js"></script>
```
The script will start automatically when you go to your document from the browser. It will apply to all your content and fragment it into different pages. If you need to run other scripts before paged.js starts, if you want to integrate it into a tool or simply if you want delay its launch, we will see that in another part.
The script will start automatically when you go to your document from the browser. It will apply to all your content and fragment it into different pages. If you need to run other scripts before paged.js starts, if you want to integrate it into a tool or simply if you want delay its launch, we will see that in another part.
......@@ -84,21 +98,24 @@ $ npm start
Link the script with your document:
<script src="http://localhost:9090/dist/paged.polyfill.js"></script>
All you need to know about setup, development and testing with the local dev-server is available in the README.md of the repo.
### Use a local server
Paged.js need to access your files via a local server to read the css properties you write. There is a lot of way to create and lunch a local server. The easiest way is to use ready-to-use local web development solution like [WAMP](http://www.wampserver.com/) (for window) or [WAMP](https://www.mamp.info/en/) (for Mac).
Paged.js need to access your files via a local server to read the css properties you write. There is a lot of way to create and lunch a local server. If you're not familiar to Linux, the easiest way is to use ready-to-use local web development solution like [WAMP](http://www.wampserver.com/) (for window) or [WAMP](https://www.mamp.info/en/) (for Mac).
You can find all the documentation on their respective websites, globally:
1. download the package and follow the step of your usual system installation manager.
2. add the folder of your project in the folder automatically create by the application, typically in `c:\wamp\www` for WAMP or in `/Applications/MAMP/htdocs/`
3. Start the local server
4. In your favorite browser, go to the local address provided by your application `http://localhost:8888`
4. In your favorite browser, go to the local address provided by your application (like`http://localhost:8888` for example)
Note: With some browsers and some OS, you may not need a local server for paged.js to work. To find out, simply open your HTML page (linked to the polyfill). If the paginated content appears, you don't need a local server.
......@@ -164,6 +181,8 @@ The way paged.js work, it doesn't use the print engine from the browser to defin
### Option 2: with pagedjs-cli
The command line version of paged.js uses a headless browser to generate a PDF (chromium). So you can use paged.js in fully automated workflows. With the command line version, you don't need to call the paged.js script in your document, it will be done automatically.
First, download and install pagedjs-cli with your terminal (you need to have git and npm installed):
```
......
This diff is collapsed.
# Paged.js Interface
It is certainly easier to use paged.js with a rendering where you *actually* see the pages of your book side by side. For this, you can directly style the `div` pages using there classes.
We provide you an exemple of CSS to do this in an easy way.
Download this CSS file: [interface-01.1](https://gitlab.pagedmedia.org/tools/pagedjs-documentation/blob/master/ressources/interface-0.1.css)
Link the CSS file to your document:
```HTML
<link href="paht/to/file/interface-0.1.css" rel="stylesheet" type="text/css">
```
You can uncomment and modify part of the CSS file:
In the CSS file you can uncomment and modify parts:
- for recto/verso book
- to see and set the baseline
......@@ -34,7 +34,7 @@ The first thing to do in your style sheet is to specify this request:
The styles declared in this media query will only be applied when the web page is printed from the browser print dialog to create a PDF. For example, the size of the typography for print is declared differently than that for screen display so it is more suitable for printing, or images are removed (with `display:none`) to save ink. Paged.js provides you a preview in the browser of the comportement of your styles when printing.
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment