Commit 297a92f9 authored by Julie Blanc's avatar Julie Blanc

print media query + bleed and crop marks

parent 65ec91bc
......@@ -2,14 +2,14 @@
* Print media query (TODO)
* Print media query
* @page rule
- Page size property
- Margin size property
- Page spread or recto/verso
- Page breaks
- Crop marks, bleed and trim (TODO)
- Crop marks and bleed
- Code resume of the chapter
......@@ -18,7 +18,21 @@
The media queries allows you to target different media type and screen size.
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 */
}
```
......@@ -132,7 +146,7 @@ By default, the margins are set to 20mm.
Other exemple with different syntaxes:
```
```css
/* All margins are 30mm */
@page {
margin: 30mm;
......@@ -203,7 +217,7 @@ The `break-before` property indicates when your content should start on a new pa
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
.chapter{
.chapter {
break-before: right;
}
```
......@@ -213,7 +227,7 @@ Let's imagine you have all your book chapter in `<section>` elements with a `.ch
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
h2{
h2 {
break-before: page;
}
```
......@@ -231,15 +245,55 @@ If you prefer, you can also use `break-after` in the same way:
## Bleed and trim
## 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;
}
```
For professional print, we must add printer marks and bleed that will allow the printer to properly cut the publication before binding.
> will create *bleed* and *trim* areas around your content (and the declared page size).
......@@ -250,8 +304,11 @@ For professional print, we must add printer marks and bleed that will allow the
```CSS
@media print{
@page {
size: 140mm 200mm; /* page size (width height) */
size: 140mm 200mm;
margin: 10mm 15mm;
/* /!\ be careful by using the following properties */
bleed: 6mm;
marks: crop cross;
}
@page:left {
margin-left: 35mm;
......
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