fbpx
April 6, 2020
CSS paged media
CSS

CSS PAGED MEDIA | Introduction To CSS @page Rules

In this tutorial we will be discussing about CSS PAGED MEDIA and how to make use of @page rules when developing web pages. In our previous tutorial we looked at CSS MEDIA TYPES and how you can specify the media type for your web pages. If you haven’t gone through the tutorial you can do so using the link below

Read previous tutorial on: CSS MEDIA TYPES | Learn How To Specify Media Types Using CSS

CSS PAGED MEDIA

Developers are allowed to choose between having a continuous media or a paged media. But the major difference between both is that the paged media document content is divided into one or more pages. In page media we have paper, transparencies and pages that will be displayed on screen such as the computer screen.

The CSS2 provides developers with some best pagination control features that tells the browser how best to print out the web document.

The @page rule

CSS2 allows us to define a page box in which the content of the web page will be rendered. This page area is found inside of the page box. In simpler terms, the page box is defined by setting margins to the page area. So we can simply conclude that the page box contains two sections which include the page area and the margin area.

page box and page area
CSS paged media
Visual representation of the page box and page area

Note that we can as well set the dimensions of the page box using the @page rule property with the help of the size property.

The below example shows how to set the dimensions of a page box using the @page rule property

<style type = "text/css">
   <!--
      @page { size:9.5in 9in; margin: 5cm }
   -->
</style>

The above illustration sets the page box to 9.5 * 9in with a margin of 5cm all around the page box. We can also be more specific with the margin by setting the margin top, margin bottom, margin right and margin left within the @page rule.

Setting page size

We can set the page size property with different values and they are listed below:

  • auto: this sets the page box to the size and orientation layout of the target
  • landscape: This is used to override the target. The page box retains the same size as the target but the longer sides becomes the horizontal.
  • portrait: This is used to override the target orientation. The page box is the same size as the target but the shorter side becomes the horizontal
  • length: This is used to create an absolute page box. If only one length is specified. The length value sets both the width and height of the page box and this value can’t be in percentage.

Examples

The below example sets the page box width size to 10.5in and height to 15in. Please understand that the box for this example should be having either width size of 10.5in and height of 15in or a higher value.

<style type = "text/css">
   <!--
      @page {
         size: 10.5in 15in;  /* width height */
      }
   -->
</style>

The below example shows a style that renders all the tables in your web page to landscape layout

<style type = "text/css">
   <!--
      
      @page rotated { size : landscape }
      table { page : rotated }
      @page { size : portrait }
   -->
</style>

Setting Left Right AND Front Pages

The below example shows how to setup the left and right pages in a double sided web document

<style type = "text/css">
   <!--
      @page :left {
         margin-left: 7cm;
         margin-right: 8cm;
      }

      @page :right {
         margin-left: 15cm;
         margin-right: 13cm;
      }
   -->
</style>

The first page of the web page can be specified using the front pseudo class. example shown below

<style type = "text/css">
   <!--
      @page { margin: 4cm } 

      @page :first {
         margin-top: 11cm    
      }
   -->
</style>

How To Control Pagination

By default pagination comes into a web page when the content overflows the page or when the page format changes but sometimes we might encounter situations where we will need to force page breaks, in such situations we can use the below properties

  • page-break-before
  • page-break-after
  • page-break-inside 

The above properties can take in values or keywords such as

  • auto – This lets the browser initiate the page breaks by default
  • avoid – This suppresses the page break before or after the element
  • left – forces page break on the left side
  • right – forces page break on the right side
  • always – This forces a keyword before or after the element

Example shown below

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

The below example shows how to avoid page breaks for tables using the avoid property

<style type = "text/css">
   <!--
      table { page-break-inside : avoid }
   -->
</style>

CONCLUSION

Specifying CSS PAGE MEDIA RULES is very important to developers when building web documents but before doing that you have to be aware of the kind of devices such document will be viewed on. Lets move on to the next topic on CSS AURAL MEDIA

Leave a Reply

Your email address will not be published. Required fields are marked *