centering content

[p_nut33]

Hello,

I am creating some ebooks using html and calibre. I would like to emulate publisher pages in paper books, where the information is centered on the page.

I have created a DIV with the content and centered it horizontally in the page. In calibre I set up <div> as a breaking page so it will stand alone.

Because of the text re-flowing characteristics of epubs, I would like to know if there is a way to get around this property and center the content vertically and horizontally.

[eschwartz]

You could simply add a margin on top to push it downward. To my knowledge, there is no way to specify vertical centering in ebooks. But I could be wrong, and there are much more knowledgeable people here who will gladly pitch in.

[kovidgoyal]

I doubt there's any method that will work for all readers/devices. But the best technique I know of is to make an absolutely positioned div of fixed height and set its margins to auto.

This will of course only work if your vertically centered content is the only content in a single html file.

A more complex, but similar in spirit technique is to use SVG. IIRC there is a demo of this in the calibre epub advanced formatting demo.

[HarryT]

This question has nothing to do with Calibre. Moved to the ePub forum.

[Jellby]

There's no sure way to center stuff vertically. This is because there's no sure way (according to the specification) to get the screen height. There are some tricks around that apparently work in some or even most epub readers, but that's more by chance than by design. The best solution is simply add some top margin (and if you add it in %, note that it refers to a percentage of the width, not of the height).

[JSWolf]

Originally Posted by Jellby

There's no sure way to center stuff vertically. This is because there's no sure way (according to the specification) to get the screen height. There are some tricks around that apparently work in some or even most epub readers, but that's more by chance than by design. The best solution is simply add some top margin (and if you add it in %, note that it refers to a percentage of the width, not of the height).

I disagree. Using an h1, the following css code works fine.

.half {
margin-top: 48%;
font-weight: bold;
text-align: center;
text-indent: 0
}

[HarryT]

No. As has been said, a margin width expressed as a percentage is actually taking a percentage of the page width, not the page height.

[Jellby]

...even if it's a top margin. At least according to the CSS specifications. If a renderer behaves otherwise, it's flawed, even if you (or I) would like it better.

[GrannyGrump]

Yes, easily tested by display in a tall narrow window with ADE.

And margin:auto is often not honored -- some readers set auto-margins to ZERO.

[HarryT]

Originally Posted by Jellby

...even if it's a top margin. At least according to the CSS specifications. If a renderer behaves otherwise, it's flawed, even if you (or I) would like it better.

It's easy to test: display the same ePub on a screen with a 4:3 aspect ratio (most eInk devices, or an iPad) and on a device with a 16:10 aspect ratio (almost all Android devices). If the top margin is a percentage of the page width, the margin should be relatively narrower on the 16:10 device than on the 4:3; if it's genuinely honouring page height, it will the same (percentage-wise) in both cases.

[kovidgoyal]

Like I said, use either margin:auto with a fixed size div, or if your target reader does not support that, use SVG, as is shown in this demo file (see the full screen image page, which includes vertically centered text).

http://manual.calibre-ebook.com/conv...ormatting-demo

[JSWolf]

The code I posted does work in ADE. So any renderer that code fails to work with is broken.

[JSWolf]

Originally Posted by HarryT

No. As has been said, a margin width expressed as a percentage is actually taking a percentage of the page width, not the page height.

Doesn't matter what's been said. What matters is what works and that code works with ADE.

[Jellby]

Originally Posted by JSWolf

The code I posted does work in ADE. So any renderer that code fails to work with is broken.

Of course not. It only means that the code is ADE-only (and non-compliant).
Besides, it "assumes" that the text's height is more or less 4% of the screen. Increase the font size considerably (or make the text several lines long) and it will not be centered (or ADE is even more broken).

[Jellby]

Originally Posted by kovidgoyal

use SVG, as is shown in this demo file (see the full screen image page, which includes vertically centered text).

Unfortunately, there's no reliable and compliant way of setting the SVG to full screen height. "height:100%" may work in most real-world readers, but that's not guaranteed.