1 reply [Last post]
ttsprez
ttsprez's picture
Offline
newbie
HOUSTON
Last seen: 3 weeks 1 day ago
HOUSTON
Timezone: GMT-6
Joined: 2018-11-13
Posts: 1
Points: 2

Here is a link to my CSS/HTML file I'm working with
http://pdforms.losttitleconnection.net/TITLEAPP.HTML

This file is used by PHP code to generate a form image on an 8.5 x 11 page with absolute position div's that contain field names which are replaced with customer data.

On one of my machines using Chrome, the page presents to the browser and in print preview as I intended, with the form centered to proper margins and field names aligned to each area.

On another machine using Chrome also, the image on the page presents as intended in both the browser and print preview, but the absolute position field name present as if they are smaller or like the image is oversized.

I understand each machine, browser and display image is different, so I'm wondering if it is possible to use CSS to establish a standard presentable size, like a full page view centered in the browser window, for all browsers and then somehow lock in or coincide the absolute positioning with that so that it presents the same no matter what browser and prints to an 8.5 x 11 as intended. I have seen where some pdf docs present like this to the browser. Just not sure what it takes to do it or if it will work with what I'm needing.

Here are a few screenshots of examples that have presented on my machines. Like I said on one of my machines, this file works great. Chrome seems to work best. I've matched the resolution and chrome versions on both of these machines, however, the displays are different. One is my 55" tv and the other is the display on my laptop. I'm sure the difference in size has a lot to do with how this is working, but thus the reason for wanting to standardize this. So it looks and works the way it should no matter what the customer views it on.

Good Presentation and printing
http://www.clipular.com/c/6117128965718016.png?k=gQQPWMdfUHOARwn4Y5JbCpQ3OeM

Bad Presentation and Printing
http://www.clipular.com/c/6515027847413760.png?k=1AiMJ0APfz9TWQG2l9OCzPyDNq0

Here is a copy of the CSS/HTML code I'm using in the URL at the beginning of the post:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="generator" content="losttitleconnection">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<style type="text/css">
.formData {
    padding-top: 90px;
    text-align: center;
}
.stl_01 {
	position: absolute;
	white-space: nowrap;
}
 
.stl_04 {
	width: 100%;
        height: 100%;
	clip: rect(0em,250em,250em,0em);
        position: absolute;margin-top: 0px;margin-left:0px;
	pointer-events: none;
}
 
.pageBreak {page-break-after: always;}
 
</style>
 
<title></title>
</head>
<body style="margin:0;">
 
<div class="stl_04">
<img height="1465"  width="1110" alt="" src="https://pdforms.losttitleconnection.net/TITLAPP-1.png"/>
 
<div class="stl_01" style="top:2.8em; left:07.41em;">
<div class="formData">VehVin</div>
</div>
 
<div class="stl_01" style="top:2.8em; left:20.81em;">
<div class="formData">VehYr</div>
</div>
 
<div class="stl_01" style="top:2.8em; left:26.39em;">
<div class="formData">VehMk</div>
</div>
 
<div class="stl_01" style="top:2.8em; left:32.5em;">
<div class="formData">VehBdy</div>
</div>
 
<div class="stl_01" style="top:2.8em; left:37.9em;">
<div class="formData">VehMod</div>
</div>
 
<div class="stl_01" style="top:5.321em; left:3.41em;">
<div class="formData">VehPlt</div>
</div>
 
<div class="stl_01" style="top:5.321em; left:12.41em;">
<div class="formData">VehMil</div>
</div>
 
<div class="stl_01" style="top:8.321em; left:3.41em;">
<div class="formData">VehWght</div>
</div>
 
<div class="stl_01" style="top:8.321em; left:12.41em;">
<div class="formData">VehCry</div>
</div>
 
<div class="stl_01" style="top:10.80em; left:16.41em;">
<div class="formData">IDNum</div>
</div>
 
<div class="stl_01" style="top:12.321em; left:18.41em;">
<div class="formData">IDOrgn</div>
</div>
 
<div class="stl_01" style="top:12.321em; left:38.41em;">
<div class="formData">PassOrgn</div>
</div>
 
<div class="stl_01" style="top:17.321em; left:3.41em;">
<div class="formData">Own1st</div>
</div>
 
<div class="stl_01" style="top:17.321em; left:18.41em;">
<div class="formData">OwnMid</div>
</div>
 
<div class="stl_01" style="top:17.321em; left:29.41em;">
<div class="formData">OwnLst</div>
</div>
 
<div class="stl_01" style="top:19.321em; left:12.41em;">
<div class="formData">OwnEnty</div>
</div>
 
<div class="stl_01" style="top:19.321em; left:42.41em;">
<div class="formData">OwnCnty</div>
</div>
 
<div class="stl_01" style="top:24.21em; left:5.41em;">
<div class="formData">OwnAdd</div>
</div>
 
<div class="stl_01" style="top:24.21em; left:24.41em;">
<div class="formData">OwnCty</div>
</div>
 
<div class="stl_01" style="top:24.21em; left:38.41em;">
<div class="formData">OwnSt</div>
</div>
 
<div class="stl_01" style="top:24.21em; left:48.41em;">
<div class="formData">OwnZp</div>
</div>
 
<div class="stl_01" style="top:26.321em; left:5.41em;">
<div class="formData">PreOwn</div>
</div>
 
<div class="stl_01" style="top:26.21em; left:24.41em;">
<div class="formData">PreCty</div>
</div>
 
<div class="stl_01" style="top:26.21em; left:34.51em;">
<div class="formData">PreSt</div>
</div>
 
<div class="stl_01" style="top:26.21em; left:41.01em;">
<div class="formData">DealerNum</div>
</div>
 
<div class="stl_01" style="top:34.921em; left:1.541em;">
<div class="formData">LienDt</div>
</div>
 
<div class="stl_01" style="top:34.921em; left:13.41em;">
<div class="formData">LienHld</div>
</div>
 
<div class="stl_01" style="top:37.1em; left:5.41em;">
<div class="formData">LienAdd</div>
</div>
 
<div class="stl_01" style="top:37.1em; left:24.41em;">
<div class="formData">LienCty</div>
</div>
 
<div class="stl_01" style="top:37.1em; left:38.41em;">
<div class="formData">LienSt</div>
</div>
 
<div class="stl_01" style="top:37.1em; left:48.41em;">
<div class="formData">LienZp</div>
</div>
 
<div class="stl_01" style="top:45.1em; left:22.41em;">
<div class="formData">Sales</div>
</div>
 
<div class="stl_01" style="top:49.885em; left:22.41em;">
<div class="formData">Tax</div>
</div>
 
<div class="stl_01" style="top:53.791em; left:22.41em;">
<div class="formData">Tax</div>
</div>
 
<div class="stl_01" style="top: 61.5em; left:31.52em;">
<div class="formData">Own1st OwnMid OwnLst</div>
</div>
 
 
<img  height="1465" width="1110" alt="" src="https://pdforms.losttitleconnection.net/TITLAPP-2.png"/>
 
</div>
</body>
</html>

Any and all help in solving this is greatly appreciated... and I'm glad to learn, read or research any and all suggestions in an effort to get this done. Thanks in advance for your time and assistance.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 14 hours 57 sec ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9716
Points: 3792

Purpose?

What is your intent here? It sounds like you want to produce a printed document. If so, it is a poor choice to html/css/js/img to do it. As you describe it, your form will not be accessible nor device independent.

It will certainly be better to give the user an editable .pdf document. Google for editable pdf.

An alternative you might try is to give the user a regular html form, which will be usable by anyone and on any type browser. Insert the form's data into a LaTEX document and compile server-side. Then export to a pdf and deliver to the user.

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.