Paying attention to printed page appearance.
Mature, refined and elegant. Almost, but not entirely unlike the geek equivalent of a good wine.
Paying attention to printed page appearance.
This entry was posted by Libertus on May 21, 2006 at 1:00 pm under Coding, Education, WordPress. You can skip to the end and leave a response. Pinging is currently not allowed. Follow any responses to this entry through the RSS 2.0 feed.
Paul M says:
Libertus,
Thanks. I’ll be taking my time so I printed the page out.
What can you do about the print stylesheet? It’s OK, in that it’s as good as any other website without a print stylesheet, but I reckon it could be great with some relatively minor tweakage.
May 21, 2006, 1:06 pmLibertus says:
Paul,
You’re the CSS voodoo doctor. Tell me what to type.
May 21, 2006, 1:56 pmPaul M says:
Libertus,
OK. You only want to target printed output, so you need a media rule in the stylesheet, which is in file wp-content/themes/default/style.css, to which you add:
@media print {
/* These rules are for printouts only */
}
There is no need to print the blog header, so the first rule is #header { display: none; }.
There is also no need for the navigation, so the next rule is .navigation { display: none; }.
The default font could do with being a bit bigger. A 12pt (1/6″ high) typeface is a reasonable balance so the next rule is #content { font-size: 12pt; }.
The Outreach control panel has to go. The rule is .outreach-control { display: none; }.
The “follow any responses” fragment and the entire comment leaving section have to go. The rules are .postmetadata { display: none; }, #respond { display: none; } and #commentform { display: none; }.
The footer can also go. #footer { display: none; }
Start with those. If you’re happy with the result, we can start adding some style to make things a bit easier to read.
May 21, 2006, 5:27 pmLibertus says:
Paul,
OK, I ftp’ed to libertini.net, logged in, changed directory to www/libertus/wp-content/themes/default and got style.css which I opened from my desktop with an editor.
I added the following lines to the end of that file by copying from your comment, resulting in
@media print {
/* These rules are for printouts only */
/* Suggested by Paul M @ http://www.libertini.net/libertus/2006/05/08/happy-sixteenth-jessica/#comment-8006 */
#header { display: none; }
.navigation { display: none; }
#content { font-size: 12pt; }
.outreach-control { display: none; }
.postmetadata { display: none; }
#respond { display: none; }
#commentform { display: none; }
#footer { display: none; }
}
I uploaded the changed file but nothing seems to have happened. It doesn’t look any different in a print preview on Firefox.
May 21, 2006, 5:40 pmPaul M says:
Libertus,
You’re right. My printout looks no different. Those rules aren’t being picked up. The reason is the stylesheet for the theme is only read for screen media. Put the print rules into a different stylesheet, for example, print.css and add the following markup to wp-content/themes/default/header.php:
<link rel=”stylesheet” href=”http://www.libertini.net/libertus/wp-content/themes/default/print.css” type=”text/css” media=”print” />
Watch out though! The stylesheet path won’t be direct, it’ll be in one of those PHP blocks, so copy carefully.
May 21, 2006, 5:48 pmLibertus says:
Paul,
OK, I undid the changes to style.css, put them in print.css (I removed the @media rule) and put style.css back on the server with ftp.
I then got header.php and edited it. I copied the line that reads
added the following line after it
and put the file back on the server.
Then I realised it wouldn’t work because I can’t change the name of the stylesheet like you asked. So I put the print changes back into style.css. It’s not exactly what you asked me to do, but they’re being picked up now and they makes one hell of a difference to the print preview! What next?
May 21, 2006, 5:56 pmPaul M says:
Libertus,
Wow! Yes, that’s much better! I can read the text without squinting now, although there is quite a lot of wasted paper in the margins. The bigger text makes it all the more important to use as much width as possible so that fewer comments are split across pages.
Let’s try to find a happy medium. Separate the screen and print rules first. At the top of style.css, add @media screen { and add a brace } before your print rules. See what I’m getting at?
May 21, 2006, 6:07 pmLibertus says:
Paul,
OK, I’ve done that and it previews much better. I experimented with the margins, both print and screen. What do you think? Can we do better?
May 21, 2006, 6:32 pmPaul M says:
Libertus,
Yes it looks better and yes we can do better. I’m happy enough with the printout now, so may I compose my reply to Jessica without further distraction? Thanks for making the changes.
May 21, 2006, 6:44 pmLibertus says:
Paul,
Just doing my job. Hey, you know, I can always lean on the wrong button and make the entire discussion vanish. That way you wouldn’t have to waste your time replying to Jessica.
May 21, 2006, 6:52 pm