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: A4;
} |
- 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>GeeksforGeeks</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