CSS for print tutorial: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
m (→‎Page breaks: thanx to Oliver Borchert)
 
(25 intermediate revisions by the same user not shown)
Line 1: Line 1:
{{stub}}
{{Incomplete}}
{{under construction}}
{{Web technology tutorial|Beginners}}
{{Web technology tutorial|Beginners}}
<pageby nominor="false" comments="false"/>
<!-- <pageby nominor="false" comments="false"/> -->


== Introduction ==
== Introduction ==
[http://www.w3.org/TR/CSS21/page.html CSS 2.1] includes a few properties and an @-rule that allows for better printing. In this short tutorial we shall introduce most of that. CSS3, under the name of [http://www.w3.org/TR/css3-page/ CSS Paged Media Module Level 3] includes much more sophisticated features for creating print documents. So far, these are not introduced in this text.


<div class="tut_goals">
<div class="tut_goals">
Line 27: Line 28:
</div>
</div>


== Linking stylesheet for printing ==
== Linking styles for printing ==


As explained in the [[CSS media and alternative style sheets tutorial]], there are three ways for defining alternative styles:
As explained in the [[CSS media and alternative style sheets tutorial]], there are three ways for defining alternative styles:
Line 46: Line 47:


'''(2) Define an alternative stylesheet in the HTML'''
'''(2) Define an alternative stylesheet in the HTML'''
 
: Most web designs probably prefer this solution.
<source lang="XML">
<source lang="XML">
<link rel="stylesheet" href="print-style.css" type="text/css" media="print" />
<link rel="stylesheet" href="print-style.css" type="text/css" media="print" />
Line 52: Line 53:


'''(3) Define an alternative stylesheet in the CSS'''
'''(3) Define an alternative stylesheet in the CSS'''
:The @import at-rule allows to specify a media type, i.e. you may use this strategy to load various CSS variants from a single CSS file or within a HTML script section.


The @import at-rule allows to specify a media type, i.e. you may use this strategy to load various CSS variants from a single CSS file or within a HTML script section.
:Inside a CSS file:
 
Inside a CSS file:
<source lang="CSS">
<source lang="CSS">
@import url(print-style.css) print;
@import url(print-style.css) print;
</source>
</source>


Inside an HTML file
:Inside an HTML file
<source lang="XML">
<source lang="XML">
<style type="text/css">
<style type="text/css">
Line 67: Line 67:
</source>
</source>


== Adapt style for printing ==
== Adapt styles for printing (minimal solution) ==


Most often, you will have to do the following:
Most often, you will have to do the following:


(1) Remove unwanted items, e.g.
'''(1) Remove unwanted items''', e.g.
<source lang="CSS">
<source lang="CSS">
  #navigation, .do-not-print, #menu {display:none}
  #navigation, .do-not-print, #menu {display:none}
</source>
</source>
Of course, you will have to adapt this to your CSS. ''#navigation'' is an example of an element ID and ''.do-not-print'' and example of a class.  
: Of course, you will have to adapt this to your CSS. ''#navigation'' is an example of an element ID and ''.do-not-print'' an example of a class.  


(2) Contents should not float in general and width should be 100% or auto
'''(2) Contents should not float and width should be set to 100% or auto'''
* Remove '':floats''
* Set ''width'''s back to 100%


(3) Contrasts should be optimized for a printer. E.g. text should be black and the background should be white, or at least print ok on a printer with grey levels.
'''(3) Contrasts should be optimized for a printer.'''


Simple minimal example taken from [http://alistapart.com/article/goingtoprint/ CSS Design: Going to Print] by Eric Meyer, May 2002:
: E.g. text should be black and the background should be white, or at least print ok on a printer with grey levels.
 
'''Simple minimalistic example'''
 
Taken from [http://alistapart.com/article/goingtoprint/ CSS Design: Going to Print] by Eric Meyer, May 2002:
<source lang="CSS">
<source lang="CSS">
body { background: white; }
body { background: white; }
Line 95: Line 101:
  }
  }
</source>
</source>
In addition, you could print out URLs like this:
<source lang="CSS">
a[href^="http://"]:after, a[href^="ftp://"]:after {
  content: " (" attr(href) ")";
  color: blue;
  font-size: small;
}
</source>
== Using CSS 2.1 pagination ==
=== @Page rule ===
Instead of defining margins, you can use the @page directive. {{quotation|Authors can specify the margins of a page box inside an @page rule. An @page rule consists of the keyword "@page", followed by an optional page selector, followed by a block containing declarations and at-rules. Comments and white space are allowed, but optional, between the @page token and the page selector and between the page selector and the block. The declarations in an @page rule are said to be in the page context.}} ([http://www.w3.org/TR/CSS21/page.html#page-box Paged media], CSS 2.1 Specification]
The ''@page'' rule takes an optional pseudo-selector for first, left, and right pages. You then can define margins. However, you can't use px and pt's since these are useless units for a printer. Examples:
<source lang="CSS">
/* Default left, right, top, bottom margin is 2cm */
@page { margin: 2cm }
/* First page, 10 cm margin on top */
@page :first {
  margin-top: 10cm;
}
/* Left pages, a wider margin on the left */
@page :left {
  margin-left: 3cm;
  margin-right: 2cm;
}
@page :right {
  margin-left: 2cm;
  margin-right: 3cm;
}
</source>
=== Page breaks ===
You should specify when page breaks '''must occur''' and when they '''should not occur'''.  Modern browsers implement three CSS constructs: ''page-break-before, page-break-after, page-break-inside'', ''orphans'' and ''widows''.
* ''page-break-before'' and ''page-break-after'' take the following values: ''auto, always, avoid, left, right and inherit''
* ''page-break-inside'' can be ''avoid, auto or inherit''
* ''orphans'' and ''widows'', is a number (e.g. 2)
Note that these are recommendations, i.e. a browser generating the print document should but does not need to use these heuristics:
* Break as few times as possible.
* Make all pages that do not end with a forced break appear to have about the same height.
* Avoid breaking inside a replaced element.
Below are some typical use cases.
; page-break-before
: defines if page breaks should occur before the tag, typically titles
: Example
<source lang="CSS">
section {page-break-before: always;}
h1 {page-break-before: always;}
</source>
; page-break-after
: defines if page breaks should occur after a tag
<source lang="CSS">
section {page-break-after: always;}
h1 {page-break-after: avoid;}
</source>
; page-break-inside
: defines if page breaks should occur inside an element.
<source lang="CSS">
p {page-break-inside: avoid;}
</source>
;orphans and widows
:CSS 2.1 also allows to specify what happens with ''orphans'' and ''widows''. {{quotation|The 'orphans' property specifies the minimum number of lines in a block container that must be left at the bottom of a page. The 'widows' property specifies the minimum number of lines in a block container that must be left at the top of a page. Examples of how they are used to control page breaks are given below.}} ([http://www.w3.org/TR/CSS21/page.html#break-inside from the specs]
:Example
<source lang="CSS">
p {orphans:3; widows:2;}
</source>
== CSS3 Multiple columns ==
While multiple columns ''can'' make sense on web page styles that aim at larger screens - in the [[CSS media and alternative style sheets tutorial‎‎]] we explain how to target wide screen areas- it makes a lot of sense when printing on A4 or US letter paper. CSS3, in the [http://www.w3.org/TR/css3-multicol/ CSS Multi-column Layout Module] offers the possibility to define multiple columns in a quite flexible way.
Details need to be written, search for a tutorial on the web or see the specification ...
Example code:
<source lang="CSS">
body {
    column-count: 2;
    column-gap: 2em;
    column-rule: thin solid black;
}
/* This would create an h1 title that spans across the page */
h1 {
  column-span: all
  break-before: column;
  break-inside: avoid-column;
  break-after: avoid-column;
}
</source>
Support for this module, is so far quite bad. However, experimental proprietary extensions do work as of spring 2013, e.g.
<source lang="CSS">
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
</source>
== Simple example ==
Print this or better just "preview print" in order to see the stylesheet effect.
* http://tecfa.unige.ch/guides/css/ex/just-so-stories-print.html
* http://tecfa.unige.ch/guides/css/ex/just-so-stories-print.css
Highlights from the HTML code:
<source lang="XML">
<link rel="stylesheet" href="just-so-stories.css" type="text/css">
<link rel="stylesheet" href="just-so-stories-print.css" type="text/css" media="print">
.........
<p class="noprint"><a href="#copyright">Copyright information</a></p>
.........
<h2 class="noprint">Copyright Information</h2>
</source>
"Highlights" from the print CSS:
<source lang="CSS">
/* ------- Pagination */
h1, h2 {
    page-break-after: avoid;
    page-break-before: always;
}
p {
      orphans:3;
      widows:3;
}
.noprint, pre.copyright {
    display:none;
}
</source>
Disclaimer: Rendering of this example could be improved in many ways. I just teach some CSS, I don't do websites :) - [[User:Daniel K. Schneider|Daniel K. Schneider]] ([[User talk:Daniel K. Schneider|talk]]) 19:00, 6 May 2013 (CEST)
== Links ==
; Specifications
* [http://www.w3.org/TR/CSS21/page.html Paged media] Chapter 13 for CSS 2.1. This should work with all modern browsers as of 2013.
* [http://www.w3.org/TR/css3-page/ CSS Paged Media Module Level 3], W3C Working Draft 14 March 2013 (as of May 2013). May not work well in current browsers since this is not standard yet.
* [http://www.w3.org/TR/css-print/ CSS Print Profile], W3C Working Group Note 14 March 2013 (as of May 2013). Quote: {{quotation| This specification defines a subset of Cascading Style Sheets Level 2, revision 1 [CSS21] and CSS Paged Media Level 3 [PAGEMEDIA] for printing to low-cost devices. It is designed for printing in situations where it is not feasible or desirable to install a printer-specific driver, and for situations were some variability in the output is acceptable.}}
* [http://www.w3.org/TR/css3-multicol/ CSS Multi-column Layout Module], W3C Candidate Recommendation 12 April 2011 as of May 2013. Should work fairly well in all browsers. However, you may have to use browser-specific property names since this is not a standard yet.
; Other tutorials
* [http://alistapart.com/article/goingtoprint/ CSS Design: Going to Print], by Eric Meyer, A list Apart, May 10, 2002
* [http://www.onextrapixel.com/2009/05/05/how-to-create-a-simple-print-css-for-your-site/ How To Create A Simple Print CSS For Your Site] May 5th, 2009 by Terrance
* [http://www.webcredible.co.uk/user-friendly-resources/css/print-stylesheet.shtml Print stylesheet - the definitive guide], by Paul Paul McCarthy], undated.
* [http://www.transmissionzero.co.uk/computing/css-for-printing/ CSS for Printed Media], Transmission Zero, undated.
* [http://designm.ag/tutorials/how-to-properly-design-a-print-css-stylesheet/ How to Properly Design a Print CSS Stylesheet] by Jake Rocheleau, December 29, 2011
[[Category:CSS]]

Latest revision as of 16:33, 16 February 2018

Introduction

CSS 2.1 includes a few properties and an @-rule that allows for better printing. In this short tutorial we shall introduce most of that. CSS3, under the name of CSS Paged Media Module Level 3 includes much more sophisticated features for creating print documents. So far, these are not introduced in this text.

Learning goals
  • Be able to style text-centric HTML pages (e.g. articles, tutorials, novels)
Prerequisites
Level and target population
  • Beginners
Teaching materials
Remarks
  • This tutorial is intended for students in educational technology or any other field that is technology intensive. For people who need less, there exist many easy CSS tutorials on the web. This text is intended for students who also must learn principles and who are willing to learn CSS by doing a project, looking at CSS code and online reference manuals.
  • Ideally, a teacher also should assign a text formatting task, during or before assigning this tutorial for reading).

Linking styles for printing

As explained in the CSS media and alternative style sheets tutorial, there are three ways for defining alternative styles:

(1) Use @media rules in a stylesheet

@media print body {
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-size: 1em;
	color: #333333;
	margin-top: 2cm;
	margin-right: 2cm;
	margin-bottom: 1.5cm;
	margin-left: 2cm
        }

(2) Define an alternative stylesheet in the HTML

Most web designs probably prefer this solution.
<link rel="stylesheet" href="print-style.css" type="text/css" media="print" />

(3) Define an alternative stylesheet in the CSS

The @import at-rule allows to specify a media type, i.e. you may use this strategy to load various CSS variants from a single CSS file or within a HTML script section.
Inside a CSS file:
@import url(print-style.css) print;
Inside an HTML file
<style type="text/css">
@import url(print-style.css) print;
</style>

Adapt styles for printing (minimal solution)

Most often, you will have to do the following:

(1) Remove unwanted items, e.g.

 #navigation, .do-not-print, #menu {display:none}
Of course, you will have to adapt this to your CSS. #navigation is an example of an element ID and .do-not-print an example of a class.

(2) Contents should not float and width should be set to 100% or auto

  • Remove :floats
  • Set width's back to 100%

(3) Contrasts should be optimized for a printer.

E.g. text should be black and the background should be white, or at least print ok on a printer with grey levels.

Simple minimalistic example

Taken from CSS Design: Going to Print by Eric Meyer, May 2002:

body { background: white; }

#menu { display: none; }
 
#wrapper, #content {
 width: auto;
 border: 0;
 margin: 0 5%;
 padding: 0;
 float: none !important;
 }

In addition, you could print out URLs like this:

a[href^="http://"]:after, a[href^="ftp://"]:after {
  content: " (" attr(href) ")";
  color: blue;
  font-size: small;
}

Using CSS 2.1 pagination

@Page rule

Instead of defining margins, you can use the @page directive. “Authors can specify the margins of a page box inside an @page rule. An @page rule consists of the keyword "@page", followed by an optional page selector, followed by a block containing declarations and at-rules. Comments and white space are allowed, but optional, between the @page token and the page selector and between the page selector and the block. The declarations in an @page rule are said to be in the page context.” (Paged media, CSS 2.1 Specification]

The @page rule takes an optional pseudo-selector for first, left, and right pages. You then can define margins. However, you can't use px and pt's since these are useless units for a printer. Examples:

/* Default left, right, top, bottom margin is 2cm */
@page { margin: 2cm } 

/* First page, 10 cm margin on top */
@page :first {
  margin-top: 10cm;
}

/* Left pages, a wider margin on the left */
@page :left {
  margin-left: 3cm;
  margin-right: 2cm;
}

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

Page breaks

You should specify when page breaks must occur and when they should not occur. Modern browsers implement three CSS constructs: page-break-before, page-break-after, page-break-inside, orphans and widows.

  • page-break-before and page-break-after take the following values: auto, always, avoid, left, right and inherit
  • page-break-inside can be avoid, auto or inherit
  • orphans and widows, is a number (e.g. 2)

Note that these are recommendations, i.e. a browser generating the print document should but does not need to use these heuristics:

  • Break as few times as possible.
  • Make all pages that do not end with a forced break appear to have about the same height.
  • Avoid breaking inside a replaced element.

Below are some typical use cases.

page-break-before
defines if page breaks should occur before the tag, typically titles
Example
 section {page-break-before: always;}
 h1 {page-break-before: always;}
page-break-after
defines if page breaks should occur after a tag
 section {page-break-after: always;}
 h1 {page-break-after: avoid;}
page-break-inside
defines if page breaks should occur inside an element.
 p {page-break-inside: avoid;}
orphans and widows
CSS 2.1 also allows to specify what happens with orphans and widows. “The 'orphans' property specifies the minimum number of lines in a block container that must be left at the bottom of a page. The 'widows' property specifies the minimum number of lines in a block container that must be left at the top of a page. Examples of how they are used to control page breaks are given below.” (from the specs
Example
 p {orphans:3; widows:2;}

CSS3 Multiple columns

While multiple columns can make sense on web page styles that aim at larger screens - in the CSS media and alternative style sheets tutorial‎‎ we explain how to target wide screen areas- it makes a lot of sense when printing on A4 or US letter paper. CSS3, in the CSS Multi-column Layout Module offers the possibility to define multiple columns in a quite flexible way.

Details need to be written, search for a tutorial on the web or see the specification ...

Example code:

body { 
     column-count: 2;
     column-gap: 2em;
     column-rule: thin solid black;
 }

/* This would create an h1 title that spans across the page */
h1 { 
  column-span: all 
  break-before: column; 
  break-inside: avoid-column; 
  break-after: avoid-column;
}

Support for this module, is so far quite bad. However, experimental proprietary extensions do work as of spring 2013, e.g.

-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */

Simple example

Print this or better just "preview print" in order to see the stylesheet effect.

Highlights from the HTML code:

<link rel="stylesheet" href="just-so-stories.css" type="text/css">
<link rel="stylesheet" href="just-so-stories-print.css" type="text/css" media="print">
.........
<p class="noprint"><a href="#copyright">Copyright information</a></p>
.........
<h2 class="noprint">Copyright Information</h2>

"Highlights" from the print CSS:

/* ------- Pagination */

h1, h2 {
    page-break-after: avoid;
    page-break-before: always;
}

p {
      orphans:3;
      widows:3;
}

.noprint, pre.copyright {
     display:none;
 }

Disclaimer: Rendering of this example could be improved in many ways. I just teach some CSS, I don't do websites :) - Daniel K. Schneider (talk) 19:00, 6 May 2013 (CEST)

Links

Specifications
  • Paged media Chapter 13 for CSS 2.1. This should work with all modern browsers as of 2013.
  • CSS Paged Media Module Level 3, W3C Working Draft 14 March 2013 (as of May 2013). May not work well in current browsers since this is not standard yet.
  • CSS Print Profile, W3C Working Group Note 14 March 2013 (as of May 2013). Quote: “This specification defines a subset of Cascading Style Sheets Level 2, revision 1 [CSS21] and CSS Paged Media Level 3 [PAGEMEDIA] for printing to low-cost devices. It is designed for printing in situations where it is not feasible or desirable to install a printer-specific driver, and for situations were some variability in the output is acceptable.”
  • CSS Multi-column Layout Module, W3C Candidate Recommendation 12 April 2011 as of May 2013. Should work fairly well in all browsers. However, you may have to use browser-specific property names since this is not a standard yet.
Other tutorials