Courses/Design & Technique-Essential Web Design/CSS4print

HTML to print

HTML to print allow you to create print layouts for your web pages.

You can create a PDF from you page, by print the page within the browser, and choose «Print to file».

CCS for print

Specific CSS rules allow you to specify how a webpage that was designed for screens, will be displayed in a page layout.

@page

@page rule defines context for printing.

It describes the characteristic of sheet where web page is going to be printed on.

@page property: size

Possible values size: A5, A4, A3, landscape, portrait

Note: Only Chromium's print preview can take the format specified by the CSS

@page {
size: A4 landscape;
}

http://www.w3.org/TR/css3-page/#page-size

• the margins
• orphans,
• widows,
• page breaks of the document.

https://developer.mozilla.org/en/docs/Web/CSS/@page

Important: choose the right page format ().

page-break-before page-break-after page-break-inside orphans widows

@media CSS at-rule

@media <media-query> {
  /* media-specific rules */
}