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

From Publication Station
Line 24: Line 24:
http://www.w3.org/TR/css3-page/#page-size
http://www.w3.org/TR/css3-page/#page-size


== page margins ==
== left and right @page ==
Pseudo-class selectors for the left and right pages
 
http://www.smashingmagazine.com/2015/01/designing-for-print-with-css/#left-and-right-page-spreads
http://www.smashingmagazine.com/2015/01/designing-for-print-with-css/#left-and-right-page-spreads


<source lang="css">
<source lang="css">
@page :left {
  margin-left: 3cm;
}</source>


 
@page :left { margin-right:3cm;
<source lang="css">
              margin-left:1cm;    }                                                                                       
@page :right {
@page :right { margin-left:3cm;
  margin-left: 4cm;
              margin-right:1cm;    }                        
}</source>
</source>


==specific pages ==
==specific pages ==

Revision as of 19:24, 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

left and right @page

Pseudo-class selectors for the left and right pages

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

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

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 queries

@media CSS rules or media queries defines specific contexts, under which CSS stylesheets that only apply to those contexts can be used.

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries 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 600px:

@media (max-width: 600px) { {  
    body {font-size: 10pt;}  
    img { width: 200px;}
 }

@media print

You can decide to style very differently you page when it is printed.

You can use it to explore how the way information is displayed influences its message.

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