CSS to specify positions over a scanned document
- by itsols
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:
I used a ruler to physically measure the locations and specify them with CSS. But on-screen, it doesn't tally.
I used the scanned image to position the CSS values. Then the printout is not correct.
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!