Home arrow DHTML arrow Page 2 - Padding, Pages, and More Style Sheet Properties

Padding, Pages, and More Style Sheet Properties

Continuing our series of articles on style sheet properties, this eighth part covers pages, pitch-range, and more. It is excerpted from chapter four of Dynamic HTML: The Definitive Reference, Third Edition, written by Danny Goodman (O'Reilly; ISBN: 0596527403). Copyright 2006 O'Reilly Media, Inc. All rights reserved. Used with permission from the publisher. Available from booksellers or direct from O'Reilly Media.

Author Info:
By: O'Reilly Media
Rating: 4 stars4 stars4 stars4 stars4 stars / 14
October 18, 2007
  1. · Padding, Pages, and More Style Sheet Properties
  2. · Page
  3. · Page-break-inside
  4. · Pitch-range
  5. · Quotes

print this article

Padding, Pages, and More Style Sheet Properties - Page
(Page 2 of 5 )


IE 5(Mac) NN n/a Moz n/a Saf n/a Op n/a CSS 2

Inherited: No

Lets you connect a block-level element to an @page rule through an identifier assigned to the rule.

CSS Syntax

page: pageRuleIdentifier | auto


The pageRuleIdentifier value is the name given to an @page rule in the same document.

Initial Value        auto

Example           table#results {page: printTable}

Applies To                    Block-level elements.

Object Model Reference


page-break-after, page-break-before
IE 4 NN n/a Moz 1.0.1 Saf all Op all CSS 2

Inherited: No

page-break-before IENNMoz Saf Op CSS

Defines how content should treat a page break around an element when the document is sent to a printer. Page breaks are not rendered in the visual browser as they may be in word processing programs; on screen, long content flows in one continuous scroll.

Proper handling of pages for printers relies on the CSS2 concept of the page  box, which is a rectangular region that ultimately reaches a printed page. Page break style properties help the browser control the precise content of each page box. Without any assistance (or with the auto setting), the browser divides pages for printing much as it has in the past by doing a best-fit for the content to fill up as much of each page as there is space for it.

To force a page break above an element, associate a page-break-before: always style setting with the element. Similarly, to force a break after an element, use page-break-after: always . For example, if you want a special class of br elements to break after them, you could set up a class selector style rule as follows:

  <style type="text/css" >
  br.pageEnd {display: block; page-break-after: always}

Then, whenever you want to force a page break in the document, include the following tag:

  <br class="pageEnd">

Property settings for left and right assume that the browser is equipped to detect left-facing from right-facing pages for double-sided printing (as specified in CSS2). Because you are likely to set different margins for each side of the gutter, indicating how pages break to start a new section requires forcing sufficient page breaks to plant new sections on the desired page. For example, if you want each h1 element to begin on a right-facing page, you would set a page break style for it as follows:

  h1 {page-break-before: right}

This property forces the browser to at least one and at most two page breaks before the h1 element to make sure it starts on a right-facing page. When the browser generates a second page break for the left or right value, it means that the browser generates a blank page bo x for the second page break.

Implementation of these properties is somewhat limited. Most modern browsers support always and auto , while Opera 9 correctly supports right and left .

CSS Syntax

page-break-after: breakType


Four constant values: always | auto | left | right (but treats left and right the same as always ). CSS2 adds avoid , which urges the browser to avoid breaking the page in that element if at all possible.


Initial Value      auto

Example         div.titlePage {page-break-before: always; page-break-after: always}

Applies To                  Block-level elements.

Object Model Reference


blog comments powered by Disqus

- Text-Justify, Volume, and Other Style Sheet ...
- Ruby-Position, Size, and Other Style Sheet P...
- Padding, Pages, and More Style Sheet Propert...
- Marks, Orphans, and More Style Sheet Propert...
- Layouts, Margins, and Other Style Sheet Prop...
- Floats, Fonts, and Other Style Sheet Propert...
- Color, Filters, and Other Style Sheet Proper...
- Borders and More with Style Sheets
- Learning Style Sheet Properties
- Style Sheet Property Reference
- Completing a Noisy Image Application
- An Object-Based Approach to Building Noisy I...
- A Basic Method for Building Noisy Images
- Adding More Features to Sliders with the Scr...
- Using Sliders with the Scriptaculous Framewo...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials