Printer Friendly Posts for Blogger Made Easy! (Update)

UPDATE 4 NOV 2018: Oh web standards, you constantly moving target. You know how it goes. Some elements of this original doc have since been depreciated so I took ‘em out. I added some more code snippets and updated the info with today’s standards.

---

A long time ago I asked Blogger to expand the pageType attribute to enable printer friendly pages. Turns out there was never any need for that. The secret’s been hiding in CSS all along! Let’s jump right into it.

See also: The Complete Guide to All Blogger Page Types (2019)

Media Types

Media Types allow you to fine-tune how your content will be presented in different media. Using media types means you don't have to code a different version of the page for every given situation. Not having to do so means you're less likely to run into duplicate content issues. Media types have been around for a long time so most user agents support them.

Note: These are slowly getting depreciated as time goes on.

Available Media Types

all

Used for all media type devices.

print

Used for printers.

screen

Used for computer screens, tablets, smart-phones etc.

speech

Used for screenreaders that "read" the page out loud.

Specifying Media Types

There are four ways to specify the media type. However, one of them doesn't work correctly in IE and Microsoft doesn’t plan on fixing it. So, uh, forget I said four. Three! There are three ways to specify the media type.

Method #1: Include the media attribute when you link to external style sheets.

<link rel="stylesheet" type="text/css" media="projection" href="fluffle.css">
<link rel="stylesheet" type="text/css" media="braille, speech" href="pooner.css">

Method #2: Include the media attribute in a style element.

<style type="text/css" media="handheld, screen, tv">
/* only applies to handheld, screen, and tv */
</style>

<style type="text/css" media="speech">
/* only applies to speech */
</style>

Method #3: Add @media rules to your style sheets.

@media print {
  /* stuff */}
@media tv, print {
  /* more stuff */}

Paged Media

The print type is known as paged media. Paged media sections the document into one or more discrete pages. Custom page breaks can be added to the document with CSS but support for it across major layout engines is very basic. There are multiple CSS properties, and values to go with them, but I’m only going to highlight the few with the most compatibility. And also, we don’t need that many to get the job done. If you ask me the whole paged media thing is overly engineered!

So yeah, the following properties work in most browsers as of this writing.

CSS Property: page-break-before

Name:	page-break-before
Values:	auto, always, avoid
Usage:	Add a page-break before a specified element.

CSS Property: page-break-after

Name:	page-break-after
Values:	auto, always, avoid
Usage:	Add a page-break after a specified element.

CSS Property: page-break-inside

Name:	page-break-inside
Values:	auto, avoid
Usage:	Sets whether a page-break should be avoided inside a specified element.

Property Values

auto

Neither force nor forbid a page break before (or after, or inside) the generated box.

always

Always force a page break before (or after, or inside) the generated box

avoid

Avoid page-break inside the element (if possible).

Here the page breaks before any element with an id of comments.

@media print { #comments { page-break-before: always; } }

By the way, it’s not necessary to use the @media rule.

h1 { page-break-after: avoid; }

This code ensures your tables remain intact.

table { page-break-inside: avoid; }

Print Media and Hyperlinks

Make the URLs of your hyperlinks visible in print media. Let's examine the following rule set from MY STADY.

.post-body a:link:after, .post-body a:visited:after, #related_posts a:after {
  font-size: .85em;
  content: " ["attr(href)"]";
}

This rule set is only applied to hyperlinks inside the post-body (blog entries) and related_posts (links to related entries) selectors because they are the only selectors with unique content. The ':link' and ':visited' pseudo-classes ensure we don't select hyperlinks that don't have an href attribute. The href attribute is always present in related_posts so I omit the pseudo-classes. The :after pseudo-element is used in combination with the content property to verbose the hyperlinks and generate the square brackets surrounding them. The font-size property helps reduce the offset in width from verbose hyperlinks but not by much.

Troubleshooting

If you don't see all your pages in Print > Preview then add this rule set to your print media style sheets.

* { float: none !important; overflow: visible !important; }

This is only intended for use in troubleshooting. I don't advise you to leave it that way. The W3C doesn't have a recommendation for how to handle content outside the page box so all user agents approach this problem differently.

Final Thoughts

I'm surprised Blogger doesn't do this for you. There's a rule set for “handheld” media types in blog_controls.css but that's about it. Don't interpret this as a complaint, I like having control over my layouts!

I suggest writing your new CSS code to an external file so that it only loads when your user needs to print a web page.

Changelog

Nov-4 2018

• Updated with newer standards.

• Removed depreciated information.

• More code examples.

Oct-16 2009

• Initial Release.