Printer Friendly Blogger Posts Without Hacking, JavaScript

In January I proposed that Blogger add a print value to the pageType attribute. Doing so would allow us to design printer-friendly pages. It turns out we never needed a new pageType; the solution's been around since November 4, 1997. That's when the first Working Draft Specification for CSS2 was published and with it came Media Types.

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.

Available Media Types

all
Suitable for all devices.
braille
Intended for braille tactile feedback devices.
embossed
Intended for paged braille printers.
handheld
Intended for handheld devices (typically small screen, limited bandwidth).
print
Intended for paged material and for documents viewed on screen in print preview mode.
projection
Intended for projected presentations, for example projectors.
screen
Intended primarily for color computer screens.
speech
Intended for speech synthesizers.
tty
Intended for media using a fixed-pitch character grid (such as teletypes, terminals, or portable devices with limited display capabilities).
tv
Intended for television-type devices (low resolution, color, limited-scrollability screens, sound available).


Specifying Media Types


Media types can be specified in four ways, 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.

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">


Include the "media" attribute in a style element:

<style type="text/css" media="handheld, screen, tv">
/* even more stuff */
</style>
<style type="text/css" media="speech">
/* stuff is love */
</style>


Add @media rules to your style sheets:

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


Paged Media


The following media types are collectively known as paged media: embossed, handheld, print, projection, tv. Paged media split the document into one or more discrete pages. Custom page breaks can be added to the document with CSS but support for page breaks across major layout engines is poor. The following properties work in most browsers as of this writing.

Properties:
page-break-before
Sets the page-breaking behavior before an element.
page-break-after
Sets the page-breaking behavior after an element.


Values:
auto
Neither force nor forbid a page break before (after, inside) the generated box.
always
Always force a page break before (after) the generated box.


The page breaks before any element with an id of 'comments':

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

Note: It isn't not necessary to use the @media rule.

Print Media and Hyperlinks


Verbose your hyperlinks 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 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; }


The rule set above is only intended for use in troubleshooting, I don't propose you 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 the problem differently.

Final Thoughts


I'm surprised Blogger doesn't do this on it's own. 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, thank you! MY STADY's print media style sheet is still a work in progress. Eventually we'll be linking externally, it saves bandwidth.

Questions? Comments?

5 Comments

John - #
February 16, 2010 at 12:37 PM
I still don't understand why blogger makes some aspects of customization so difficult, I've always been more of a wordpress guy for this reason.
Alain-Christian - #
February 16, 2010 at 1:09 PM
If you're talking about free hosted Wordpress then that depends. Blogger trounces free free Wordpress when it comes to customization. It's not even a contest or a point of debate, Blogger gives you more Freedom.

When it comes to publishing options Free Hosted Wordpress has Blogger beat. But for how long? Blogger recently added pages. That's one less publishing feature that free hosted Wordpress has over Blogger.

If you're talking about self-hosted wordpress then that's not really fair. You could do anything you want. Just change the code as you see fit.

BTW over the weekend I added article thumbnails to the template. Most of the the Video posts now have auto generated thumbnails. This is important because before the pages took longer to load because they were all flash embeds. And it did it without JavaScript, just pure Blogger template code.

There are limitations to the Blogger Template System but I keep finding my ways around them. The biggest pain is having to nest conditional statements since there's no provisions for comparing two data tags to see if they're both "true" or "false".
HyperONIN - #
March 23, 2010 at 12:10 AM
what are the requirements of learning to customize my own blogger?
Alain-Christian - #
May 11, 2011 at 7:15 PM
Download the template you currently use from the dashboard. Examine it. Make changes and tweaks. Never stop iterating.

It helps to create a private blogspot to experiment with but eventually you outgrow the need to do that. If you're familiar with HTML already then modifying a blogger template won't be that different.

Sorry for late response!
Win Bet - #
March 13, 2016 at 6:19 AM
You Actually Make It Seem So Easy With Your Presentation But I Find This Matter To Be Actually Something Which I Think I Would Never Understand. It Seems Too Complex And Very Broad For Me. I Am Looking Forward For Your Next Post, I?ll Try To Get The Hang Of It! http://www.diobola.com/

Add a Comment