468,469 Members | 2,158 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,469 developers. It's quick & easy.

Pixel positioning across multiple printed pages

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
3 2588
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
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
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.

Similar topics

12 posts views Thread by Tom Szabo | last post: by
7 posts views Thread by glutinous | last post: by
reply views Thread by John A Grandy | last post: by
4 posts views Thread by Jay | last post: by
6 posts views Thread by Bill | last post: by
2 posts views Thread by =?Utf-8?B?R2lyaXNo?= | last post: by
14 posts views Thread by Fistro | last post: by
1 post views Thread by kmladenovski | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.