Hi all!
While building a printable six month calendar I'm trying to solve a
difficult problem, namely printing background CSS colors. Let me first
tell you what I have tried:
Since "every" browser will remove background color, the route to
success will lie in something else that does get printed. Well, the
only thing I know for sure browsers will print, is images. Not the
ones you put in CSS but the real img tag. Ok, the images would have to
sit underneath some text, in this case the day of the month and if
applicable, the event that goes in the calendar. I tried with gifs,
that I put in the same div (did I say the calendar is table less?) as
the day. When I put them, there are off a bit but the text is still
visible. But when I reposition them to be directly above the text, the
text disappear - hidden by the gif. So I tried with transparent pngs
instead (I know the IE5.5-6 hack) and everything look nice, until I
hit print. In the print version there is no transparency, which blocks
the text yet again.
Now is there anyone that knows of a method to print transparent pngs,
which keep them transparent!?
My only other option, it would seem, is to use PDF. I have looked into
iText, which is what google calendar use, but I really didn't want to
recode all the logic again to build the PDF. So I looked at HTML to
PDF and found several components (I use ASP.NET 2.0 for back end) and
online services. The only one that passed my test (correctly generate
PDF from CSS and divs) is
http://www.pdfonline.com/ . The problem
however with their service is how they implemented it. I'm guessing
here, but I think that they use the IE HTML engine from the server,
request the page and take a snapshot, then they stick it in a PDF file
and viola! You got yourself a PDF, exactly as seen in IE. My calendar
is build from
JS and it takes about 1-2 seconds in an average browser
but the snapshot is taking immediately, so my calendar won't be build
yet and the PDF will be empty. I have written them to ask if they
could put parameter to their service where I could set the delay time,
but so far no response.
I really thougth I had it with the transparent pngs but it didn't
work. Any bright suggesting out there?!?
PS. I hope someone smarter than me reads this.... :-)
A link to the calendar:
http://bookevent.dk/JSCalendar/calendar.htm
EXT in effect:
http://bookevent.dk/JSCalendar/GenCalendar.htm