By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
458,224 Members | 1,414 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 458,224 IT Pros & Developers. It's quick & easy.

Pixel positioning across multiple printed pages

P: n/a
Hello,

I'm having a hard time trying to configure printed output that consists
of multiple pages. The idea is the following:

<div style="
border: 1px solid blue;
position: absolute;
top: 20px;
left: 20px;
width: 100px;
height: 100px;
page-break-after: always;
">AA</div>

<div style="
border: 1px solid green;
position: absolute;
top: 30px;
left: 30px;
width: 80px;
height: 80px;
">BB</div>

<div style="
border: 1px solid orange;
position: absolute;
top: 30px;
left: 250px;
width: 80px;
height: 80px;
">CC</div>

The page-break-after does not work here because of the absolute
positioning. When I change 'absolute' to 'relative' in the code, then
the printed page breaks correctly between the <div>'s:

<div style="
border: 1px solid blue;
position: relative;
top: 20px;
left: 20px;
width: 100px;
height: 100px;
page-break-after: always;
">AA</div>

<div style="
border: 1px solid green;
position: relative;
top: 30px;
left: 30px;
width: 80px;
height: 80px;
">BB</div>

<div style="
border: 1px solid orange;
position: relative;
top: 30px;
left: 250px;
width: 80px;
height: 80px;
">CC</div>

The enclosing tags for the code are <body>...</body>. But this
construction is not clean and error-sensitive. Plus, the last <divis
displayed lower than the middle <div>, though they have identical
top-instructions (30px) (at least in MSIE).

As a last resort, I tried to format my print layout with a huge pixel
height across multiple pages; something like this:

<div style="
border: 1px solid blue;
position: absolute;
top: 20px;
left: 20px;
width: 100px;
height: 100px;
">XX</div>

<div style="
border: 1px solid green;
position: absolute;
top: 1200px;
left: 30px;
width: 80px;
height: 80px;
">YY</div>

But I'm going over 50,000 pixels here and the absolute position becomes
unreliable/ugly across multiple printed pages. Especially because I'm
doing it on an old matrix pin printer with form feed.

Ideally I'm looking for a way to use absolute pixel positioning across
multiple printed pages, something like this:

<div "position:absolute;top:10px;left:10px;">AA</div>
[start new printer page + reset top&left settings to new page]
<div "position:absolute;top:20px;left:20px;">BB</div>

Any suggestions/workarounds ?

Thanks,

--
Bart

Jul 13 '06 #1
Share this Question
Share on Google+
3 Replies


P: n/a
Bart Van der Donck wrote:
[...]
Ideally I'm looking for a way to use absolute pixel positioning across
multiple printed pages, something like this:

<div "position:absolute;top:10px;left:10px;">AA</div>
[start new printer page + reset top&left settings to new page]
<div "position:absolute;top:20px;left:20px;">BB</div>
For future reference: there is a solution. Split up the page in as much
iframes as needed and then use an absolute position inside each iframe.

--
Bart

Jul 13 '06 #2

P: n/a
Bart Van der Donck wrote:
Bart Van der Donck wrote:
>[...]
Ideally I'm looking for a way to use absolute pixel positioning across
multiple printed pages, something like this:

<div "position:absolute;top:10px;left:10px;">AA</div>
[start new printer page + reset top&left settings to new page]
<div "position:absolute;top:20px;left:20px;">BB</div>

For future reference: there is a solution. Split up the page in as much
iframes as needed and then use an absolute position inside each iframe.
If this is really a web page, primarily meant to be read in web clients,
this is awful and I suspect you'll find the splitting up and later
maintenance as changes are made to be murder.

If this is meant primarily for highly formatted printing, HTML is not
designed for that. Create a PDF.
Jul 13 '06 #3

P: n/a
Harlan Messinger wrote:
[...]
For future reference: there is a solution. Split up the page in as much
iframes as needed and then use an absolute position inside each iframe.

If this is really a web page, primarily meant to be read in web clients,
this is awful and I suspect you'll find the splitting up and later
maintenance as changes are made to be murder.

If this is meant primarily for highly formatted printing, HTML is not
designed for that. Create a PDF.
Thanks for your comment - yes I'm aware of that but it's only for
intranet use and I can control all browser print settings (top/left
marges, header/footer, etc.) and it is the same printer.

It is not that much data that I need to print per page (ca 5-10
positioned divs with very small content), but it may be many pages and
the positioning needs to be exact. The code is quite short and not that
complicated; I've 1 master file with 20-50 iframes each having a style
like

border: 0px; position: absolute; top: 0px; left: 0px;
width: 99%; height: 900px; margin: 0px; padding: 0px;
page-break-after: always;

Then I have one CGI file for the iframe contents
(iframecontents.cgi?ID=123, iframecontents.cgi?ID=124, etc.), with each
5-10 divs like:

<div style="
position: absolute;
top: 20px;
left: 20px;
">first data</div>
<div style="
position: absolute;
top: 40px;
left: 40px;
">second data</div>

--
Bart

Jul 14 '06 #4

This discussion thread is closed

Replies have been disabled for this discussion.