Oct 25
Designing a CSS template page for an invoicing system
2004 at 12.55 am posted by Veerle Pieters
A recent job of mine was to design a CSS template page for an invoicing system that works entirely in a browser environment. There was one condition: the template should be designed so it works both on Mac and Windows. For Mac, Safari would be used as browser and for Windows (XP) FireFox.
This is an entirely different job then designing a webpage template. For starters my thinking was in terms of printing, like page setup, printing margins, the position of the address so it fits perfectly in an envelope with a window… My first thought was to create 2 style sheets, one for screen media and one for print media, but how it looks on screen is not really important for my client only how it comes out of the printer.
With that out of the way I started building my page using millimeters instead of pixels, a bit like I would layout my design in Illustrator, except in this case everything is positioned by CSS. Some things where positioned absolute, like the address of the addressee and the sender. Also the footer, since it just sticks at the bottom of the page and a page isn’t resizable ;-) This was a plus, it make things much easier. In fact designing it, setting up the CSS part was the easiest part of the job. The struggling part was on the “printing” side, making sure that everything is in place on both Safari (on Mac) and FireFox (on Windows XP).
One of the things I thought I was doing correct was adding a margin all around the content of 7 millimeter, since this was needed as printer border. Well, this appeared not to be correct. No margins are needed, in fact they need to be set to zero. If you do add margins that they will be added to the margin set to the printer. If you use a margin of 5 mm and your printer uses 5 mm, then your content will be printed with a margin of 1 cm. It is a matter of doing a lot of printing tests to make it all fit in the envelope and have your content and footer where you want them too.
After a lot of squeezing things in place and printing pages, it worked correctly in Safari. Alright! Happy me :-) Now back on the PC for some printing tests hoping it all works the same in FireFox on Windows XP. First thing that struck me was the big margins all around the content and the FireFox header and footer text (path to the document on the HD etc) that I didn’t need there. It messed up my entire content. My backgrounds weren’t printed either :-( It must be some printing preference setting in FireFox that I need to turn off, right?
So I started looking into menus. After a while I discovered that the thing I was looking for was “hiding” under the Page Setup feature. When opening Page Setup you get a 2 tabbed window. First tab is “Format & Options”. Here you need to set orientation to portrait, scale 100% and check the option to print the background. Second tab is “Margins & Header/Footer”. Here you need to set all margins to zero and and Headers & Footer elements to “blank”. The next printing test (making sure my page setup was set to A4) showed me a perfect result. The invoice fitted perfectly in the envelope, with the address in place etc.
One thing that puzzles me is FireFox on Mac. If you look under the “Page Setup” menu you won’t see these options. You’ll only get to see the build-in page setup features of the system, but no extra FireFox features. Not sure why, maybe it’s not implemented on Mac OS X yet? Maybe I’ve overlooked something but I doubt it. If anybody knows more information about this, don’t hesitate to share it in the comments. I’ve done a search on the internet but couldn’t find an answer.
18served
1
hello Veerle,
I ran into a similar problem when I had to design an on-line form to replace the paper version of our “Shipping manual”, containing 3 documents for the shipping of dangerous goods. We use IE6.0 as default browser :-( but I wanted to make it work in Firefox as well. And I also ran into this margin setting in the Page Setup. My question however is: do the people adjust this setting manually (as I recommended over here) or did you manage to have this done automatically in some way when a Print command is given ?
thanks,
Erwin
ps love your column
2
@Raven/Erwin: I didn’t manage do that automatically, so my client has to set these margins manually. Maybe it’s possible with JavaScript but I didn’t look into that to be honest.
Ps: thanks for the compliment ;-)
3
Having newly returned to the Apple world for the first time in almost 20 years, I figure I have to be wrong.... nonetheless I’m surprised to hear you call these Windows OS features “hidden”.
Virtually every single piece of Windows software I’ve ever encountered has the margin setting as part of their page setup. I always assumed this is due to the “PnP” nature of Windows. The header/footer is not as consistantly part of page setup, but is many times there too. So much so that this would be the very first place I’d look. Look at Windows Notepad and you’ll see what I mean.
Now as for programming this stuff into your app: see it Firefox retains your settings. Now that you’ve set them, closse up all sessions and reopen Firefox. Have the header/footer come back? If not, then you’re in luck! Simply search the registry (using Regedit) and compare BOTH the printer and Firefox settings with a PC that doesn’t have things working yet. Write a simple .REG script to alter these and run this as part of your install/setup.
I’m fairly sure that printer margins and header/footers settings are NOT part of your CSS, but rather part of your OS!
4
VERY nice looking. Thanks very much!
5
@Dave, I find this rather hidden (the header and footer stuff) since in my opinion it should be listed in the print window (when you choose “Print"). This is the case for Entourage for example, I find this very logical.
On Mac you can set margins to zero. However, there is no option to turn off the Header & Footer elements of Firefox. So my guess is that this isn’t implemented yet.
Thanks for the tip, but I won’t be messing around with that .reg script. I like to keep things simple. After all I’m a Mac user ;-)
I think the printing margins are indeed not part of my CSS (didn’t write that either) they are part of the OS but not the header & footer elements, they are part of the program, so a part of Firefox.
6
hi @all, interesting subject - is this a lack of all the OS X browsers then? since omniweb, opera or IE do not show those parameters either?
7
@ Anne: No not all browsers on Mac OS X. Just did a quick check and IE does support this, you just have to use “print preview” first and there you’ll find a checkbox to turn headers and footers off.
Safari doesn’t show them by default. In Opera 7 you get a special “Opera menu item” where you can disable them also. In Omniweb 5 it’s the same as in Opera. So all of those are in the print window.
8
Veerle, why not using PDF as an output for this invoice system?
9
oh i see, thanx for telling!
10
Very nice and very useful! Does this also work with a multiple page invoice? I’ve noticed a problem with the background image. I don’t get to see/print it.
11
@Hans: To get this working with a multiple page invoice is the next step in the process. To see/print the background you need to specify this in the print window that you want that, standard it’s off.
@ Jochem: Concerning the PDF output, I’ll leave that for our programmer to answer why we are not doing that :-)
12
Very informative, thank you very much!
13
Good to see that css is good for (limited) print design too.
A note: http://sector7g.wurzel6.de/pdfcreator/index_en.htm contains information and a download page for pdf creator. The program adds itself as a printer, so you can print to pdf from any program - including a browser. It works great for me on winXP.
It have found print stylesheets on design sites to be a nightmare though, because either I’ll have to save the page, hack it, and then print it, or paste multiple screenshots together. This reaffirms my belief of having a print-this button on a page to load the same page but with a different (e.g. print) stylesheet.
PS. As your semi-official nitpicking storychecker of a reader, I’m happy to report that I won’t disapoint you. I’ve found a small mistake.
The line: “First thing that stroke me” should be of course “First thing that struck me”. Small typo, but with a rather funny effect :)
14
I prefer your solution alot. I would have thought to have the server to recognize the browser type and then deliver a different css for each of them.
15
I have been working on creating web-based reports and the biggest issue we are having is with the header and footer.
Yesterday I came across an activeX control that allows you to programatically specify what should be in the footer and header.
I have not tested it out yet but will be looking at it over the next day or so.
16
Ooppsss forgot to paste the URL to the ActiveX control:
http://developer.irt.org/script/1437.htm
17
@Veerle: I asked the PDF question since I came across this page a little while ago. I never found a need to use it, but it looks interesting. Especially for things like invoices etc.
I will probably start playing a bit with it, when I have some time spare time.
URL: http://www.ros.co.nz/pdf/
18
Hmm i would go the PDF route there are very nice PDF-Creation libs available for most of the languages out there :
PHP -> PDFLib
Java -> iText
Perl -> PDFLib
Python -> PDFLib
Ruby -> PDFLib
I prefer Java and iText [-:
cheers,
bustaa