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

Jon wrote:
>
> 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:

[non-semantic markup hacks snipped]

>
> 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

Your post begs the question: What is there about this calendar that
makes it useful for me to use up the ink in my printer's color cartridge?

The months have only 24 days, which is weird. There's no scroll bar, so
it can't be that I've just got my viewport smaller than you foresaw, right?

Without JS, there's only an empty page. If you want to require JS for
this, okay, but wouldn't you like to at least tell the non-JS-visitor
that JS is required to see/use the whatever-it-is?

Your texts are flexibly sized, or at least, I can resize them in FF. But
the grid lines remain fixed, so they conflict with the texts.
Actually, there seems to be a slight mismatch by default.

I don't know what you mean by EXT but that page merely provides a an
extra, empty column containing nothing more than the ability to get rid
of the column. Reminds me of the machine which, when you flick the
switch to turn it on, extends a mechanical arm to flick the switch back
and turn itself off. That's all it does. :-)

Is a string like 30-06-2007 really the date format used in Denmark? With
dashes, I would have expected the year first, as in 2007-06-30.

Regarding PDFs: I hate 'em (or maybe I just hate Adobe Reader...). I'd
have to be convinced of the usefulness of your bg coloring before I'd
support the PDF way.

--
John
Pondering the value of the UIP: http://improve-usenet.org/

On 9 Sep., 04:26, John Hosking <J...@DELETE.Hosking.name.INVALID>
wrote:
> Jon wrote:
>
> > 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:
>
> [non-semantic markup hacks snipped]
>
>
>
> > 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
>
> Your post begs the question: What is there about this calendar that
> makes it useful for me to use up the ink in my printer's color cartridge?
>
> The months have only 24 days, which is weird. There's no scroll bar, so
> it can't be that I've just got my viewport smaller than you foresaw, right?
>
> Without JS, there's only an empty page. If you want to require JS for
> this, okay, but wouldn't you like to at least tell the non-JS-visitor
> that JS is required to see/use the whatever-it-is?
>
> Your texts are flexibly sized, or at least, I can resize them in FF. But
> the grid lines remain fixed, so they conflict with the texts.
> Actually, there seems to be a slight mismatch by default.
>
> I don't know what you mean by EXT but that page merely provides a an
> extra, empty column containing nothing more than the ability to get rid
> of the column. Reminds me of the machine which, when you flick the
> switch to turn it on, extends a mechanical arm to flick the switch back
> and turn itself off. That's all it does. :-)
>
> Is a string like 30-06-2007 really the date format used in Denmark? With
> dashes, I would have expected the year first, as in 2007-06-30.
>
> Regarding PDFs: I hate 'em (or maybe I just hate Adobe Reader...). I'd
> have to be convinced of the usefulness of your bg coloring before I'd
> support the PDF way.
>
> --
> John
> Pondering the value of the UIP:http://improve-usenet.org/

John, thanks for taking the time to comment everything and not
consider what could be an answer to my question (u gotta love usenet
forums lol). No, seriously. You make some very valid points so I will
answer them.
> Your post begs the question: What is there about this calendar that
> makes it useful for me to use up the ink in my printer's color cartridge?
The reason why I want printable background images is because my client
told me she want it! She already got a pc based application that gives
her the calendar as a PDF but she's getting tired of mailing (snail
mail) it to her customers. So now she wants a web based calendar where
her customers can print their specific calendar.

On a side note - I find it really annoying/stupid that browser
manufactures think they have to take those decisions. It's NOT up to
them but to the developers. We are the ones who knows when it's
important and when it's not. Please give me some power, so I don't
have to spend days for filling my clients visions. Like which way to
print a document, landscape or not! C'mon! Don't they thing I as a
application developer knows when it makes sense!? puh.. enough
ranting..

> The months have only 24 days, which is weird. There's no scroll bar, so
> it can't be that I've just got my viewport smaller than you foresaw, right?
Yes your are completely right. If I put overflow:auto I have
scrollbars all the time so obviously I have a box width/height issue
which I will work out (I think I wrote it was a work in progress?).
Anyway, if you know where my CSS error is please, tell me.

> Without JS, there's only an empty page. If you want to require JS for
> this, okay, but wouldn't you like to at least tell the non-JS-visitor
> that JS is required to see/use the whatever-it-is?
The users is my clients clients and they will have to login. On the
login page I have a noscript section. I don't make rich client
applications that can run without JS.

> Your texts are flexibly sized, or at least, I can resize them in FF. But
> the grid lines remain fixed, so they conflict with the texts.
> Actually, there seems to be a slight mismatch by default.
Good point.. I will try to see if I can figure out a cross browser
resize algorithms or else I'll remove the feature.

EXT is a set of client-side cross browser controls: extjs.com
The second link has a buggy resize algorithm that doesn't work on
widescreen resolutions (maybe I'll remove it).
John, what you have seen is a big part of my application but it's
nowhere near the hole part. I will keep that to myself and my clients
for now. What I have posted what an example to make it easier for you
to me. If you think you can me in any way, please write
again! Thanks!

Jon wrote:

> My only other option, it would seem, is to use PDF.

Since it appears that you are more interested in how the page prints
then how it looks on screen, this may be your best option. Is there
money in the budget to hire someone who knows how to do that? (hint, hint)

I have not done generated PDFs in color, so your blue banners would wind
up gray, which may not matter if the calendars are going to be printed
on a grayscale laser printer.

If your server supports Perl, and you have a budget to work with, we can
talk.

Jon wrote:
> On 9 Sep., 04:26, John Hosking <J...@DELETE.Hosking.name.INVALID>
> wrote:
>> Jon wrote:
>>
>>> 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:
>> [non-semantic markup hacks snipped]
>>
>>
>>
>>> 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
>> Your post begs the question: What is there about this calendar that
>> makes it useful for me to use up the ink in my printer's color cartridge?
>>
>> The months have only 24 days, which is weird. There's no scroll bar, so
>> it can't be that I've just got my viewport smaller than you foresaw, right?
>>
>> Without JS, there's only an empty page. If you want to require JS for
>> this, okay, but wouldn't you like to at least tell the non-JS-visitor
>> that JS is required to see/use the whatever-it-is?
>>
>> Your texts are flexibly sized, or at least, I can resize them in FF. But
>> the grid lines remain fixed, so they conflict with the texts.
>> Actually, there seems to be a slight mismatch by default.
>>
>> I don't know what you mean by EXT but that page merely provides a an
>> extra, empty column containing nothing more than the ability to get rid
>> of the column. Reminds me of the machine which, when you flick the
>> switch to turn it on, extends a mechanical arm to flick the switch back
>> and turn itself off. That's all it does. :-)
>>
>> Is a string like 30-06-2007 really the date format used in Denmark? With
>> dashes, I would have expected the year first, as in 2007-06-30.
>>
>> Regarding PDFs: I hate 'em (or maybe I just hate Adobe Reader...). I'd
>> have to be convinced of the usefulness of your bg coloring before I'd
>> support the PDF way.
>>
>> --
>> John
>> Pondering the value of the UIP:http://improve-usenet.org/
>
> John, thanks for taking the time to comment everything and not
> consider what could be an answer to my question (u gotta love usenet
> forums lol). No, seriously. You make some very valid points so I will
> answer them.
>> Your post begs the question: What is there about this calendar that
>> makes it useful for me to use up the ink in my printer's color cartridge?
> The reason why I want printable background images is because my client
> told me she want it! She already got a pc based application that gives
> her the calendar as a PDF but she's getting tired of mailing (snail
> mail) it to her customers. So now she wants a web based calendar where
> her customers can print their specific calendar.
>

OK, a web-based calendar is fine. But DON'T WASTE MY EXPENSIVE INK
CARTRIDGES ON IRRELEVANT BACKGROUND COLORS!

> On a side note - I find it really annoying/stupid that browser
> manufactures think they have to take those decisions. It's NOT up to
> them but to the developers. We are the ones who knows when it's
> important and when it's not. Please give me some power, so I don't
> have to spend days for filling my clients visions. Like which way to
> print a document, landscape or not! C'mon! Don't they thing I as a
> application developer knows when it makes sense!? puh.. enough
> ranting..
>

I'm glad they did. They save my ink. I really don't need to use $10
worth of ink on irrelevant background colors!

If I want a different colored background, I'll put in different colored
paper.

>> The months have only 24 days, which is weird. There's no scroll bar, so
>> it can't be that I've just got my viewport smaller than you foresaw, right?
> Yes your are completely right. If I put overflow:auto I have
> scrollbars all the time so obviously I have a box width/height issue
> which I will work out (I think I wrote it was a work in progress?).
> Anyway, if you know where my CSS error is please, tell me.
>
>> Without JS, there's only an empty page. If you want to require JS for
>> this, okay, but wouldn't you like to at least tell the non-JS-visitor
>> that JS is required to see/use the whatever-it-is?
> The users is my clients clients and they will have to login. On the
> login page I have a noscript section. I don't make rich client
> applications that can run without JS.
>

Then you lose about 10% of your prospective clients. Javascript should
be used to enhance the experience - and not be required to have the
experience.

>> Your texts are flexibly sized, or at least, I can resize them in FF. But
>> the grid lines remain fixed, so they conflict with the texts.
>> Actually, there seems to be a slight mismatch by default.
> Good point.. I will try to see if I can figure out a cross browser
> resize algorithms or else I'll remove the feature.
>
> EXT is a set of client-side cross browser controls: extjs.com
> The second link has a buggy resize algorithm that doesn't work on
> widescreen resolutions (maybe I'll remove it).
> John, what you have seen is a big part of my application but it's
> nowhere near the hole part. I will keep that to myself and my clients
> for now. What I have posted what an example to make it easier for you
> to me. If you think you can me in any way, please write
> again! Thanks!
>

Proper CSS and you don't need the resize with js. Make your widths a
percentage of the screen width.

--
==================
Remove the "x" from my email address
Jerry Stuckle
JDS Computer Training Corp.
jstucklex@attglobal.net
==================

And lo, Jon didst speak in alt.www.webmaster:

> 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.

I don't know if this has been mentioned already in this thread, but
"every" graphical browser I have used has had a selectable option to
enable printing of background images and colours. By default, all of them
have this feature disabled to save printer ink.


IE: Tools >> Internet Options >> Advanced >> Printing >> "Print background
colors and images"

Firefox: File >> Page Setup >> Format & Options >> Print Background
(colors & images)

Opera: File >> Print Options >> Print Page Background


Don't bother creating a different version which forces the issue. Just
tell your customers how to enable and disable the printing of background
colours and images in their respective browser, then let them make their
own choice when printing the calendar.

Also remember that you can enforce specific CSS styles for printing with a
print media stylesheet. Combine this with IE conditional comments and you
can make background images appear or disappear, or switch them from 8-bit
(PNG) to 1-bit (GIF) transparency depending on the browser being used to
print.

Grey

--
The technical axiom that nothing is impossible sinisterly implies the
pitfall corollary that nothing is ridiculous.
- http://www.greywyvern.com/orca#search - Orca Search: Full-featured
spider and site-search engine

Jerry Stuckle wrote:

>
> Proper CSS and you don't need the resize with js. Make your widths a
> percentage of the screen width.

And your (OP Jon) grid heights relative to font-size (em or %).


--
John
Pondering the value of the UIP: http://improve-usenet.org/

Jon wrote:

>
> John, thanks for taking the time to comment everything and not
> consider what could be an answer to my question (u gotta love usenet
> forums lol). No, seriously. You make some very valid points so I will
> answer them.

I'm glad you appreciate that I thought about your page. It was in fact
an attempt to address your question. I'm sorry if you think you didn't
get your money's worth. I'll give you double your money back. :-)

BTW, it's usually preferred if you place your responses to my points
(valid or otherwise ;-) ) immediately after my points, rather than
copying and pasting them *again* into your reply. Points you don't want
to reply to should be trimmed out of your reply. And please do feel free
to trim signatures.

> On 9 Sep., 04:26, John Hosking wrote:
>> Jon wrote:
>>
>>> 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:

>>> A link to the calendar:http://bookevent.dk/JSCalendar/calendar.htm
>>> EXT in effect:http://bookevent.dk/JSCalendar/GenCalendar.htm


>> The months have only 24 days, which is weird. There's no scroll bar, so
>> it can't be that I've just got my viewport smaller than you foresaw, right?

> Yes your are completely right. If I put overflow:auto I have
> scrollbars all the time so obviously I have a box width/height issue

So why use overflow:auto instead of overflow:visible? I'd leave the
declaration out completely.

> which I will work out (I think I wrote it was a work in progress?).
> Anyway, if you know where my CSS error is please, tell me.

Well, I have very little interest in checking through the JS that
produces all the resulting markup, but I can see the generated code, and
that lets me generate what will seem like a smart-aleck answer. Ready?

Your CSS error is putting it inline. For every day in the calendar, I
see stuff like style="left: 83.3333%; top: 87.0968%; width: 16.6667%;".
This stems from what I think is a much larger (and more general) error:
coding the page as a huge clump of absolutely positioned divs and spans.
A calendar is a classic example of tabular data. I recommend you use
<table>.

Probably not what you want to hear (and still doesn't provide any
direction about bg colors), but it's how I see it.

--
John
Pondering the value of the UIP: http://improve-usenet.org/