Going to Print – A Checklist Aside

You’ve seen them earlier than: hyperlinks that say “click on right here for printer-friendly model” or phrases to that impact. Each time you observe a kind of hyperlinks, you load a separate doc that presents precisely the identical info with a unique structure, and doubtless completely different markup.

Article Continues Under

Which means anyone (or a script) needed to take the unique doc and convert it to a stripped-down model that’s extra appropriate for print output. Possibly that anyone was even you.

Print type sheets to the rescue#section2

One of many fantastic issues about CSS is that it permits authors to create media-specific kinds for a single doc.  We’re fairly used to styling for the display, however fascinated by different media isn’t a behavior but.  And as all of the “printer-friendly” hyperlinks attest, our fascinated by the print medium has been restricted to recreating a doc differently.

Why trouble, when the ability to supply your readers a greater view of your materials in print isn’t any additional away than a well-structured doc and a media-specific type sheet?

You possibly can take any (X)HTML doc and easily type it for print, with out having to the touch the markup.  Worries about model skew between the net and print variations instantly turn out to be a factor of the previous.  Better of all, it’s easy to do. (For extra info on the fundamental ideas concerned in creating media-specific stylesheets on the whole and print kinds specifically, see “Print Completely different” at meyerweb.com.)

Let’s have a look at how A Checklist Aside obtained some new print kinds that danced round a browser bug and, ultimately, made the printed output look significantly better.

Fixing a float flub#section3

As you may see by visiting Bugzilla entry #104040, Gecko-based browsers like Netscape 6.x or Mozilla have an issue with printing lengthy floated components.  If a floated ingredient runs previous the underside of a printed web page, the remainder of the float will successfully disappear, because it received’t be printed on the following web page.

In case you have a web site styled like A Checklist Aside, and your complete article content material is contained in a single massive float, then which means readers will solely get the primary web page of the article.

The repair, because it seems, is to un-float the content material when the web page is printed.  Merely put, all you must do is assign any giant floated ingredient to have float: none.  Doing this returns the floated ingredient to the “regular movement” of the doc, which is printed as you may anticipate, a web page at a time till the top of the doc.

In order that’s what I beneficial Zeldman do for ALA, and as soon as he did, the printing drawback was solved.  Gecko-based browsers nonetheless have the bug (as of this writing), however at the least it’s one thing that may simply be labored round.

Right here’s the print-medium type sheet that A Checklist Aside was utilizing as soon as the float bug was cleared away:

#thực đơn { 
	show: none; 
} 

#wrapper, 
#content material { 
	width: auto; 
	border: 0; 
	margin: 0 5%; 
	padding: 0; 
	float: none !essential; 
}

It’s an excellent begin.  This type sheet removes the right-side thực đơn fully from the doc, so it isn’t printed (show: none;), and resets the margins and padding of the article’s content material in order that the textual content will movement from one facet of every web page’s printable space to the opposite.

The issue, as I noticed it, was that too most of the kinds meant for the display had been leaking via to the print.

If we have a look at the head of a latest ALA article, we discover (amongst a whole lot of different stuff) the next traces:

<type sort="textual content/css" media="all"> @import "nucss2.css";</type>
<hyperlink rel="stylesheet" sort="textual content/css" media="print" href="https://alistapart.com/article/goingtoprint/print.css" />

We now have a mode sheet, print.css, which has been restricted to the print medium with the usage of the attribute media.  The type sheet nucss2.css, which is being imported with the intention to conceal it from Navigator 4.x, will likely be utilized in all media the person agent helps.  That’s display, print, projection, aural—you title it.  Except we’re cautious, we might find yourself with background colours and pixel-based font sizes in our printed output.

Is that this a tragedy?  No, however most browsers are configured to not print backgrounds; and pixel-based fonts, whereas good for display media, should not so helpful in print media.

So let’s do one thing about these and some different structure points.

Whitewashed backgrounds#section5

A whole lot of background colours get utilized to issues within the right-hand sidebar. Since that’s dropped for print, we don’t have to fret about altering something throughout the sidebar. This removes quite a few potential complications instantly.

Since printers don’t print white, we need to set the web page’s background to be white.  We additionally need to take away any background photos which may have leaked in.

If we merely use the property background, we are able to accomplish each duties with a single worth.  As a way to go away ourselves slightly flexibility, we’ll set the physique background to be white, and the content material and wrapper components to have a clear background (thus letting the web page’s white shine via):

physique { 
	background: white; 
} 

#thực đơn { 
	show: none; 
} 

#wrapper, 
#content material { 
	width: auto; margin: 0 5%; 
	padding: 0; 
	border: 0; 
	float: none !essential; 
	colour: black; 
	background: clear; 
}

Setting the foreground colour to go along with the background colours wasn’t completely vital, nevertheless it’s all the time a good suggestion.  Now we’ve two non-floated components (#wrapper, #content material) with no seen background, and a web page with a white background.

You is perhaps fearful that Navigator 4.x does horrible issues with the worth clear, however be of excellent cheer: NN4.x solely pays consideration to type sheets which have a media worth of display.  Similar to with @import, the kinds in our print type sheet are eternally hidden from Navigator 4’s rheumy eyes.  So no worries there.

Sizing the font for print#section6

The all-media type sheet is sizing our printed textual content to be 11px tall, which looks as if a poor alternative.  The font household (Georgia to start out, and serif fonts thereafter) is ok for print, the place serif fonts are normally most well-liked.  Solely the dimensions wants a change. Thus:

physique { 
	background: white; 
	font-size: 12pt; 
}

“Wait!” you’re most likely exclaiming.  “Heretic! Everybody is aware of factors are evil!  Todd Fahrner mentioned so!”

Properly, sure, he did, and he was totally appropriate—for display media, factors are a horrible alternative.  In print, factors make simply as a lot sense as they’ve for many years now.  Since we are styling for print, setting our physique font dimension to 12 factors is definitely an excellent factor.

You possibly can after all choose any dimension you want, however 12 factors is a quite common dimension.  And since Zeldman’s all-media kinds dimension components within the article content material in relation to the physique, we’re all set there.

The prevailing kinds for the wrapper and content material divs units their left and proper margins to be 5%.  That implies that there will likely be “clean house” to both facet of the article, and every clean space will likely be 10% the width of the web page’s printable space.  That’s as a result of the content material div is contained in the wrapper, and each has 5% on both sides.  Add ’em up and also you get 10%.

The unique all-media kinds set a 15% proper padding on the content material div.  The margins already give us 10%, so we simply want an additional 5%.  That’s simple sufficient to do:

div#content material { 
	margin-left: 10%;
}

Another choice would have been to depart the margin alone and provides the left padding a worth of 5%.  For the reason that content material div doesn’t have a visual background, both method ought to have the identical impact.

Sadly, some browsers have bother dealing with padding appropriately, so it’s at present a greater concept to maneuver issues round with margins at any time when attainable.

One tough query was what to do about hyperlinks.  Clearly they aren’t going to be as helpful in print as they’re onscreen, nevertheless it’s usually essential to supply some clue that there have been hyperlinks within the authentic.  So right here’s what I devised:

a:hyperlink, 
a:visited { 
	colour: #520; 
	background: clear; 
	font-weight: daring; 
	text-decoration: underline; 
}

This provides the hyperlinks a colour darkish sufficient to be near black in grayscale output, whereas nonetheless utilizing a darkish crimson that can present up on a colour printout. The boldfacing and underlining make sure that the textual content of the hyperlinks will stand out.

In a completely CSS2-conformant browser, we are able to parenthetically insert the URLs of the hyperlinks after each, thus making them pretty helpful to anybody who has a replica of the printout and an online browser useful.  Right here’s the rule, which restricts this impact to the “content material” div and thus avoids sticking a URL within the masthead:

#content material a:hyperlink:after, 
#content material a:visited:after { 
	content material: " (" attr(href) ") "; 
	font-size: 90%; 
}

Attempt it out in a Gecko-based browser, like Mozilla or Netscape 6.x.  After each hyperlink within the printout, it is best to see the URL of the hyperlink in parentheses.

In any browser that doesn’t perceive the rule, there must be no sick results—the hyperlinks will nonetheless be darkish crimson, underlined, and boldfaced.  They simply received’t have a URL seem after the textual content of the hyperlink, that’s all.

Notice that the areas earlier than and after the parentheses are literally a part of the rule above—the areas have to look within the rule with the intention to be inserted into the doc.

There may be one aesthetic drawback with this new rule, exactly as a result of it causes the worth of a hyperlink’s href attribute to be inserted into the doc verbatim.

If we have a look at the code of ALA pages, we’ll shortly discover there are a whole lot of “rooted” URLs like /points/144.  These will likely be dropped into the doc precisely as they’re, which makes them much less helpful than in the event that they had been displayed as an absolute URL.

Because it occurs, the CSS3 selectors draft gives us an out.  Any attribute selector that makes use of the operator ^= selects components primarily based on the start of their attribute values.  Thus we are able to choose any href that begins with a slash and insert sufficient textual content to fill out the worth.

#content material a[href^="/"]:after { 
	content material: " (http://www.alistapart.com" attr(href) ") "; 
}

This rule transforms a worth like /points/144/ into http://www.alistapart.com/points/144/.  It received’t assist with relative URLs that don’t begin with slashes, however happily ALA doesn’t use these sorts of URLs.

!IMPORTANT: As talked about, ^= is a CSS3 selector. The W3C CSS validator can solely take a look at for compliance with CSS1 and CSS2. Unable to grasp the CSS3 selector, the W3C validator will report it as an error, despite the fact that it’s completely legitimate per the CSS3 Selectors Candidate Suggestion.

Extending the masthead#section9

In doing a remaining overview of the print kinds, I spotted that the masthead of the location bugged me.  It wasn’t that it existed a lot because it had an “underline” as a part of the graphic.  That line, after all, ended with the sting of the graphic.  It occurred to me that it might be attainable to tug slightly sleight-of-hand and make the road prolong to the width of the article textual content.

Step one was to offer the content material div a prime border that was, just like the underline within the graphic, a stable one-pixel darkish crimson line. Since I used to be going to create a visual prime border for the content material, it additionally appeared a good suggestion to insert some padding between the border on the content material.

div#content material { 
	margin-left: 10%; 
	padding-top: 1em; 
	border-top: 1px stable #930; 
}

By itself, that will draw a line simply beneath the masthead graphic.  It seems that mentioned graphic is wrapped in a div ingredient all by itself, so the underside margin of that div is used to tug the remainder of the content material up into itself.

div#mast { 
	margin-bottom: -8px; 
}

div#mast img { 
	vertical-align: backside; 
}

These easy guidelines trigger the content material div’s prime border to line up with the underline within the masthead graphic.  The border is definitely overlaying the graphic, however for the reason that colours match it’s tough (if not not possible) to appreciate that’s what is going on.  Even when a browser determined to place the graphic on prime of the content material’s prime border, the graphic and border would nonetheless line up and create the phantasm.

The second rule proven, the one with vertical-align, works round an attention-grabbing Mozilla conduct that’s solely seen when a doc is rendered in “requirements” mode, as are all ALA articles.  See my Netscape DevEdge article “Pictures, Tables, and Mysterious Gaps”  for extra info on this conduct, and varied workarounds (together with the one used above). Additionally see Higher Residing By XHTML in ALA 137.

As for the background colour of the masthead graphic, there’s actually no method to take away it in need of really setting these pixels to be clear within the graphic itself.  We might set an identical background colour on the masthead div, however that will most likely be overkill for thus gentle a background.

That’s all we did for this redesign, nevertheless it definitely isn’t the top of what’s attainable.

Twiddling with colours to be extra printer-friendly is one chance, as is tweaking the column’s margins in order that they’re primarily based on factors (or picas, and even inches) as a substitute of percentages.  Within the print world, you may have virtually as a lot room to design as you do on-screen.

One space we didn’t scratch as deeply as we might have is font sizing.  A variety of lessons, like superfine, had been left to make use of the all-media kinds primarily based on pixel sizes.  Resizing them for print is so simple as what we did for the physique ingredient—simply write a rule that addresses the ingredient(s) in query, and assigns a brand new worth to font-size.

To select one instance, we’d have written .superfine {font-size: 9pt;}… or another worth that appeared acceptable.  There are different components, like footers and pre, that would profit from comparable work, they usually might seem in future variations of the ALA print kinds.

Right here’s the print type sheet we ended up with after making the adjustments:

physique { 
	background: white; 
	font-size: 12pt; 
}
	
#thực đơn { 
	show: none; 
}
	
#wrapper, 
#content material { 
	width: auto; 
	margin: 0 5%; 
	padding: 0; 
	border: 0; 
	float: none !essential; 
	colour: black; 
	background: clear none; 
}
	
div#content material { 
	margin-left: 10%; 
	padding-top: 1em; 
	border-top: 1px stable #930; 
}
	
div#mast { 
	margin-bottom: -8px; 
}
	
div#mast img { 
	vertical-align: backside; 
}
	
a:hyperlink, 
a:visited { 
	colour: #520; 
	background: clear; 
	font-weight: daring; 
	text-decoration: underline; 
}
	
#content material a:hyperlink:after, 
#content material a:visited:after { 
	content material: " (" attr(href) ") "; 
	font-size: 90%; 
}
	
#content material a[href^="/"]:after { 
	content material: " (http://www.alistapart.com" attr(href) ") "; 
}

As minimal and (in some methods) crude as this type sheet could also be, the impact it has must be apparent to anybody holding a printout subsequent to the identical article on-line.  Equally helpful and dramatic adjustments are attainable for nearly any design, from the straightforward to the elegant, and these kinds of media-specific kinds free authors from ever having to create one other “printer-friendly” copy of a doc.