CSS marks

The CSS marks property is used to set crop marks and cross marks on paged media. This is used with the @page rule.

This property can be valuable if you intend to print anything where the image needs to bleed to the edge, or if using a 4 color printing process.

Note that this property was removed from CSS 2.1, but it looks set to be included in CSS3. It was currently in Working Draft status as of this writing.

Syntax

@page: { marks: <value> }

Possible Values

  • crop
  • cross
  • none
  • inherit

Here's an explanation of the crop and cross values:

  • If crop is chosen, this determines where the page should be cut. This is essential if you want the printed image to extend right to the edge of the page. Normally the margin prevents the image from reaching the edge of the page. Using crop marks enables us to print the image using a large piece of paper than the final image will be. Then using crop marks (outside of the image area), we know exactly where to cut the sheet. To assist in this, the image should 'bleed' past the intended edge. This prevents any accidental white gaps near the edge.
  • If cross is chosen, this results in cross marks that assist in aligning printed sheets. This is essential when using a traditional 4 color print process, where each sheet needs to go through the printer 4 times (once for each colour). Cross marks assist the printer in aligning these sheets so that each layer of color is precisely above the previous layer. This results in a sharper print job.

Initial Value

none

Applies To

Paged media

Inherited?

N/A

Media

Visual, Paged

Example Code

@page: { 
  marks: crop; 
  }