|CSS-P for print-only forms?|
Let's pretend this is a fun challenge, shall we?
I need to create a bunch of forms that will be printed out from a program and filled in by hand.
They need to be in .html format, because -- I don't know why, I didn't write the program, they just do.
I need a header to appear at the top of the printed sheet, and a footer to appear at the bottom.
I need a table to appear just above the footer, at the bottom, regardless of how much content is in between the top and bottom.
And, lastly, I need to be absolutely sure it will all fit on one page.
We'll pretend this is a fun and challenging theoretical exercise, okay, instead of something stupid i have to do at work. So. Let's begin.
I tried doing it in just plain HTML with tables everywhere. Didn't seem to work-- the "height" element in the tables was screwy, and "just hitting Enter a bunch" in the middle (putting in a lot of line breaks) is a highly unsatisfactory way to put the necessary blank space between the content and the footer.
Say a printed page is precisely 526 x 739 pixels (that figure is the result of backbreaking research but doesn't appear to be true, but we'll pretend it is for the sake of amusement), is there some way I could do this using absolute positioning with my CSS?
Please note, these forms will never be viewed in a browser. They'll just be printed straight from a program I don't have access to so can't tell you anything about. So I don't have to worry about cross-browser compatibility or even what it looks like on a screen. It just has to look good printed out. And that's all.
So... Anybody want to take a crack at this? It's FUN, see? A challenge!
Oh, one more thing:
I've never used CSS-P for anything but the most minor styling tweaks. So, I don't really know where to start.
Doesn't that make it MORE fun? I know, I know, how could I fit so much fun in one post? Well, I'm just a fun person.
in general, I would say "no problem :-)". Use absolute positioning, give elements a height and maybe all in pt, so printed versions look the same.
|Please note, these forms will never be viewed in a browser. They'll just be printed straight from a program I don't have access to so can't tell you anything about. So I don't have to worry about cross-browser compatibility or even what it looks like on a screen. |
You have to know what this program is able to and definitely worry about. Does it support CSS 1, CSS 2? Does it support any CSS definition standard compliant browsers can handle? As long as you donīt know the programīs CSS support in detail I wouldnīt write a single line code using CSS.
>have to know what this program is able to
I do not have access to it right now, so I don't know. I also don't know how to find out. I also know that the programmer doesn't know how to find out.
I am guessing somewhat educatedly that the program probably uses the same rendering engine as Internet Explorer.
That's my guess.
I hope it's true, and will find out as soon as I can.
I will find out by printing out a sample form from it.
So that's my only hope. I have to start by doing it. Because when you don't know, and can't find out, all you can do is test.
So, to start with, the first thing I should do is make an overall div containing everything, and size it absolutely to be 526 x 729 pixels. Right?
Then, within that, I find the x and y values of the absolute positions where I want to place my header and footer. Right?
How do I find those? Should I use a graphics program to find the coordinates? I haven't done this before, so any guidance is greatly, greatly appreciated.
Aaaaaand... I find this:
Paged media! In the CSS2 spec!
Will it work? I don't know.
But, I thought i'd point out that I only just remembered that was there, so perhaps my situation is easier to handle than I thought. Maybe?
After much microwaving of my brain, I've come up with this:
size: 8.5in 11in;
//I got that from the W3C. I don't understand why some of it's in inches and some in cm. I also am not sure where to put this in my stylesheet.//
font-size: 12pt; /this may vary by page/
I'm figuring I'll put the CSS stylesheet in the head of each document because I don't know if an external stylesheet will get called, since I know almost nothing about this program. I was assured that CSS would work in it, so I'm going to run with that.
But I don't really truly understand what the @page thing is. Anyone have any insight for me? I read the Paged Media chapter of the W3C spec and it bounced right off my brain.
the @page thing does nothing, so I've deleted it from my code.
There are three elements: Header, content, and footer.
I've positioned the header ABSOLUTELY from the top of the PAGE, and the footer absolutely from the bottom. I'm currently trying to position the content RELATIVELY from the BOTTOM of the HEADER.
Can this be done? The only examples I've found of relative positioning were very poorly explained and didn't specify if it was absolutely necessary to position relative to the top of the previous element.
My attempts have yielded no results but I don't know if that's because it's not working, or because it's positioning itself relative to the TOP of the header; both look the same.
If it can only be positioned relative to the top of the header then it's pretty bloody useless and I might as well just position it absolutely, individually in every page (since they all have headers with varying numbers of words in them that are therefore varied sizes).
A second issue, and this one is WEIRD:
The text on the page is 102% (I'm estimating) of the width of the window. No matter the size of the window.
I've sized the divs to be 100% width. I tried then sizing them down to be 90%, to no avail-- it still drops about one letter off the right side of the page.
Why on earth would that be? There is no conceivable reason for that. I simply don't understand, and can't imagine where to begin to fix that.
Please, please, please, does anyone have ANY idea what could possibly be causing that?