Question

I’m trying to write the CSS rules to position text over a scanned document.

Reason: The document is a pre-printed form. I am trying to position the text on-screen so that it relates to the ‘spaces’ on the actual form.

Issue: Although I position the values using centimeters, they don’t seem to get aligned with the ones on the actual page. I can see this misalignment since my scanned image is in the background of the page.

What I’ve tried:

1. I used a ruler to physically measure the locations and specify them with CSS. But on-screen, it doesn’t tally.

2. I used the scanned image to position the CSS values. Then the printout is not correct.

3. I even scaled the scanned page using Inkscape to the exact dimensions in centimeters and took into account all margins, etc…

What I need: I am trying to correctly show the output values on-screen AND have them print in the correct manner as well. I know that using two CSS sheets (one for print) is an option. But I’m developing this program away from where the actual printing is to be done. So is there a convenient way of matching the exact screen locations with those on the actual/final prinout?

Thanks!

Answer 1

A scanned document is like any other image, Use it as a background and absolutely-postion the elements on top of it. Make all of your measurements in pixels, not centimetres.