Difference between revisions of "Courses/Design & Technique-Essential Web Design/CSS4print"
(→@media) |
(→@media) |
||
| 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
