Difference between revisions of "Courses/Design & Technique-Essential Web Design/CSS4print"

From Publication Station
Line 72: Line 72:
For print:
For print:
<source lang="css">
<source lang="css">
  @media print {   
  @media print {
     img { width: 300px}
    body {font-size: 12pt;}  
     img { width: 300px;}
  }
  }
</source>
</source>
Line 80: Line 81:
<source lang="css">
<source lang="css">
  @media screen {   
  @media screen {   
     img { width: 800px}
    body {font-size: 14pt;} 
     img { width: 800px;}
  }
  }
</source>
</source>
Line 87: Line 89:
<source lang="css">
<source lang="css">
  @media print {   
  @media print {   
     img { width: 200px}
    body {font-size: 10pt;} 
     img { width: 200px;}
  }
  }
</source>
</source>

Revision as of 12:32, 5 October 2015

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

@media print

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