Part04_Global-Layout.md 8.17 KB
Newer Older
1 2
# Global Layout

3 4
- Print media query
- @page rule
5

6 7 8 9 10 11
* Page size property
* Margin size property
* Page spread or recto/verso
* Page breaks
* Crop marks and bleed
* Code resume of the chapter
12 13 14

## Print media query

15
The media queries allows you to target different media type and screen size. It's typically used in reponsive design to adapt and optimize your design according to the interface on which a reader will read your content.
16

17
Media queries can also be used to create your print styles using `@media print`.
18 19 20 21

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

```css
22 23
@media print {
  /* All your print styles go here */
24 25 26
}
```

27
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 type for print might be declared differently to that for screen display so it is more suitable for printing, or images might be removed (with `display:none`) to save ink. Paged.js provides you a preview in the browser of how your styles will appear when printing.
28 29 30

## @page rule

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

33
All the CSS properties that affect the layout of your page must be declared inside.
34 35 36

## Page size property

37
The `size` property specifies the size of your page (excluding bleeds). This fixed size can be declared by length units in centimeters (`cm`) millimeters (`mm`) or inches (`in`). The first number is the width of your document and the second number is the height. By default, paged.js uses the A4 size (210 × 297 mm).
38

39
The size property is declared inside the `@page` rule:
40 41 42 43 44 45 46 47 48

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

### Page size and page orientation keywords

49
It's also possible to specify the page size by using some page size keywords. Optionally, they can be combined with page orientation keywords (`portrait` or `landscape`) to change the orientation of the page (which is portrait by default).
50 51 52

```css
/* Use A5 paper */
53 54
@page {
  size: A5;
55 56 57
}

/* Use A4 paper in landscape orientation */
58 59
@page {
  size: A4 landscape;
60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83
}
```

**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

84
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 polyfill that we need to print (to generate the PDF).
85 86 87

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:

88 89
- `var(--pagedjs-pagebox-width)` for the width of your page
- `var(--pagedjs-pagebox-height)` for the height of your page
90 91 92 93 94 95 96

### 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

97
The margins of your pages are to be declared in the `@page` rules with the same syntax you usually use for your other elements. Use length units like centimeters (`cm`) millimeters (`mm`), inches (`in`) or pixels (`px`).
98 99 100

```css
@page {
101
  margin: 20mm 30mm;
102 103 104 105 106
}
```

By default, the margins are set to 20mm.

107
Other examples with different syntaxes:
108

109
```css
110 111
/* All margins are 30mm */
@page {
112
  margin: 30mm;
113 114 115 116 117
}

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

/* All margins are different */
@page {
123 124 125 126
  margin-top: 20mm;
  margin-bottom: 25mm;
  margin-left: 10mm;
  margin-right: 35mm;
127 128 129 130 131
}
```

## Page spread or recto/verso

132
A basic unit for books 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 `@page` rules and style your pages differently.
133

134
Let's look at an example with differing margins:
135 136 137

```css
@page:left {
138 139
  margin-left: 25mm;
  margin-right: 10mm;
140 141 142
}

@page:right {
143 144
  margin-left: 10mm;
  margin-right: 25mm;
145 146 147 148 149 150 151
}
```

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

## Page breaks

152
Paged.js automatically creates a break page when your content doesn'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 chapters always on a right page. There are a few properties to help you do that.
153

154
In this part, we only talk about breaks from the point of view of global layout. Controlling the breaks inside paragraphs (widows or orphans) or avoiding fragmenting specific elements will be discussed in another part.
155 156 157

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

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

160 161
* 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`;
162

163
Let's imagine you have all your book chapters in `<section>` elements with a `.chapter` class and you want your chapter always to begin on the right page. You can use this code:
164 165

```css
166
.chapter {
167
  break-before: right;
168 169 170 171 172 173
}
```

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
174
h2 {
175
  break-before: page;
176 177 178 179 180
}
```

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

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

183 184
* `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;
185

186 187
## Bleed and crop marks

188
**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.
189 190 191

### Bleed

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

```css
195 196
@page  {
  bleed: 6mm;
197 198 199 200 201
}
```

### Crop and cross marks

202
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.
203

204
This two type of marks must be added in the same `marks` property, you can use either or both of them.
205 206 207 208

```css
/* To set crop and cross marks */
@page {
209
  marks: crop cross;
210 211 212 213
}

/* To set only crop marks */
@page {
214
  marks: crop;
215 216
}
```
217

218
## Code summary for a chapter
219 220 221 222

```CSS
@media print{
    @page {
223
        size: 140mm 200mm;
224
        margin: 10mm 15mm;
225
        /* /!\ be careful by using the following properties */
226
        bleed: 6mm;
227
        marks: crop cross;
228 229 230 231 232 233 234 235 236
    }
    @page:left {
        margin-left: 35mm;
        margin-right: 15mm;
    }
    @page:right {
        margin-left: 15mm;
        margin-right: 35mm;
    }
237 238
    .chapter{
        break-before: right;
239 240 241
    }
}
```