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

page margins

http://www.smashingmagazine.com/2015/01/designing-for-print-with-css/#left-and-right-page-spreads

@page :left {
  margin-left: 3cm;
}

@page :right {
  margin-left: 4cm;
}

specific pages

@page :first {

}

The :blank pseudo-class selector targets any page that is “intentionally left blank.” To add this text, we can use generated content that targets the top-center margin box.

@page :blank {
  @top-center { content: "This page is intentionally left blank." }
}

generated content

@page:right{ 
  @bottom-left {
    margin: 10pt 0 30pt 0;
    border-top: .25pt solid #666;
    content: "My book";
    font-size: 9pt;
    color: #333;
  }
}

@media

The @media CSS rule includes CSS styles that will be used only under specific context:

For print:

 @media print {
    body {font-size: 12pt;}  
    img { width: 300px;}
 }

For screen:

 @media screen {  
    body {font-size: 14pt;}  
    img { width: 800px;}
 }

For screens with width smaller than 800px:

 @media print {  
    body {font-size: 10pt;}  
    img { width: 200px;}
 }

This allows specific changes to be introduced to the different media from a page

page breaks of the document

http://www.smashingmagazine.com/2015/01/designing-for-print-with-css/#page-breaks

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