Printing an HTML page on preprinted paper

tags:

css
html

views:

answers:

+1 Q:

Printing an HTML page on preprinted paper

I need to design a page for a web application that makes sense for user input. Sadly, the simplest and most logical manner for the user to interact with the data is completely unlike the form it needs to be printed in.

I'm aware of the @media @print @screen styles that allow me to style up the page differently for different media. What I'm trying to figure out is - is there a way of displaying the labels according to the location on the paper which they must be printed rather than laying out the screen and hoping it prints out correctly?

+3 A:

s there a way of displaying the labels according to the location on the paper which they must be printed rather than laying out the screen and hoping it prints out correctly?

I don't think there is, as all browsers will add their headers / footers to the document, plus there may be the printer's margins to consider (but that problem you will have whatever format you choose).

I think the only half-way reliable way to build a document with exactly positioned elements is generating a PDF document.

Pekka 2010-03-04 21:09:36

The problem with this is [AFAIK] I can't display elements that show on the printed paper that don't print in PDF, and to have the user print the PDF, it's going to generate and return to their local machine for printing on their local printer. If I return an HTML, I can at least display it as it would be printed so they see on screen exactly as it looks on paper... or I don't return anything, I just print to paper using a custom CSS. I'm wondering how I can achieve absolute positioning on paper using CSS though.

BobTheBuilder 2010-03-04 21:44:49

@Bob my practical experience with this doesn't reach that deep but it *should* be possible to specify cm/inch measures when positioning elements: `left: 1.5cm; top: 9cm`. You could try and see what the browsers make of it.

Pekka 2010-03-04 21:46:12

@Pekka Thanks, that [if it works] would be extremely useful

BobTheBuilder 2010-03-04 21:51:05

@BobTheBuilder let me know how it works out. What you still have to deal with though, is that the browsers add their own stuff to the top and bottom, and are very likely to not take that into consideration when calculating the positions.

Pekka 2010-03-04 21:58:48

Yeah, you can switch them off in the browser. It's not a huge headache. I'm wondering whether I can remove those with JavaScript, haven't got that far yet. The only thing I'm having problems with now is the printer's margin which seems to be fixed at 0.5cm and doesn't appear to be changeable.

BobTheBuilder 2010-03-04 23:12:16

@Bob I'm quite sure you can't influence the browser headers through JS. As for the margin, are you sure that is the browser and not your printer? It *should* be possible to print ignoring the margin, but that may depend on the driver.

Pekka 2010-03-04 23:55:12

@Pekka - it seems to be the printer, thankfully it doesn't seem to upset anything. The preprinted paper doesn't require printing outside that margin and all measurements seem to be set from that margin. i.e. left:7cm = 7.5cm from the edge of the paper. What's troubling is that a div with width:10cm actually prints as 10.2cm when a border of even 1px is specified. Maybe I need to change the units for the border...

BobTheBuilder 2010-03-05 14:39:14

@Bob that sounds better than I expected! Re the border, if you're on Firefox you could try `outline`, it should not change the layout.

Pekka 2010-03-05 14:59:11

@Bob plus you could insert a nested additional `<div>` inside the `<div style='width: 10cm'>` and give the inner one the border.

Pekka 2010-03-05 15:15:49

+2 A:

I think I'd move away from HTML if I needed that. What about giving the user one convenient way to interact with the data and then returning it to the user in a more print-suitable format --- say, PDF.

JasonFruit 2010-03-04 21:10:39

+1 A:

If you can't achieve the layout you want with css, why add a link to a separate page for a printable version.

If you absolutely have to have control over the positioning on a page, your only decent option is generating a pdf.

mikerobi 2010-03-04 21:13:05

ansaurus

tags:

views:

answers:

Printing an HTML page on preprinted paper

related questions