Skip to main content

Printing Wikipedia

Last year saw the launch of book printing for Wikipedia articles. A very nice feature that allows you to create a collection of articles and print them as a book. Since yesterday you can even get hardcovers. There is also a wonderful "Print to PDF" feature that piggybacks on the book rendering technology.

Printing webpages has long intrigued me and the results have always been suboptimal, especially with something as complex as Wikipedia articles. However, the web is moving forward and the printing options for the web are getting better with every browser release. The past few days I was revisiting this issue and I have now added some new CSS to the print stylesheet of MediaWiki which should help browsers detect proper spots to insert pagebreaks and more importantly, where to avoid them.
Before pagebreak CSSAfter pagebreak CSS
When your browser supports it, it will try to avoid pagebreaks in images, wikitables and right after headers. It will also try to avoid lone sentences of paragraphs at the beginning or end of the page, keeping paragraphs more readable. This CSS is part of the Paged media subset of CSS. It is best supported by Opera and Internet Explorer 8. Actually it's one of the few spots where Webkit and Gecko are really lagging behind a bit. There are many more options in the paged media specification that would help improve printing of pages, but they are part of CSS3 and only Opera has made some progress on this so far.

Another thing that I have been working on is a new gadget called Print dialog. It helps you influence how pages are printed, right from Wikipedia. You can remove backgrounds, images and references, and mark all the text as black. Really very useful for if you intend to do some quick printing and since there is demand (Bugzilla 25869, bugzilla 22256), we might actually see this one day in the MediaWiki software.

The most esoteric function of Print dialog, is an option to actually kill the print styling. Normally when you print Wikipedia pages, you will use a different set of stylesheets that are optimized for printing instead of the screen. These stylesheets hide the interface components and elements that might not be useful in print. Usually this is wonderful, but sometimes I just want it all, and on my browser (Safari), this was not possible (well you could make a screenshot). With this new option you can actually fake the screen media while you print. Currently it works only for Safari. IE is untested, and Firefox/Opera refuse me to give the access I need to adapt the stylesheets, due to the Same Origin policy, which is violated due to the usage by the Foundation of a separate server for the stylesheets (Bugzilla 25886).

Example print output with no images Print output without references and backgrounds Print output with all non-print elements restored
I think this could be a welcome feature for many, please let me know what you think !
Labels:

Comments

Post a Comment

Popular posts from this blog

kAMDReceiveMessageError

We kept running into a kAMDReceiveMessageError in our company, when trying to install adHoc iPhone apps with the iPhone Configuration Utility for Windows. Everything was fine if people tried to install using Windows iTunes. After much time it was tracked to the addition of UIRequiredDeviceCapabilities to the Info.plist. For some very strange reason it seems that the Windows ICU doesn't like that property at all and fails to install any app that carries it. Not sure if this will affect AppStore submission, iTunes handles it and so does the Mac version of ICU it seems, but it is at the very least mildly annoying that testers can't install our application using Windows ICU.
Post a Comment
Read more

HTML 5 video player for mediawiki now with fullscreen support

Michael Dale has been working hard on a new media player for the mediawiki projects. This media player is based on the HTML 5 <video> tag . You can compare it to the demo players of Youtube and Vimeo and DailyMotion . It should support Firefox 3.5, Google Chrome 3, Opera 10.5 and if you install the Xiph QuickTime components it works with Safari 4 for the Mac. If your browser doesn't support HTML5, the player will use the JAVA cortado player , like it does in the old version of the Ogg player. Recently both Apple and Firefox introduced Fullscreen support for the <video> tag in their development versions of the browsers, and these features can now be used with the new player for Wikimedia. The controls automatically show and hide, and you can even add and display subtitles with it. How do I test it ? It is rather easy, you go to this example video . If you want to enable it for all videos, you need to be registered on Wikimedia Commons or the English Wikipedia . You ...
2 comments
Read more

Template editor

The Wikipedia Usability Initiative is finally making good progress on their template folding and template editor. Much of what the project has been doing with the edit screen has been in preparation of this work. The editor now folds complicated templates into a small block. One of the sandboxes the project uses now has the code deployed and it seems to be working quite well. Be aware that this is a development platform, and that browser peculiarities might not be fully dealt with yet. It is also NOT final. The wiki editor with folded templates. You can unfold the block, by clicking on the arrow to show the template code, or you can click the block and you are presented with a template editor that makes it easier to change the values of the template. This should be very helpful, because research showed that much of the trouble people had with editing Wikipedia, was the complex code on the edit pages. The template code is by far the most obscure and complicated code of all our wik...
3 comments
Read more