Commit 459662ab authored by julien's avatar julien
Browse files

add print page

parent e8e3a804
......@@ -7,7 +7,7 @@ weight: 1
symbolContent: "𖠅"
symbolText: "King Njoya created the Bamum script at the age of 25 in 1896 for the Bamum language, now spoken in present-day Cameroon. [Read more](https://decodeunicode.org/en/scripts/bamum#bamum)"
intro: "Heard about Paged.js but don’t know where to start? "
cover: "images/chuncker-1.png"
cover: "/images/chuncker-1.png"
class: documentation
---
......
......@@ -5,7 +5,7 @@ draft: false
part: 2
weight: 2
intro: "The basics to run Paged.js"
cover: "images/chuncker-1.png"
cover: "/images/chuncker-1.png"
class: documentation
symbolContent: "𝄢"
symbolText: "The Musical Symbols block covers characters used by basic Western musical notation and its antecedents (mensural notation and plainsong - or Gregorian - notation). [Read More](https://decodeunicode.org/en/scripts/musical_symbols#musical_symbols)"
......
......@@ -10,7 +10,7 @@ intro: "If you have ever tried to lay out a website for printing or to publish a
{{< figure src="../images/flux-page.png" >}}
{{< figure src="/images/flux-page.png" >}}
Paged.js is made of three modules, each one has a very precise task:
......@@ -27,13 +27,13 @@ To start using Paged.js, all you have to do is to write the standardized CSS dec
The chunker takes all your rendered content, with all the design rules applied to it, puts as much possible of it in a first box and looks for the overflowing content.
<!-- ![The chunker puts all your rendered content in a box and checks the overflow](images/chuncker-1.png) -->
<!-- ![The chunker puts all your rendered content in a box and checks the overflow](/images/chuncker-1.png) -->
After that, the script creates a new box, puts as much as possible of the overflowing content in it looks for the next overflow, and again and again, until there is no content left to put in the boxes. Paged.js does this repeatedly until the book is done.
<!-- ![The chunker creates a new box and puts the overflow content in it]() -->
{{< figure src="../images/chuncker-2.png" >}}
{{< figure src="/images/chuncker-2.png" >}}
To do so, we use the mighty CSS columns properties: each page is a column. This offers us an easy access to some of the properties already implemented in browsers, such as column-breaks, element(), or widows and orphans.
......@@ -52,7 +52,7 @@ We will see that it is possible to control page breaks and change the size of th
The Polisher is the part of Paged.js that translate the CSS rules for each of your page. It builds new boxes to create page layouts and places your content in these pages. We use the CSS tree library to parse the CSS from text and replace `@page` rules with classes. The polisher also replaces calls such as running headers, page counters, or CSS generated content functions with variables from the DOM.
{{< figure src="../images/div-pages.png" >}}
{{< figure src="/images/div-pages.png" >}}
Let's take the following CSS as an example:
......
......@@ -94,7 +94,7 @@ If you need to have an image in your generated content, you can do it like this:
```css
.glossary::after {
content: " " url("../images/glossary-icon.png");
content: " " url("/images/glossary-icon.png");
}
```
......
......@@ -24,7 +24,7 @@ Each have its own margin, border, padding, and content areas. By default, their
The figure bellow represent the sixteen margin boxes of a page defined by the W3C:
{{< figure src="../images/margin-boxes.png" >}}
{{< figure src="/images/margin-boxes.png" >}}
You can select this margins boxes in the `@page` rules with rules such as `@top-left`, `@bottom-right-corner`, `@left-middle`, etc. You add content in a page-margin box with the `content` property.
......@@ -142,7 +142,7 @@ The string property act like a variable. It read your DOM and each time a new ti
{{< figure src="../images/string-set.png" >}}
{{< figure src="/images/string-set.png" >}}
......@@ -344,7 +344,7 @@ The value of a named string or the value of a running element may change several
The first three argument are usefull for dicitonnary or glossary. The figure below shows which value appears according to the argument:
{{< figure src="../images/string-argument.png" >}}
{{< figure src="/images/string-argument.png" >}}
......@@ -463,7 +463,7 @@ For example, if you use background-color and padding into the at-rules for page-
Result:
{{< figure src="../images/marginbox-style-01.png" >}}
{{< figure src="/images/marginbox-style-01.png" >}}
......@@ -488,7 +488,7 @@ If you want to applied this background-color and padding only on the generated c
Result:
{{< figure src="../images/marginbox-style-02.png" >}}
{{< figure src="/images/marginbox-style-02.png" >}}
......@@ -532,7 +532,7 @@ By using the `tranfsorm()` property you can easily rotate the margin-boxes of yo
Result:
{{< figure src="../images/marginbox-style-03.png" >}}
{{< figure src="/images/marginbox-style-03.png" >}}
......@@ -548,7 +548,7 @@ Paged.js use CSS grid and flexbox to create the margin boxes of the page. The fi
### Margin boxes on the page
{{< figure src="../images/margin-boxes_grid_01.png" >}}
{{< figure src="/images/margin-boxes_grid_01.png" >}}
The page consists of four corner margins and four groups of margins placed on a grid with three columns and three rows. The grid use margin variables created by Paged.js based on your margin and page size declarations to set the size of items.
......@@ -607,7 +607,7 @@ Each margin group contains three margin boxes contained in a single direction gr
{{< figure src="../images/margin-boxes_grid_02.png" >}}
{{< figure src="/images/margin-boxes_grid_02.png" >}}
......@@ -670,7 +670,7 @@ Here, to explain this computation rules patterns, we use letters corresponding t
If only one of the margin boxes is generate, the margin box will take the full width/height of the margin group.
{{< figure src="../images/margin-boxes_size_sample-01.png" >}}
{{< figure src="/images/margin-boxes_size_sample-01.png" >}}
#### If two margin box are generated
......@@ -678,29 +678,29 @@ If only one of the margin boxes is generate, the margin box will take the full w
With no size set: the size of B is `0`, A and C are extended over the size of the margin group. Their size is relative to the length of the generated content.
{{< figure src="../images/margin-boxes_size_sample-02.png" >}}
{{< figure src="/images/margin-boxes_size_sample-02.png" >}}
With one size set (A or C): he size of B is `0`. A and C are spread over the size of the margin group. The margin box whose size is not set fills the remaining space in the margin group.
{{< figure src="../images/margin-boxes_size_sample-03.png" >}}
{{< figure src="/images/margin-boxes_size_sample-03.png" >}}
With the two size set (A and C): A is aligned on the left of the margin group, C is aligned with the right of the margin group. B takes the remaining space but has no content.
{{< figure src="../images/margin-boxes_size_sample-04.png" >}}
{{< figure src="/images/margin-boxes_size_sample-04.png" >}}
**If A and B or B and C are generated**
With no size set: the size of the margin-boxes will be relative to the length of the generated content. The one in the center will always be in the middle (“center rule”), i.e. the size of A will always be equal to the size of C.
{{< figure src="../images/margin-boxes_size_sample-05.png" >}}
{{< figure src="/images/margin-boxes_size_sample-05.png" >}}
With one size set (A, B or C): the other two margins bowes (with no size set) will extent the remaining space. The “center rule” remains valid, so the automatic sizes of the two margin-boxes will be distributed according to this rule.
{{< figure src="../images/margin-boxes_size_sample-06.png" >}}
{{< figure src="/images/margin-boxes_size_sample-06.png" >}}
With two size set: the two margin boxes with size set will have the declared size. The third margin box (which has no content) will take the size of the remaining space in the group.
{{< figure src="../images/margin-boxes_size_sample-07.png" >}}
{{< figure src="/images/margin-boxes_size_sample-07.png" >}}
......@@ -708,19 +708,19 @@ With two size set: the two margin boxes with size set will have the declared siz
If no size set: the size of the margin-boxes will be relative to the length of the generated content. The one in the center will always be in the middle (“center rule”), i.e. the size of A will always be equal to the size of C.
{{< figure src="../images/margin-boxes_size_sample-08.png" >}}
{{< figure src="/images/margin-boxes_size_sample-08.png" >}}
If one size set (A, B or C): the other two margins bowes (with no size set) will extent the remaining space. The “center rule” remains valid, so the automatic sizes of the two margin-boxes will be distributed according to this rule.
{{< figure src="../images/margin-boxes_size_sample-09.png" >}}
{{< figure src="/images/margin-boxes_size_sample-09.png" >}}
If two size set: the two margin boxes with size set will have the declared size. The third margin box (which has no content) will take the size of the remaining space in the group.
{{< figure src="../images/margin-boxes_size_sample-10.png" >}}
{{< figure src="/images/margin-boxes_size_sample-10.png" >}}
If all sizes set: all margins box have the declared size. They will be aligned on the left for top/bottom page margins and on top for left/right margins.
{{< figure src="../images/margin-boxes_size_sample-11.png" >}}
{{< figure src="/images/margin-boxes_size_sample-11.png" >}}
......
......@@ -11,7 +11,7 @@ part: 8
There could be pages in your book that may need their own, more specific layout: different background, different margins, and even different styles from the main rule.
You can use what is called “named pages” to define this. Based on your HTML, you can bind a specific layout to any content.
![How named pages works](../images/named-pages.png)
![How named pages works](/images/named-pages.png)
Imagine you want a specific layout for the pages of your frontmatter.
......
---
title: "Paged.js"
subtitle: "this is the subtitle"
class: "print"
# colorPaper: "black"
# colorCrop: "red"
# colorPaper: "orange"
# colorBackground: "orange"
# colorBody: "darkred"
baseline: "the library that prints the web"
header: "this is fun"
# cover: "img/1139e889a554ab3a295840.jpg" #link to the printing machine we can update it through js and randomize it.
---
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