CSS for printable websites.
It's safe to say that the majority of today's websites are not designed to be printed. Web pages usually look terrible when printed - bad design, often with no consideration for printer page layout - render with excessive white space, item wrapping across multiple pages, and general malformation of output, causing the printed output to generate multiple pages of unusable paper. It's bad for your wallet and it's bad for your brand.
This is somewhat confusing as a website is after all a marketing medium - it's an advertisement of your brand, and it's content the value that brand represents. How often do you come across a cooking recipe that you want to save for later, or a gadget that you want to print to study up on later, or show to a friend... or a store clerk. Or a news article that your want to keep.
Modern web browsers can render the same content in different ways depending on screen size - this is called responsive web design. This is achieved by utilizing CSS' @media rule (known as a media query). But the media query also supports rendering content for printing differently.
Print-Ready is a CSS file that web developers can include into their websites to enable for a print ready pages. With it's styles in a set of classes and standard HTML tag overrides, designers can optimize the printing process, as well as make the printed pages easier to read.
It is then up to the web developer to clean and format web pages for a perfect print experience - removing ads, navigation and other web page junk, so you save paper and ink when you print.
(Remember that this CSS should always be included last, so that the other styles can be overwritten.)
Print-Ready by default hides the visibility of items that have no place on a printed page - one cannot "press" a button on a piece of paper after all.
Navigation tags are always hidden, including:
<button>
- General buttons<input type="submit">
- Form Submit button<input type="reset">
- Form Reset button<input type="button">
- Form buttons<nav>
- HTML5 Navigationβ groups, like menus and side navigation bars.
Modified print behavior of HTML anchors by appending the actual URL to the end of the link text, e.g.
<a href="your url here">Location Name</a>
Prints as:
Location Name < your url here >
... follow the <abbr title="Uniform Resource Locator">URL</abbr> here ...
Prints as:
... follow the URL (Uniform Resource Locator) here ...
Print-Ready also adds a few classes that enables web developers to hide (or show) groupings of content that make sense to not print. As a general rule of thumb, one would exclude in printing the following:
-
Navigational links, like menu bars, side menus etc, document paging and pagination.
- Ask yourself: Does this content only exist to send the browser user to another location? - then hide it.
- In HTML 5 it is recommended to encapsulate this content in a
<nav>
tag - these are already hidden.
-
Embedded content, like videos.
- A standard 80gsm photocopy paper cannot play video (as far as I know). Provide a link URL in a print only span if you must.
-
Advertising or banner ads.
- This is maybe a tricky topic (because ads are both navigational and
informative), but ask yourself:
- Is this someone else's ad? - then hide it. (You'll not get paid for printed impressions.)
- Is this ad yours, but time limited, like 'specials'? - the hide it. (The prints will last far longer that your special and may not be relevant when next read.)
- Is the ad yours, and the content relevant for the context of the page, and doesn't display text like "click here" or "find out more"? - then include it.
- This is maybe a tricky topic (because ads are both navigational and
informative), but ask yourself:
-
As a general rule, people choose to print only when they need the content - the main content that is. A sites "feel" is not relative, so things that shape and style the website are irrelavant. Branding is - so a logo, or a link to your site is important. If you focus on printing relevant content only you're on a winner.
There is a generic version of the CSS located at
/html/css/print-ready.css
in this project.
-
Usage:
<div class="noprint"> Content </div>
Will hide the content when printed.
-
Aliases are
.dont-print
&.hidden-print
-
Usage:
<div class=".noscreen"> Content </div>
Will hide the content when displayed on a screen, but will print it.
-
Alias is
.hidden-screen
Print-Ready supports a few popular CSS frameworks, including:
Included in Print-Ready are the Bootstrap add-on stylesheets.
print-ready/
βββ twbs-bootstrap-3/
βββ css/
βββ bootstrap-pr.css
βββ bootstrap-pr.css.map
βββ bootstrap-pr.min.css
Add the appropriate bootstrap-pr
CSS file in your webpage or template engine:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href=".../bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href=".../bootstrap-theme.min.css">
<!-- Print Ready -->
<!-- (Do not include media="print", Print-Ready is media="all") -->
<link rel="stylesheet" href="css/bootstrap-pr.min.css">
β The print ready CSS must be declared after the Bootstrap CSS as it overrides select behavior.
Bootstrap 3 is built on Less, thus so is Print-Ready. The Less source is included:
print-ready/
βββ html/
| βββ scss/
| βββ _printer-ready.scss
| βββ _screen-ready.scss
βββ twbs-bootstrap-3/
βββ less/
| βββ bootstrap-pr.less
| βββ lib/
| βββ {Contains selected files from the Bootstrap project}
βββ test-page.htm
βΉ You will need lesscβ installed to compile with
the included make.sh
OSX Terminal shell script.
βΉ The primary sources are SCSS files, but contain no SASS specific items and can thus compile as Less.
Both container classes are made fluid. i.e. there is no fixed width from the print.
Using a set of col-pr-*
classes, you can create an override grid system that
creates a page layout to house your content.
There is also a col-pr-0
class that hides the content from printing.
Usage:
<div class="row">
<div class="col-xs-12 col-sm-5 col-md-4 col-lg-3 col-pr-0 sidebar">
.col-xs-12 .col-sm-5 .col-md-4 .col-lg-3 .col-pr-0 .sidebar
(Will be hidden when printed.)
</div>
<div class="col-xs-12 col-sm-7 col-md-8 col-lg-9 col-pr-12 main">
.col-xs-12 .col-sm-7 .col-md-8 .col-lg-9 .col-pr-12 .main
</div>
</div>
β The .col-pr-*
class declaration must appear after the standard
.col-*-*
classes as it overrides select behavior.
βΉ .col-pr-pull-*
, .col-pr-push-*
and .col-pr-offset-*
classes are
also provided, including their .col-pr-*-0
variants.
.hidden-pr
class
To hide selected content use the .hidden-pr
(or Bootstrap's own
.hidden-print
) class.
Usage:
<span class="hidden-pr">
This is an advertisement
</span>
The following classes are also overridden to be hidden on printing:
div.alert
- alerts are visual cues for warnings or information, not sure if we need to print thoes.breadcrumb
- navigational.btn
- navigational.nav
- navigational.navbar
- navigational.nav-tabs
- navigational.carousel
- not sure how to print each carousel page, or whether one should.
Mostly the same as for Bootstrap 3, with a few changes in the stylesheets, including:
print-ready/
βββ twbs-bootstrap-4/
βββ css/
βββ bootstrap-pr.css
βββ bootstrap-pr.css.map
βββ bootstrap-pr.min.css
print-ready/
βββ html/
| βββ scss/
| βββ _printer-ready.scss
| βββ _screen-ready.scss
βββ twbs-bootstrap-4/
βββ scss/
| βββ bootstrap-pr.scss
| βββ lib/
| βββ {Contains selected files from the Bootstrap [v4-dev] project}
βββ test-page.htm
βΉ You will need compassβ installed to compile
with the included make.sh
OSX Terminal shell script.
In Bootstrap 4 the grid positional classes have been renamed to
.pull-pr-*
, .push-pr-*
and .offset-pr-*
, including .*-pr-0
variants.
- Zurb Foundation 6 πβ
- HTML5 Boilerplate (already has printer support)
- Skeleton
- PureCSS
Copyright 2016 Vino Rodrigues
-> Made with β₯ by @vinorodβ <-