CSS to specify positions over a scanned document

Posted by itsols on Stack Overflow See other posts from Stack Overflow or by itsols
Published on 2012-06-01T14:18:02Z Indexed on 2012/06/04 4:40 UTC
Read the original article Hit count: 213

Filed under:

css

|

printing

|

positioning

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!

© Stack Overflow or respective owner

Related posts about css

HTMLUNIT Facebook javascript warning

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi I am trying to create simple application that would be able to search people on facebook using given e-mail. I am already able to log into an account using the HTMLunit tool and even create a page, which should throw result of my search. But when I try to print the result as XML the file is missing… >>> More
$this->headLink() includes duplicated script

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi, Just like I did before, I used the following code for my new project. <?=$this->headLink()->appendStylesheet('/Layouts/admin/css/button.css');?> <?=$this->headLink()->appendStylesheet('/Layouts/admin/css/inputText.css');?> <?=$this->headLink()->appendStylesheet('/Layouts/admin/css/fancyTable… >>> More
How much multiple style sheets slow down to website?

as seen on Stack Overflow - Search for 'Stack Overflow'
Here is 3 css file (one is only for IE) <link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection"> <link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print"> <!--[if lt IE 8]><link rel="stylesheet" href="css/blueprint/ie… >>> More
mod_pagespeed is rewriting but not combining

as seen on Stack Overflow - Search for 'Stack Overflow'
I have the following problem. I installed mod_pagespeed but i am not getting the results i want! It does rewrite my css and changes the to the cache url but its not combining the css files. I have seached the web and stackoverflow for it but did not find a solution. Here are the tags <link… >>> More
CSS import or multiple CSS files

as seen on Stack Overflow - Search for 'Stack Overflow'
I originally wanted to include a .css in my HTML doc that loads multiple other .css files in order to divide up some chunks of code for development purposes. I have created a test page: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional… >>> More

Related posts about printing

Problem printing google maps printing and using 'page-break-before' in IE8

as seen on Stack Overflow - Search for 'Stack Overflow'
Hi, I'm having an annoying problem trying to get an html page with a google map on it to print correctly, I have a google map with an <h2> above it all wrapped in a div and the div is set to 'page-break-before:always;' in the css so that the map and its heading always sits on a new page. The… >>> More
Printing using full page (bypassing hardmargins/printing full bleed/borderless)

as seen on Stack Overflow - Search for 'Stack Overflow'
Is it possible to override printer hardmargins and use all of the page when printing a document programmatically with .NET? >>> More
Printing an external file in its own printing routine

as seen on Stack Overflow - Search for 'Stack Overflow'
I basically have an application that generates reports in a .html file, I use a .html file for the ease of making tables and formatting text. Now I would like to introduce a way of printing the reports from my program. Because I use a .html file, the formatting would not the correct if I was to print… >>> More
Network printing -- setting up and printing over network using Mac OS X

as seen on Super User - Search for 'Super User'
I've connected a USB printer to a Mac OS X (10.4) machine -- this computer is connected to a network with a registered IP address -- and enabled sharing through the System Preferences setting (under "Shared" and "Print & Fax". Is this printer shared through the Bonjour or CUPS protocol (does it… >>> More
LPR printing in Ubuntu

as seen on Ask Ubuntu - Search for 'Ask Ubuntu'
I'm trying to set up printing to a networked LPR printer, but I can't seem to make it work. The connexion information that IT gives is: Print Spooler: printing.domain.edu Printer Name: PrinterName Print port: 515 Bidirectional: Disabled It's an HP LaserJet p4015x, and I'm using the "HP LaserJet… >>> More