Skip to content

P
pagedjs-documentation
Commit 98ba1c8d authored by Julie Blanc's avatar Julie Blanc
Browse files
Options

Merge branch 'master' into 'master' 

Copyedits and add consistency of markdown formatting using Prettier

See merge request !1
parents f5b6d1ee be37bb6a
Expand all Show whitespace changes
Inline Side-by-side
Showing with 188 additions and 431 deletions
FAQ.md
View file @ 98ba1c8d
# FAQ
**CSS Variables doesn't work in @page directive (page size and margin size)**
**CSS Variables don't work in @page directive (page size and margin size)**
Unfortunately Chromium/Chrome doesn’t understand css-properties when printing. We're looking at options to transform those into fixed values for printing, until Chromium/Chrome supports it. In the meantime, do not use the variables in these declarations by giving fixed values (calculated in advance).
......@@ -12,15 +10,15 @@ Unfortunately Chromium/Chrome doesn’t understand css-properties when printing.
Paged.js fragments all the content of your document, which means it will take the `<body>` tag from your document and transform your content into pages.
* If an image don't have the place to fit in a page, it's push in the next page.
- If an image don't have the space to fit in a page, it is pushed into the next page.
---
**Mixing page size or page orientation**
Blink (Chromium/Chrome rendering engine) doesn’t support mixed orientation or mixed size when it comes to print, so you can only set one orientation and one size per file (generated PDF).
Blink (Chromium/Chrome's rendering engine) doesn’t support mixed orientation or mixed size when it comes to print, so you can only set one orientation and one size per file (generated PDF).
The way that paged.js support landscape and portrait let you preview on screen, but when it comes to print, you would need to print two different files and merge those. We're looking at options for postprocessing PDF (using Ghostscript) to handle this kind of tasks automatically, but it's not there yet.
The way that paged.js supports landscape and portrait lets you preview on screen, but when it comes to print, you would need to print two different files and merge them. We're looking at options for postprocessing PDF (using Ghostscript) to handle this kind of tasks automatically, but it's not there yet.
---
......@@ -30,10 +28,10 @@ If paged.js makes an infinite loop when rendering (generating empty pages or pag
Paged.js checks the overflow only horizontally in the page. If you have elements that are larger than the page vertically, you may have rendering problems because paged.js can't get the element into the page. (For the vertical writing direction, it will be the opposite)
This often happens with `<pre>` or `<table>` (`<tr>`, `<th>`) elements. You need to add line breaks, which are possible with css (https://developer.mozilla.org/en-US/docs/Web/CSS/white-space)
This often happens with `<pre>` or `<table>` (`<tr>`, `<th>`) elements. You need to add line breaks, which is possible with css (https://developer.mozilla.org/en-US/docs/Web/CSS/white-space)
---
**Styling div and section elements**
Paged.js modifies the DOM structure by adding some HTML elements to build and render your layout. It adds a lot of `div ` elements. When you make your style sheet, we don't recommend that you call `div` and `section` tag names to apply your styles. You may get an unexpected rendering because your styles will apply to unwanted elements. Instead, use custom class to select the items you want.
\ No newline at end of file
Paged.js modifies the DOM structure by adding some HTML elements to build and render your layout. It adds a lot of `div` elements. When you make your style sheet, we don't recommend that you call `div` and `section` tag names to apply your styles. You may get an unexpected rendering because your styles will apply to unwanted elements. Instead, use custom class to select the items you want.
Part01_Getting-Started-with-paged.md
View file @ 98ba1c8d
This diff is collapsed.
Part02_how-pagedjs-works.md
View file @ 98ba1c8d
This diff is collapsed.
Part03_Interface.md
View file @ 98ba1c8d
# 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 classes.
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.
We have provided an example 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">
<link href="path/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
Part04_Global-Layout.md
View file @ 98ba1c8d
This diff is collapsed.
Part05_Generated-Content.md
View file @ 98ba1c8d
# Generated Content
One of the important advantages of CSS is that it helps you to separate a document’s style from its content ([W3C](https://www.w3.org/standards/webdesign/htmlcss#whatcss)). The separation of HTML from CSS makes it easier to maintain sites, share style sheets across pages, and display documents to different environments.
In some case, some elements are not essential to understand the content but are useful for a better reading into different environnements. This can be auxiliary information like insert the word "Figure" before the caption of a figure, or "Chapter 7" before the seventh chapter title. ([W3C](https://www.w3.org/TR/CSS2/generate.html))
Generaly, it's better if this element are generate automatically. You will not be bothered by the numbering if a figure is added in the middle of your content at the last minute. A lot of this auxiliary are also design choices (do you write "Chapter 7" or "Chap. 7" ?), so it is logical that they are declared in CSS.
This element are called *generated content*. You can use CSS to add them when a document is displayed. In technical terms, generated content exists only in the layout of the web document, there are not part of the DOM tree.
In some case, some elements are not essential to understand the content but are useful for a better reading into different environnements. This can be auxiliary information like inserting the word "Figure" before the caption of a figure, or "Chapter 7" before the seventh chapter title. ([W3C](https://www.w3.org/TR/CSS2/generate.html))
Generaly, it's better if this content is generated automatically. You will not be have problems with numbering if a figure is added in the middle of your content at the last minute. A lot of this material is also design choices (do you write "Chapter 7" or "Chap. 7"?), so it is logical that they are declared in CSS.
This element are called _generated content_. You can use CSS to add them when a document is displayed. In technical terms, generated content exists only in the layout of the web document: they are not part of the DOM tree.
## The content property
......@@ -24,8 +20,6 @@ For example, the following rule inserts the string "Note: " before the content o
}
```
The style of the element can be specify also info the delaration, like this:
```
......@@ -36,15 +30,9 @@ The style of the element can be specify also info the delaration, like this:
}
```
## Generated text
You can directly declare your text in the css (like above) but you can also use text specify in a data custom attribute.
You can directly declare your text in the CSS (like above) but you can also use text specified in a `data-` custom attribute.
In your HTML:
......@@ -55,38 +43,24 @@ In your HTML:
In your CSS:
```css
p.ref::before{
p.ref::before {
content: attr(data-ref-id);
}
```
It's also possible to combine elements in the content property:
```css
p.ref::before{
content: 'Reference ' attr(data-ref-id) ': ';
p.ref::before {
content: "Reference " attr(data-ref-id) ": ";
}
```
Once displayed you will have this text: `Reference 0215: Text of the reference`
## Generated counters
`css-counter` is a CSS property that lets you count elements within your content. For example, you might want to add a number before each figure caption. To do so, you would reset the counter for the `<body>` , increment it any time a caption appears in the content, and display that number in a `::before` pseudo-element.
`css-counter` is a CSS property that lets you count elements within your content. For example, you might want to add a number before each figure caption. To do so, you would reset the counter for the `<body>`, increment it any time a caption appears in the content, and display that number in a `::before` pseudo-element.
```
body {
......@@ -102,23 +76,19 @@ figcaption::before {
}
```
## Generated images
If you need to have an image in your generated content, use this following code:
```css
.glossary:after {content: " " url("/images/glossary-icon.png");}
.glossary:after {
content: " " url("/images/glossary-icon.png");
}
```
## Generted links
It can be usefull, espacially for print to display the links of your content. The following example inserts the value of the href attribute in parenthesis after each <a> element:
It can be useful, espacially for print, to display the links of your content. The following example inserts the value of the href attribute in parentheses after each `<a>` element:
```css
a::after {
......@@ -126,23 +96,10 @@ a::after {
}
```
## Generated content for paged media
Use generated content is possible without paged.js; `content` is a normal CSS property implemented in all browsers.
Use generated content is possible without paged.js; `content` is a classical property implemented in all browsers.
But to design a book (or a pagined content) you need some elements added to help readers navigate between pages: **running headers and footers, page numbers, a table of content, an index, cossreferences**; and so on.
But to design a book (or a pagined content) you need some elements added to help readers navigate between pages: running headers and footers, page numbers, a table of content, an index, cross-references, and so on.
These elements make little sense on the web and don’t exist in HTML content; you need to create them automatically. To do that you can use Generated Content for Paged Media, a combination of syntaxes and properties that paged.js implements. We will see how to use these special techniques in the next parts.
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