26 replies to this topic

[dragonlady7]

I'm trying to make HTML "forms" (not the kind you fill out on the screen, the kind you print out and fill in) for a program my company is making. I need to make nicely formatted pages for printing with the following:

A border around them.
A nice heading style.
A table at the bottom with text that will be dynamically replaced with input data. I don't have to worry about that, I just need to make the space there.
They should "look all nice".

How do I even start?

How many pixels is a printed page? (Height, width, how do I figure this out?)
The forms have to print with a header at the top and a footer at the bottom. I lack programming expertise and time to do anything elaborate with includes. I also lack time for anything but the most basic CSS. Also, we can't use PDFs for some reason.

So, any suggestions for a basic, simple, printed HTML form? I'm just trying to figure out where to start. I've posted this question in a couple forums because I need some inspiration. This thing's staring me down, man. Where can I start chipping away at it? It won't be that hard once I do it...

[dragonlady7]

Added factors:

No, I canNOT use PDF despite the fact that that's what it's designed for. I simply don't have that option.

The program in question is something installed on a local machine, and has no interface with the Web. This has nothing to do with the Web, it's just that they need it done in HTML.

[qwerty]

You definitely can't use PDFs if part of the page is being generated dynamically.

I don't know how reliable this information is, but I found a page at http://www.dsv.su.se.../web-ruler.html . There's a table in there that includes a column for Printable Viewable Size Excluding Browser Borders. I'd recommend starting with that, but you'll probably have to test.

Try building a table with a specific height (in pixels), sticking someting at its top and bottom, and printing the page. See if you need to make it bigger or smaller.

[dragonlady7]

Thanks! I'll start there. But first-- lunch break in my timezone.

[dragonlady7]

Hey, that works pretty well-- good information on pixel dimensions in general.
I also found this:
http://www.alistapar...s/goingtoprint/

I'm going to work on both of them. (I spent today working on other stuff while I thought it over. I had to hand-draw an illustration for a medical form. I'm currently pondering the last issue: How to properly draw a naked human butt from a direct behind view. It looks funny no matter how careful I am... Sigh. My life is both surreal and annoying.)
I shall let y'all know tomorrow what i come up with. In the meantime, more suggestions are *always* appreciated!

[Vertster]

I have done this before. It is much easier now that layers and CSS are more widely supported.

You could use layers to create boxes that people would write inside and style the them with a 1 pixel border. Make smaller (and square) ones for check boxes. alternatively, you can create lines by using only the css control for the bottom of the layer.

The other way to do it uses nested tables, with 1 pixel cell padding on the outside table. Color the background of the outside table cell black, and then insert a white table inside the outer cell. The 1 pixel cell spacing will give you a nice neat thin box effect. The problem is if they have their print settings to not print background colors.

This is how we used to do it before CSS/Layer suport became more pervasive.

[Randy]

That's a tricky one DragonLady, because it depends a lot upon what you're printing.

Assuming you're going to use HTML (Tables) and or CSS then you'll likely be pretty safe using as much as 700 pixels width and 1,000 pixels height. That'll generally work for standard 8 1/2 x 11 paper and most printers. Change the dimensions if you're printing on a different paper size. The alistapart link you mention and Vertster's post cover those pretty well.

Be careful not to push the margins too much, especially the bottom margin. Many printers, most noteably HP and Lexmark, force a 1 inch bottom margin no matter what you do. Sadly, I've had to deal with many of these issues because of some sites we run, and it can become a huge pain when you're dealing with every type of printer and outdated print drivers.

If it were me I'd probably go back to the old fashioned way of using a table with a set width and height, center the whole thing and let it go. Mainly because that degrades well if someone happens to be using an older model of browser. But since this sounds like it's going to be an Internal thing, you might be able to use CSS instead. Better and easier IMHO, if you can use it.

As a caveat for others who may be reading this... It becomes a whole other ballgame if you're dealing with images, or even images converted to PDF. Then you have to start factoring things like the dots per inch of the original image. If you have Excel installed, a good resource to sort that out is Here

Randy

[Randy]

You definitely can't use PDFs if part of the page is being generated dynamically.

<offtopic>
Actually you can still use PDF even if part of the content is being dynamically generated Qwerty. We do that every day on a handful of our sites.

But only if you run your own server, install the right software (at a cost of around 2 grand) and are pretty skilled with PHP. Or if your host reeeeaaaaallllly loves you.
</offtopic>

[dragonlady7]

Hmmm...

Well, I've been looking into this a bit, and have gotten more of the details I actually need.

1) This is not for a browser. No. This is for the display of forms within a program.
2) These forms will not be filled out on the screen. They are meant to be printed out and then filled in. Most of them only require a signature. So, I need a good way of generating a signature line.
3) They're only in HTML because that's what works with the program my company made.
4) They will not be displayed in a browser at any point. They don't have to look good on the screen. They only have to print well.
5) They will probably print in a manner similar to the way IE prints, but that's only a guess on my part; nobody can tell me what I need to know, so I'm having to conjecture.
6) There are no images. Thank God.
7) Most of them are 1-page forms. They absolutely have to fit on a single page. They cannot wrap to a second page.
8) The header has to display at the top of the page, and the footer at the bottom. I repeat, they cannot wrap to a second page.

[qwerty]

Where is the data for the dynamically-added part coming from? If it's some simple database (something like Access) I bet you can just build the form in the DB application.

Otherwise, it might even be possible to do the whole thing in Word, using macros to populate the dynamic stuff.

[dragonlady7]

> Where is the data for the dynamically-added part coming from?

From a custom-written program that I do not have access to. I know nothing else about it.
The choices for formats were:
.rtf
.html
RTF doesn't support tables properly, so it's out.
HTML it is.
That's it. I have no other choices. I have to do this in HTML.

[qwerty]

If you do it in .rtf, you probably won't need tables. Just use Word form objects, like text boxes.

You'll definitely have more control over page size, since you can create it in print layout view.

[dragonlady7]

Apparently, what we need the tables to do can't be done in .rtf. We're distributing this program freely on the Web, and we can't guarantee that people who download it will have access to Word. If the .rtf format depends on being opened in Word, it will not work.

[qwerty]

You're right -- RTF won't do it. I found a page at http://www.seniortec...f_rich_text.php and it says that

A wide variety of programs, from word processors to desktop database applications to email clients can utilize RTF. Also, it doesn"t matter whether you"re on a Macintosh, UNIX, or Windows computer -- RTF works across operating systems.

which is very good news, but it also says

RTF will not retain complex formatting such as table information, graphic alignment and pagination or macros.

So HTML it shall have to be.

[dragonlady7]

I just tried simply making a page all in tables, fixed-height, fixed-width, etc., and spaced the table at the bottom out by just hitting enter a bunch of times and inserting line breaks.
Well, it looks like h#ll.
So...
HTML. Has to work. There's *gotta* be a way.