Printing Color-Coded Calendars (Proof of Concept)

As I mentioned in my previous post, lots of my development time seems to be spent creating calendar related functionality.

One thing that I tend to forget, and I feel like most web developers in general do this as well, is to check how my pages look when they are printed. Often, getting a page to print correctly is as simples as hiding a few elements and changing some colors around. I recently encountered a bug with Firefox that causes content to overflow the page when printing when an element's overflow property is set to hidden (1, 2). It also seems like a generally bad idea to have a print style sheet using too many floated elements.

Anyways, back to the point of this post...I was working on a calendar to display different types of tickets or hotel prices available for the days within a given month. There are two versions of this calendar, a large, "full screen" version with a dedicated page, and a minified version meant to be used within the content of a regular page. The large calendar has enough space in the "day blocks" to insert text and icons to communicate information. The "day blocks" in the mini version are smaller though and have just enough space to display the number of the day of the month - it uses background colors/background images to convey the ticket type or hotel prices for that day because it can't easily fit in text or icons to describe it (especially in Chinese - did I mention this was a multi-language site?) There is a legend next to the calendar explaining the colors. I've uploaded a screen shot of what the calendar looks like to give you an idea.

The initial problem with this (or so I thought) was that the colors used to represent different "day types" are light, pastel colors. When they are printed in black and white, they look very similar. OK, no problem, I'll just switch out the backgrounds with varying shades of grey.

After a few quick css changes, the calendar and legend were printing fine using shades of grey. Finished, right? Well, not really. Web browsers have a preference to let users print backgrounds and images. I had always thought the 'backgrounds' part only applied to background images. Nope, the preference is for any background. And this pereference is set to prevent backgrounds and images from printing by default. So I had to find another way that didn't rely on backgrounds to convey the "day type" information.

Like I said before, the mini-calendar did not really have enough room to add text into it, especially Chinese characters. It would be possible to squeeze in symbols to the days though. I didn't want to modify the templates or the CMS objects to create a new "symbol" field for each day type, so my first idea was to use the :before pseudo-class to add symbols to the days and the legend. This works great in Firefox, but it isn't supported in IE6 (and I've read it also doesn't work in IE7???)

Back to the drawing board...About a month ago, there was an article on alistapart.com about using borders on an element to create a "faux equal height column" layout. I remember reading it and thinking to myself, This is really awkward, why would anybody use this for their layout? It is a pretty cool idea though... In essence, the idea is to create a container with a large border on one side. Then, using a negative margin, you can get a neighboring element to "overlay" that border, making it appear like the second element has a background with height equal to the original container's. If that last sentence didn't make sense, just read the article.

So, to make a long story short, I used this idea to force web browsers to always print the "calendar day" backgrounds - even if they had the preference turned off. Each "day number" in the calendar is wrapped in a tag within the "day" element. In the case at hand, we had a li representing the day and a div containing the day number. Then, in the print style, specify a large border on the li element, and give the div an equal negative margin to pull it back "over" that border. Add a few css hacks to deal with IE6 and bingo! The only drawback is that because the web browser is not printing backgrounds - it will automatically make all text readable by making it dark enough to read. So, if you have a dark background (border) with a light font, the web browser sees that it is not printing backgrounds (thus, the background is white) and adjusts the light font to be readable on what it thinks is the background color of the area (white). Currently, I'm working around this by giving the font a very light color such as lime. It's not perfect, but it's a step in the right direction.

I've uploaded a proof of concept of this method using tables - because tables are the semantic choice for calendars!