More print styles using media="print"

More print styles using media="print"

by Frank Ralf -
Number of replies: 10
While working on http://moodle.org/mod/forum/discuss.php?d=117982#p559593 I noticed that a lot of Moodle pages would profit from special print styles, applied by using the "media" attribute when adding style sheets to a page (http://reference.sitepoint.com/html/style/media).

See Stylish for an example (printing single Database records).

Frank


Average of ratings: Useful (1)
In reply to Frank Ralf

Re: More print styles using media="print"

by sam marshall -
Picture of Core developers Picture of Peer reviewers Picture of Plugin developers
Even better than the attribute shown - you don't need to go to the trouble (and performance impact) of adding a separate stylesheet to pages. It's possible to include @media "print" rules within existing stylesheets. Yay!

I agree it is a cool feature and would be nice if it were more widely supported, however it does have some downsides too - the most obvious that people who are expecting to see a printout of the on-screen display might be disturbed if the printed version is significantly different. (Unfortunately browsers do not provide a way of making print styles comprehensible to users.)

For minor changes though it's certainly a big plus...

--sam
Average of ratings: Useful (1)
In reply to sam marshall

Re: More print styles using media="print"

by Carvell Fenton -

This is a particularly timely post for me, as I am just starting to look at ways of printing new pages I have added to Moodle.

Just to clarify, would what you and Frank are discussing here be the recommended Moodle way to implement a "Print version" or "Printer friendly" type link for pages. For example to use a link element with media="print". I am not quite sure the difference of using @media, but I am still new to CSS. I can look that up!

If you guys could continue reading my mind, and putting up answers to my questions before I have to post them, that would save me a lot of time! wink

Carvell

Update: I looked up @media... I get it now. Cool.

In reply to Carvell Fenton

Re: More print styles using media="print"

by Frank Ralf -
I suppose you've already found out yourself, but for all others interested: If a print style is available the browser will apply it automatically when printing the page. So no link, separate page, or server round-trip necessary, cool, indeed!

@Sam
Thank for the hint, @media is even better.

You're right. That would take a bit of control out of the users' hand. The question is, what the expected default behavior should be when printing a page. IMO in most cases you would want it to be printed without all that navigation stuff and the like. This is especially true with a lot of Moodle activities like glossary or database entries.

For those who want a bit more control over which CSS to apply to which page see the brand new Stylish page on Moodle Docs (work in progress).

Frank
In reply to Carvell Fenton

Re: More print styles using media="print"

by Frank Ralf -
And yes, we're trying to make this mind reading feature into a plug-in for the Forum module. wink
In reply to Frank Ralf

Re: More print styles using media="print"

by Red Morris -
I think the reports would be the ideal place to change (if possible to separate) as a testing ground.
In reply to Carvell Fenton

Re: More print styles using media="print"

by sam marshall -
Picture of Core developers Picture of Peer reviewers Picture of Plugin developers
We aren't Moodle HQ developers so can't tell you what the 'recommended Moodle way' to do something is smile

However I think it's best to use @media print rules to control printed appearance where possible, when you only need minor changes to make a page print properly.

If you need significant changes (e.g. completely reordering information to display it vertically instead of horizontally) or otherwise to make the page contain different content (e.g. if the normal display shows you a single 'thing' at a time, whereas users might want to print all the 'things' at once), then a good old-fashioned 'printable version' is more appropriate.

Here we did build an old-style printable version of the course page for our custom course format. We could have just made print media rules that hide the left and right columns, header (except breadcrumb trail), and footer from the page. I was tempted to do this but in the end we felt it would potentially confuse users because [depending on the block] it's possible some people might be printing out a page solely so that they have a record of something that happens to be in a block! And they are going to get really frustrated if that block mysteriously disappears from the page when they print it.

--sam
In reply to sam marshall

Re: More print styles using media="print"

by Frank Ralf -
Good points.

Maybe a print style could be incorporated into a Style Switcher block like the one suggested for accessibility features in http://moodle.org/mod/forum/discuss.php?d=127463 ?

Frank
In reply to Frank Ralf

Re: More print styles using media="print"

by sam marshall -
Picture of Core developers Picture of Peer reviewers Picture of Plugin developers
Hm, that's a pretty cool idea! You'd still have a 'printable version' link but it wouldn't reload the page.

By the way, opinions vary on this, but some people including me believe that 'style switcher' blocks are usually not an appropriate solution for accessibility. (It looks like this is what you were arguing on the linked thread, so I agree with you.) I don't have a major problem with it for printable versions though... although I'd still prefer if browsers gave users some kind of options and information about print stylesheets. Think I filed a Firefox bug about that one time way back...

--sam


In reply to sam marshall

Re: More print styles using media="print"

by José Cedeño -
Focusing on making printing of Moodle pages more user friendly is great. There are a lot of older adult learners who rely on printing webpages for archival purposes and to review things later. I personally suggest a separate print.css file and using the media="print" attribute when specifying a css file. I find that keeping all the print style rules in a file separate is cleaner and a bit more organized. Course formats and plugins can specify their own styles.php and have rules that apply to their pages. It might be useful to find which pages in various modules or course formats would benefit from having a some print styles applied to it. If this is done, a tracker issue can be created so that developers can follow up on it.

Another alternative might be to supply users with scripts that they can load to modify the look and feel of moodle. For example, users scripts try to do these with other sites.