CSS @page rule
The CSS @page rule defines the dimension of the page which is gonna be printed. There are a few important things that should be under control when you want to print a web page those are listed below:
- The page size, orientation, margins, border, and padding.
- Page breaks.
- Headers and footers.
- Page counters.
- Orphans.
All the above things are controllable when you follow the @page rule.
Syntax:
@page [:left | :right | :first] { /* print-specific rules */ }
Page Descriptor: There are three Descriptors in the @page rule those are:
- size: Specify the size of the page box’s containing block.
CSS
@page { size : A 4 ; } |
- marks: It helps to trim the page that you want to print.
CSS
@page { marks : crop cross ; } |
- bleed: It extends the bleed area of the box
CSS
@page { bleed: 7pt ; } |
Example:
html
<!DOCTYPE html> < html lang = "en" > < head > < title >CSS @page rule</ title > < style type = "text/css" > /* default for all pages */ @page { margin: 2in; } /* margin on left page */ @page :left { margin: 1in; } /* margin on right page */ @page :right { margin: 3in; } /* top margin on first page */ @page :first { margin-top: 5in; } h1 { color: green; } </ style > </ head > < body > < center > < h1 >w3wiki</ h1 > < h2 >CSS Page At-rule</ h2 > < p > If you open output in a new window and print the page the margin around the text content appears differently than it appears on the screen. </ p > </ center > </ body > </ html > |
Output: When you choose to print the output screen of the above code.
Supported Browsers: The browsers supported by CSS @page rule are listed below:
- Google Chrome 2.0
- Internet Explorer 8.0
- Safari 5.1
- Opera 6.0
Contact Us