Chapter 6. CSS Properties – Part 3

Now that we're done with Part 2 of the CSS properties, let's end strongly with Part 3.

Let's do this.

Page box

The page box is a square/rectangular area built out of two parts: the page area and the margin area.

The page area is where the content sits and all elements are laid out. The margin area sits around the page area and is transparent. If we add a background color to the page area, it will cover the page area and the margin area.

The size of the page box cannot be modified. But if we plan to modify some of the page box properties, we need to include them in an @page rule.

Let's check it out.

bleed

The bleed CSS property is also called the CSS at-rule descriptor. It defines how much a page should "overflow" or bleed outside the page box. This property only works if marks have been enabled using the marks property, which we'll see next.

Description

The bleed property only supports a length value: px, em, in, mm, cm, vw, and so on.

CSS:

@page {
  bleed: 5mm;
}

marks

The marks CSS property, also called a CSS at-rule descriptor, defines the types of mark that should be rendered and printed outside the page box.

Since the marks are printed outside the page box, the pages need to be a bit larger in order to have the space to print the marks.

Description

The marks property supports three keyword values: crop, cross, and none.

  • crop: Crop marks define where the page should be cut
  • cross: Cross marks are used to align the pages
  • none: Marks will not be displayed

CSS:

@page {
  marks: crop cross;
}
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.220.245.140