Forum How do I...?

Page relative positioning in documents

rvernon
Hello! I am formatting documents using Prince, and some of these documents need to have a title page. This page contains various block elements, each of which is supposed to be at a certain height in the page.

Absolute units, or units relative to the font, cannot work because the elements (and also the page) can vary in height. I know CSS3 viewports can do this (I can tell the user agent to place the element at 30% of the height of the viewport, which in the case of Prince is the height of the page), but Prince does not support them, and I’m sure supporting them is too much work for the Prince team at the moment.

I can use float:bottom for elements that need to be at the bottom of the page, but there is no float:two-thirds-of-the-page or float:one-quarter-of-the-page.
mikeday
You can use a percentage, but it is relative to the width of the page.

However, presumably you only have a limited number of page sizes to support, so it might be practical to have separate CSS rules for each page size?
rvernon
I only use two different page sizes, and that isn't really a problem because I can use a @page rule to have, as you suggest, separate rules for each page size.

However, the height of the elements can vary (e.g. if the title is sufficiently long to wrap on multiple lines, or if there is more than one author, since they are listed on different lines). As far as width is concerned, there is no problem because percentages can be used, but I have not found a solution for vertical positioning.

Edited by rvernon

mikeday
How about absolute positioning from the top of the page?
rvernon
That… could work (I originally thought about it and concluded, wrongly, that it couldn't work). If I calculate the absolute heights needed to have an element at a certain height in the page for each of the two page sizes, and if I make the elements completely at the bottom (their size can vary too, and if I position them absolutely, they might fall on the next page when they become too high) float there with float:bottom, it can work.

position:absolute and top:30vh would have worked for all paper sizes. top:calc((8.5in - 5cm)*0.3) would have worked for the US letter paper size, since I have top and bottom margins of 2.5cm. Prince supports neither viewport units, nor the calc function, so I'll have to go with top:6.882cm. That works regardless. Thank you!

Edited by rvernon