I have a tricky layout problem I'd like to resolve – it's a general problem in HTML/CSS, but perhaps something can be done in Prince.

Context are business cards, with three 'divs' - a logo at the top, a centered name in the middle, and bottom aligned information at the bottom.

- The .top area is a fixed height, contains a graphic, and is anchored at the top margin.

- The .middle area with the (middle aligned) name to take up the available space between the .top and the .bottom.

- The .bottom area has a variable amount of information/height, and is anchored at the bottom margin.

I.e., the name in the middle is centered between the fixed height logo above it, and the variable height information below it. The middle area takes up all the space not used by the .top and .bottom, so it has a variable height, or is in some other way vertically centered between to other elements, one of which has a variable height.

For the moment, I'm using display:table to take care of the middle and bottom alignment issues, but I can't seem to solve the variable row/cell height issue. For the moment I use an ugly hack of generating different classes and then hard coding heights for all of the areas, but I'd like to sove it in a more flexible way.

Any ideas?

On a more general level, might it be worth considering some more advanced (even if non-standard) methods for dealing with vertical alignment in Prince? It's a mess in HTML, which will hopefully be somewhat or completely solved with the Flexible Box Module *someday*. (ref. http://www.html5rocks.com/en/tutorials/flexbox/quick/ and http://hacks.mozilla.org/2010/04/the-css-3-flexible-box-model/).

In the same vein, a clear and easy strict alignment to a global/local baseline gird is something I'll be missing as I move away from InDesign to Prince.

Vertical centering has been a difficult topic in CSS for as long as I can remember.

There are a number of approaches for vertical alignment discussed around the web, but I'm not sure if any of them can achieve the layout that you want without any hard-coding at all. I suspect that some new CSS concepts would be required, like the flexbox model.

Regarding baseline alignment, we do plan to add an experimental "snap to baseline grid" control in a future release of Prince. Currently there is the line-stacking-strategy property, but this only applies to text, and doesn't help with images of arbitrary size.

Hello mike,

sorry for resurrecting this old thread, but have you already experimented with "snap to baseline grid"? I am currently exploring this topic as a client requires us to achieve this.

Greetings,
John

Not yet sorry, it's definitely still on the agenda, but not yet implemented.

Hi John, just wondering if you found a better solution to your vertical centering issue?
I was exploring Prince's support for display:table-cell and vertical-align and it seems to work pretty OK according to this test:
https://github.com/yeslogic/miscellaneous-testcases/blob/master/layout/table-cell-vertical-align-middle-centers-vertically-001.htm
So it seems like a structure where both lower parts of the card are display:table-cell (probably wrapped in two table-row elements) with the upper having vertical-align: middle and the lower bottom would work. Maybe I should even write a test for this use case

CSS tables might also be a solution to the baseline grid use case, but I guess it's not the most developer-friendly one..

Announcement: repos for tests/utils

Ah.. ignore that, I see what the problem is: it's hard to control the horizontal border between the two lower blocks because there isn't a good way to make the "footer" shrink-to-fit. Yes, this needs flexbox as far as I can tell. I hear the implementation of flexbox is making nice progress though

Announcement: repos for tests/utils

Edited 6 Dec 2016 by hallvord

hello hallvord,

no I haven't found a solution yet. we are still researching and experimenting though

greetings,
John