Css page media

paged media differ from continuous media in that the content of the document is split into one or more discrete pages.

paged media includes paper, transparencies, pages that are displayed on computer screens etc.

the @page rule

the css2 defines a "page box", a box of finite dimensions in which content is rendered.

the page box is a rectangular region that contains two areas:-

  • the page area
  • the margin area

the dimensions of the page box are set with the 'size' property.

the margins of the page are set with the 'margin' property.

<style  type="text/css" >
      
      @page {
      
      size:4.5in 11in ;
      
      margin:2cm ;
      
      }     </style>

controlling pagination -

you can control how the content of the document breaks across page boundaries, by using

the page-break-before, page-break-afterpage-break-inside properties.

      <style  type="text/css">
      
      h1{
      
         page-break-before:right ; }
         
      h2{
           page-break-after:avoid ; }
           
      </style>

note :-page breaking should be avoided inside table elements, floating elements, and block elements with borders.

values for these properties :-

note - use only the auto and avoid values with the page-break-inside property.

valuedescription
autoneither force nor forbid a page break before(after,inside)the generated box.
alwaysalways force a page break before(after)the generated box.
avoidavoid a page break before(after,inside)the generated box.
left

force one or two page breaks before(after)the generated box so that the next

page is formatted as a left page.

right

force one or two page breaks before(after)the generated box so that the next

page is formatted as a right page.


controlling widows and orphans

the 'orphans' property specifies the minimum number of lines of a paragraph that must be left at the bottom of a page.

the 'widows' property specifies the minimum number of lines of a paragraph that must be left at the top of a page.

here is the example to create 4 lines at the bottom and 3 lines at the top of each page.

<style  type="text/css" >
        
  @page {
        
           widows:3 ;
           
           orphans:4 ;
           
        }
        
        </style>