Overlaying text on printable image Options

[Rich Pasco]

I want to overlay text and a transparent GIF image so that when the user prints the web page it prints as displayed.
(The image is an artiistic border for a coupon; the text gives the details of the offer in the middle.)

Problem is, if I declare the image as background="myimage.gif" then by default most browsers don't print the image.
If I declare the image as foreground with img src="myimage.gif" then I don't know how to overlay it and the text.

Can I do this with straight HTML? If not, can I do it with CSS? How?

Thanks in advance,

- Rich

[pandy]

CSS. There are serveral ways (read about CSS positioning) but I'll show you one.

Let's say the image is 500 pixels tall and you want the text to start 50 pixels from the top and 30 pixels from the left edge.


CSS:

CODE

#coupon p    { margin: -450px auto auto 30px }
/* that's top, right, bottom and left margin - in that order */

HTML:

HTML

<div id="coupon">
<img src="couponborder.gif" width="500" height="500">
<p>
Blah bla yadda yadda</p>
</div>

A negative margin moves the box in that direction. The rest is pure math based in the image.

[Rich Pasco]

Thanks, pandy!

I found a similar approach here:
http://willmaster.com/possibilities/archiv...030902001.shtml

Between your suggestion and that page, I should be able to work it out.

- Rich

[Rich Pasco]

Thanks to those who helped, the finished product is here:
http://www.michelespizzeria.com/coupons.shtml

- Rich

[Darin McGrew]

FWIW, the coupon text starts overlapping when my browser enforces a minimum font size of 22px or larger. (I normally enforce a minimum font size of 12px, but I was curious what would happen...)

[Frederiek]

BTW, you have at least to set units to your attribute values in your coupons.css.

[Rich Pasco]

FWIW, the coupon text starts overlapping when my browser enforces a minimum font size of 22px or larger. (I normally enforce a minimum font size of 12px, but I was curious what would happen...)

Thanks, Drew. I'm aware of that problem, but I don't see an easy solution. Do you?

For reasons like that, I'm not entirely satisfied with my approach of overlaying HTML text onto the GIF artwork. I considered making each entire coupon as a single GIF (all graphics, no text). But besides being harder to update content (it would require regenerating the GIF each time the coupon content changes), the graphic text would then print jaggy and fuzzy compared to the HTML text (which prints neatly in TrueType or PostScipt fonts).

Any ideas?

- Rich

[pandy]

What if you use a print style sheet and set the text in pixels or points only for print? Would that work?

I get a JavaScript error on the printer friendly page in IE and Opera tries to print the page as soon as it loads. But maybe that's the intention?

[Rich Pasco]

BTW, you have at least to set units to your attribute values in your coupons.css.

Thanks. I added "px" after each number, but apparently that's an understood default since it worked OK on every browser I tried it with.

[Rich Pasco]

I get a JavaScript error on the printer friendly page in IE and Opera tries to print the page as soon as it loads. But maybe that's the intention?

What JavaSciript error do you get? I open it in MSIE 6.0 and 7.0 and don't see a Javascript error. Or maybe I'm not looking in the right place.

The intention is to open a printer dialog as soon as the page opens, if possible.

[Frederiek]

The format of a length value (denoted by <length> in this specification) is a <number> (with or without a decimal point) immediately followed by a unit identifier (e.g., px, em, etc.). After a zero length, the unit identifier is optional.

From CSS 2.1 Chapter 4.3 Values/4.3.2 Lengths.

[Frederiek]

No javascript error in Safari either.
The print dialog does open upon clicking the printer friendly coupons link. But then it seems to me, you don't need to repeat the print this page in the pop-up.

[Darin McGrew]

I'm not entirely satisfied with my approach of overlaying HTML text onto the GIF artwork.

Here are several possible approaches:

• use PDF for the printable coupon(s)
• use HTML, but make the whole page be the coupon (rather than having them cut out a small part of the page)
• use an image and don't worry about it (JPEG might help reduce the jaggies)
• use something similar to the W3C's rounded corners and shadowed boxes example, only with different borders around the images

The e-coupons (for brick-and-mortar businesses) that we use most frequently just have you print the whole page. One just has a short discount code that the employee enters when they ring up the transaction. The other has a GIF of a bar code, which is the only bit that has to print accurately (with a long discount code that the employee has to enter manually if the bar code doesn't scan).

[Rich Pasco]

Thanks, Darin. I appreciate all the alternatives.

A design goal was for the web page to display the coupons in the context of the web site (logo header, sidebar table of contents, etc.), which rules out PDF without a lot of duplication of artwork. Of course the "printer friendly" page is the same coupons without the periphery.

It would be nice if a small PDF graphic could be embedded in a box on a larger HTML page (like we do with GIF, JPEG, PNG now) but I don't think that's possible.

Another goal was to make the coupon text editable by the non-technical pizzeria manager via an HTML form. It's easy if it's part of an HTML file, but harder if it's part of an image (which would require server-side code to rasterize the text).

I can't depend on CSS2 since few browsers in the field support it. The rounded corners trick you linked depends on generated content ('::before' and '::after') which isn't supported on MSIE 6 or 7.

Anyway the pizzeria manager is happy with the coupons as they look. Since few users (perhaps just visually impaired ones) run their browsers with grossly non-standard font sizes the coupons will work for most ci

This post has been edited by Rich Pasco: Feb 13 2007, 11:49 AM

[Rich Pasco]

You don't need to repeat the print this page in the pop-up.

You're right, I probably don't. It's harmless redundancy, in case someone closes the initial printer dialog and later wants to print.