Part04_Global-Layout.md 8.26 KB
Newer Older
1 2 3 4
# Global Layout



5
* Print media query 
6 7 8 9 10 11
* @page rule

- Page size property
- Margin size property
- Page spread or recto/verso
- Page breaks
12
- Crop marks and bleed 
13 14 15 16 17 18 19 20
- Code resume of the chapter



## Print media query



21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
The media queries allows you to target different media type and screen size. It's typically use in reponsive design to adapt and optimize your design according to the interface on which a reader will read your content.

Media queries can also be used to create your print styles using `@media print`. 

The first thing to do in your style sheet is to specify this request:



```css
@media print { 
	/* All your print styles go here */
}
```


36

37
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.
38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148



## @page rule



The @page rule lets you specify various aspects of your page model such as  dimensions, orientation, background, margins, cropping, registration marks, and so on.

All the CSS properties that affect the gabarit of your page must be declared inside.



## Page size property



The `size` property specifies the size of your page (without bleeds). This fixed size can be declared by length units in centimeter (`cm`) millimeter (`mm`) or inch (`in`). The first number is the width of your document and the second number is the height. By default, paged.js use the A4 size (210 × 297 mm).

The size property is declared inside the at-page rule:

```Css
@page {
    size: 140mm 200mm;
}
```



### Page size and page orientation keywords

It's also possible to specify the page size by using some page size keywords. Optionnaly, they can be combined with page orientation keywords (`portrait` or `landscape`) to change the oprientation of the page (portrait by default).

```css
/* Use A5 paper */
@page { 
	size: A5;
}

/* Use A4 paper in landscape orientation */
@page { 
	size: A4 landscape; 
}
```



**Page size keywords and their size**

| **Page size keyword** | **size**      |
| --------------------- | ------------- |
| A0                    | 841 × 1189 mm |
| A1                    | 594 × 841 mm  |
| A2                    | 420 × 594 mm  |
| A3                    | 297 × 420 mm  |
| A4                    | 210 × 297 mm  |
| A5                    | 148 × 210 mm  |
| A6                    | 105 × 148 mm  |
| A7                    | 74 × 105 mm   |
| A10                   | 26 × 37 mm    |
| B4                    | 250 × 353 mm  |
| B5                    | 176 × 250 mm  |
| letter                | 8.5 × 11 in   |
| legal                 | 8.5 × 14 in   |
| ledger                | 11 × 17 in    |





### CSS variables

You can’t use CSS variables in this property because browsers do not support it.  Unfortunately, the `@page { size }` property is the only thing we can't manage and we need to print (to generate the PDF).

However, we create CSS variables from your declaration and use them in the previewer. You can therefore reuse them in your document if you need them for your calculations:

* `var(--pagedjs-pagebox-width)` for the width of your page
* `var(--pagedjs-pagebox-height)` for the height of your page





### Multiple page sizes

Your browser can only understand one page size for your document. If you want to create a document with different page sizes, you will need to create two separate HTML files and generate two PDFs.





## Margin size property



The margins of your pages are to be declared in the at-page rules with the same syntax you usually use for your other elements. Use length units like centimeter (`cm`) millimeter (`mm`), inch (`in`) or pixel (`px`). 



```css
@page {
    margin: 20mm 30mm;
}
```



By default, the margins are set to 20mm.

Other exemple with different syntaxes:

149
```css
150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219
/* All margins are 30mm */
@page {
    margin: 30mm;
}

/* Top and bottom margins are 3in,
left and right margins are 2in */
@page {
    margin: 3in 4in;
}

/* All margins are different */
@page {
    margin-top: 20mm;
    margin-bottom: 25mm;
    margin-left: 10mm;
    margin-right: 35mm;
}
```





## Page spread or recto/verso



A basic unit for book is the page spread: the left and right  page are of the same size and typically are symmetrical to each other  and are centered on the gutter. So, it’s important to setup a page structure with the page size and rules making a distinction between right and left pages. For this, you can use `:left` and `:right` selectors on at-page rules and style differently your pages.

Let's look at an example with the margins: 

```css
@page:left {
    margin-left: 25mm;
    margin-right: 10mm;
}

@page:right {
    margin-left: 10mm;
    margin-right: 25mm;
}
```



If your document is more a recto/verso style, you can use `:recto` and `:verso` page selectors in the same way.



## Page breaks



Paged.js automatically create a break page when your content don't fit into a page. However, it will sometimes happen that you need to control this fragmentation. Typically, in a book, you need to start your chapter always on a right page. There is a few properties to help you do that. 

In this part, we only talk about breaks in perspective of global layout. Controlling the break inside paragraph (widows or orphans) or avoiding fragmenting specific elements will be discussed in another part.

The `break-before` property indicates when your content should start on a new page depending on the option chosen:

* with `break-before: page`, the element start on the next page;

- with `break-before: right` or `break-before: left`  the element start on the next right page or the next left page (a blank page will be automatically created if the right/left page is not the next one);
- with `break-before: recto` or `break-before: verso` the element behaves like `break-before: right`or `break-before: left`;



Let's imagine you have all your book chapter in `<section>` elements with a `.chapter` class and you want your chapter always begins in right page. You can use this code: 

```css
220
.chapter {
221 222 223 224 225 226 227 228 229
    break-before: right;
}
```



You can also use page breaks on inline-element. For exemple, the following code forces the level 2 titles to always start on a new page:

```css
230
h2 {
231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247
    break-before: page;
}
```



If you prefer, you can also use `break-after` in the same way:

* `break-after: page` will push the content after the element to the next page;

- `break-after: right` or `break-after: left` will push the content after the element on the next right or left page; 
- `break-after: recto` or `break-after: verso` will push the content after the element  on the next recto or versopage; 





248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290
## Bleed and crop marks



IMPORTANT: Bleed, crop marks and cross marks were added to paged.js on February 28, 2019. However, we are still working on it. The implementation may change in the coming weeks, so we advise you to use the property with great care.



### Bleed

To cut the sheet correctly, `bleed` size property can be used. This property specifies the extent of the bleed area outside the page box.



```css
@page {
    bleed: 6mm;
}
```





### Crop and cross marks

To know where to cut the paper, you can add crop marks outside the page box to facilitate the trimming. For professional printing, it's also possible to add registration marks. These are typically cross-shaped marks outside each edge of the page box used to align sheets of paper during the printing process. 

This two type of marks must be added in the same `marks`property, you can use only one or both of them.



```css
/* To set crop and cross marks */
@page {
    marks: crop cross;
}

/* To set only crop marks */
@page {
    marks: crop;
}
```
291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306









## Code resume of the chapter



```CSS
@media print{
    @page {
307
        size: 140mm 200mm; 
308
        margin: 10mm 15mm;
309 310 311
        /* /!\ be careful by using the following properties */
        bleed: 6mm; 
        marks: crop cross;
312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330
    }
    @page:left {
        margin-left: 35mm;
        margin-right: 15mm;
    }
    @page:right {
        margin-left: 15mm;
        margin-right: 35mm;
    }
    .chapter{ 
        break-before: right; 
    }
}
```