Commit 202bea00 authored by Julie Blanc's avatar Julie Blanc

add correct link of images to have preview into gitlab

parent 59f9bb57
......@@ -2,7 +2,7 @@
If you have ever tried to lay out a website for printing or to publish a book in HTML, you’ll have experienced the limitations of styling meant for displaying scrolling text on screens. Paged.js helps make it possible to produce paginated material from your browser.
![Transform flux into pages](https://gitlab.pagedmedia.org/tools/pagedjs-documentation/blob/master/images/flux-page.png)
![Transform flux into pages](https://gitlab.pagedmedia.org/tools/pagedjs-documentation/raw/master/images/flux-page.png)
## W3C CSS modules
......@@ -46,13 +46,13 @@ The chunker part of paged.js gets your styled content split into page chunks.
It take all your rendered document content - this means your content with all the design rules applied to it. It put this content in a box that has the size of your content area (i.e. page size minus the size of the margins). It tries to fit everything into this container and then looks for the overflowing content.
![The chunker puts all your rendered content in a box and checks the overflow](https://gitlab.pagedmedia.org/tools/pagedjs-documentation/blob/master/images/chuncker-1.png)
![The chunker puts all your rendered content in a box and checks the overflow](https://gitlab.pagedmedia.org/tools/pagedjs-documentation/raw/master/images/chuncker-1.png)
After that, the script creates a new box and puts the overflow content in it. Again, it looks for the next overflowing content.
Paged.js does this repeatedly until the book is done. Once you’ve got your content chunked, you’ll need to repeat the process anytime something changes.
![The chunker creates a new box and puts the overflow content in it](https://gitlab.pagedmedia.org/tools/pagedjs-documentation/blob/master/images/chuncker-2.png)
![The chunker creates a new box and puts the overflow content in it](https://gitlab.pagedmedia.org/tools/pagedjs-documentation/raw/master/images/chuncker-2.png)
We will see that it is possible to control page breaks and change the size of the content area by changing the margins from one page to another using a page master layout.
......@@ -66,7 +66,7 @@ This doesn't prevent you from using the CSS column property in your content
With the polisher part, Paged.js also builds new boxes to create page layouts and and places your content boxes on these pages.
![](https://gitlab.pagedmedia.org/tools/pagedjs-documentation/blob/master/images/div-pages.png)
![](https://gitlab.pagedmedia.org/tools/pagedjs-documentation/raw/master/images/div-pages.png)
In parallel, the script reads your CSS file to have information about the print styles and transforms your `@page` rules into classes that your browser understand today. 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.
......
......@@ -17,7 +17,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:
![](/Users/julieblanc/Documents/LOCAL_serveur/PagedMedia/pagedjs-documentation/images/margin-boxes.png)
![](https://gitlab.pagedmedia.org/tools/pagedjs-documentation/raw/master/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.
......@@ -122,7 +122,7 @@ The string property act like a variable. It read your DOM and each time a new ti
![](/Users/julieblanc/Documents/LOCAL_serveur/PagedMedia/pagedjs-documentation/images/string-set.png)
![](https://gitlab.pagedmedia.org/tools/pagedjs-documentation/raw/master/images/string-set.png)
......@@ -427,7 +427,7 @@ For example, if you use background-color and padding into the at-rules for page-
Result:
![](/Users/julieblanc/Documents/LOCAL_serveur/PagedMedia/pagedjs-documentation/images/marginbox-style-01.png)
![](https://gitlab.pagedmedia.org/tools/pagedjs-documentation/raw/master/images/marginbox-style-01.png)
......@@ -450,7 +450,7 @@ If you want to applied this background-color and padding only on the generated c
Result:
![](/Users/julieblanc/Documents/LOCAL_serveur/PagedMedia/pagedjs-documentation/images/marginbox-style-02.png)
![](https://gitlab.pagedmedia.org/tools/pagedjs-documentation/raw/master/images/marginbox-style-02.png)
......@@ -490,7 +490,7 @@ By using the `tranfsorm()` property you can easily rotate the margin-boxes of yo
Result:
![](/Users/julieblanc/Documents/LOCAL_serveur/PagedMedia/pagedjs-documentation/images/marginbox-style-03.png)
![](https://gitlab.pagedmedia.org/tools/pagedjs-documentation/raw/master/images/marginbox-style-03.png)
......@@ -507,7 +507,7 @@ Paged.js use CSS grid and flexbox to create the margin boxes of the page. The fi
#### Margin boxes on the page
![](/Users/julieblanc/Documents/LOCAL_serveur/PagedMedia/pagedjs-documentation/images/margin-boxes_grid_01.png)
![](https://gitlab.pagedmedia.org/tools/pagedjs-documentation/raw/master/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.
......@@ -563,7 +563,7 @@ Each margin group contains three margin boxes contained in a single direction gr
![](/Users/julieblanc/Documents/LOCAL_serveur/PagedMedia/pagedjs-documentation/images/margin-boxes_grid_02.png)
![](https://gitlab.pagedmedia.org/tools/pagedjs-documentation/raw/master/images/margin-boxes_grid_02.png)
......@@ -626,36 +626,36 @@ 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.
![](/Users/julieblanc/Documents/LOCAL_serveur/PagedMedia/pagedjs-documentation/images/margin-boxes_size_sample-01.png)
![](https://gitlab.pagedmedia.org/tools/pagedjs-documentation/raw/master/images/margin-boxes_size_sample-01.png)
**If two margin box are generated**
* If A and C are generated,
* 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. ![](/Users/julieblanc/Documents/LOCAL_serveur/PagedMedia/pagedjs-documentation/images/margin-boxes_size_sample-02.png)
* 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. ![](https://gitlab.pagedmedia.org/tools/pagedjs-documentation/raw/master/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.
![](/Users/julieblanc/Documents/LOCAL_serveur/PagedMedia/pagedjs-documentation/images/margin-boxes_size_sample-03.png)
![](https://gitlab.pagedmedia.org/tools/pagedjs-documentation/raw/master/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.
![](/Users/julieblanc/Documents/LOCAL_serveur/PagedMedia/pagedjs-documentation/images/margin-boxes_size_sample-04.png)
![](https://gitlab.pagedmedia.org/tools/pagedjs-documentation/raw/master/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.![](/Users/julieblanc/Documents/LOCAL_serveur/PagedMedia/pagedjs-documentation/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. ![](/Users/julieblanc/Documents/LOCAL_serveur/PagedMedia/pagedjs-documentation/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. ![](/Users/julieblanc/Documents/LOCAL_serveur/PagedMedia/pagedjs-documentation/images/margin-boxes_size_sample-07.png)
* 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.![](https://gitlab.pagedmedia.org/tools/pagedjs-documentation/raw/master/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. ![](https://gitlab.pagedmedia.org/tools/pagedjs-documentation/raw/master/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. ![](https://gitlab.pagedmedia.org/tools/pagedjs-documentation/raw/master/images/margin-boxes_size_sample-07.png)
**If all margin box are generated**
* 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. ![](/Users/julieblanc/Documents/LOCAL_serveur/PagedMedia/pagedjs-documentation/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.![](/Users/julieblanc/Documents/LOCAL_serveur/PagedMedia/pagedjs-documentation/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. ![](/Users/julieblanc/Documents/LOCAL_serveur/PagedMedia/pagedjs-documentation/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. ![](/Users/julieblanc/Documents/LOCAL_serveur/PagedMedia/pagedjs-documentation/images/margin-boxes_size_sample-11.png)
* 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. ![](https://gitlab.pagedmedia.org/tools/pagedjs-documentation/raw/master/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.![](https://gitlab.pagedmedia.org/tools/pagedjs-documentation/raw/master/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. ![](https://gitlab.pagedmedia.org/tools/pagedjs-documentation/raw/master/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. ![](https://gitlab.pagedmedia.org/tools/pagedjs-documentation/raw/master/images/margin-boxes_size_sample-11.png)
......
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