After Hours optimize

Introduction to the Paged Media Module in CSS3

Ryan Boudreaux reviews the basics about using the CSS3 Paged Media Module to create formatted pages for print or for other electronic pages.

Does your website offer printed versions of your online content? Maybe you or your customer needs to create an eBook from the web content which is already published online. You may already have print.css or media.css stylesheets added to your styles arsenal, but do you know about the CSS3 Paged Media Module? How about the CSS Generated Content for Paged Media Module?  This post will introduce and review several methods that you can use to leverage the paged media module with @page and @media print, thereby creating formatted pages and print media from your web page documents.

What does the specification mean for the typical web developer? The paged media module is the standard that proposes a way to deliver paginated content, in other words, the process of dividing text and web page content into discrete pages, be they either electronic pages or printed pages. The standard allows you to automatically fit HTML pages to fit screen sizes of any device, and flip the pages as they are displayed.

With the paged media module, generated content module, and several other resources, you can take long sections of online content, and style the text into print page formats where you can direct the size of the pages, include a table of contents, add headers and footers, incorporate references such as footnotes and end notes, and add guides for commercial publishing companies. Producing structured printed books is no longer enough for traditional publishers; often, the need to release several different formats for every book means that printed media also needs to deliver with an ePub file for the iPad or Nook, and a .mobi file for the Kindle, and similar devices.

The page model

Paged media is formatted into one or more page boxes that utilizes a specialized CSS box to map a rectangular print media surface, such as a page of paper, and is roughly analogous to the viewport specification.

The page box (Figure A, left) consists of a page margin, page borders, page padding, and page content areas, which have special functions, each defined separately by the page area and 16 margin boxes. The main content area of the page box is called the page area, and this is where the content is flowed into one or more pages. The margin area of the page box is divided into 16 margin boxes (see Figure B below right), each with its own margin, border, padding, and content areas as well. They are used to display running headers and footers, and other aside content.

The properties of a page box are determined by any properties that are declared within the page content and the declaration block of the @page rule, which is the first step to setting up the print page structure. The @page element defines the basic settings such as page size, margins, headers, and footers.

The code snippet below is one example that sets the page box size to 5 ½ inches by 8 ½ inches with 10% margins:

@page {
        size: 5.5in 8.5in;
        margin: 10%;
}

The options for page size can also be specified using common media names from the Media Standardized Names (PDF) such as A5, A4, A3, B5, B4, letter, legal, ledger, and they can be used in conjunction with orientations such as landscape or portrait, as in the next code snippet example:

@page {
        size: A4 landscape;
        margin: 10%;
}
Figure C below illustrates a print preview of a sample web page, which uses the @page snippet below:
@page {
        size: letter;
        margin: 5%; {
}

And, with the size set to ledger, the code snippet below results in the print preview displayed in Figure D.
@page {
        size: ledger;
        margin: 5%;
}

You can also use media queries with the @page rule. With an @media print type you can specify a style for Letter printing with a 1-inch margin, as shown in this code snippet:

@media print and (width: 8.5in) and (height: 11in) {
    @page {
        margin: 1in;
    }
 }

Note that you may use as many media queries as you would like in the CSS code; furthermore, you can also use the and operator to require multiple queries to be true, but you have to use a comma (,) then the or operator to separate groups of multiple queries; the not keyword can also be used to modify the logic as well.

The next segment on paged and print media will dive deeper into the Paged Media Module specification rules and how they can be utilized with your web pages and documents.

About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

3 comments
seth2011
seth2011

browser reports errors and crashes

sales
sales

Which browsers are supported?