The problem with this markup is that 1) it’s not actually vertically centered (at least at the type size I generally read at); and 2) it gets worse as the font size increases.

This did get me thinking about how to actually create vertically centered text in iBooks. Here’s what I came up with.

First, my requirements for acceptable vertically centered text:

Must be either mathematically or visually centered

Must remain centered regardless of type sizes

Has to work when a line breaks to two or three lines

note: #3 means I do NOT recommend using this technique on anything more than a headline (maximum maybe 6 words). Because of small devices like iPhones and the ability of users to scale fonts, this technique could push text off of the screen and lead to missing words.

Here’s how this works. First, we add a margin of 50vh units (vh stands for viewport height). This means we add a margin of 50% of the viewports total height, which in this case in iBooks is the page area inside the margin. So that would put the beginning of the text at the middle point of screen. In order to move the text half of its own height up (thereby vertically centering it in the space) we use the CSS3 transform style with a value of translateY(-50%) (I added both the -webkit-transform prefixed style and the transform style for future compatability). translateY(-50%) moves the text up half of its total height, so it will work no matter how many lines the text runs to.

As a bonus, if you wanted to visually center the text (rather than just mathematically), you could use translateY(-75%) or something similar to tweak the text up just slightly.

17 Responses to “Vertically Centered Text in iBooks”

I recently created an flowing ebook that included 70+ pieces of individual art, no captions for any of them. I wanted each to go on its own page, centered left and right, top and bottom. None of the art was the same size. I couldn’t figure out the CSS after much wrangling (I come from a print background), so I ended up putting a plain white box behind each to force them to appear on their own pages.

Will this work on most readers or ibooks only? I also have experimented on vh units for full size images with captions, it works but when you rotate the device from portrait to landscape or reverse, this implementation breaks. The only way to view it again properly is to go back to library and reopen the file.

I don’t have an iPad in hand now to test the demo file but will surely give feedback once I tested it.

iBooks for iOS has a bug of not recalculating viewport size (and therefore viewport-relative distances too) when changing orientation after a page with such CSS has been already rendered. Rotating the page from portrait to landscape or viceversa uncenters the text, potentially even leaving part of it out of the screen limits.

There’s a fix for that in the example file, but it will only work in instances like this, where the page has no need to be more than one page tall. But yeah that’s a real bug and I would generally avoid using viewport sizing units in any instance except this.

I tested this pretty extensively, but if you can reproduce it I’m happy to take another look.

I couldn’t recognize what part of the code you added to attempt bypassing the bug, but it is accomplishing that at any rate. I am using an iPhone 4 running iOS 7.1.2 and iBooks 3.2.

Steps to reproduce:

1. Open the test book in portrait.
2. Open the TOC and go to “Mathematically centered”. The text will be centered.
3. Rotate to landscape. The text will not be centered.
4. Go back to the Library.
5. Still in landscape, open the book. The text will be centered.

Adobe Digital Editions 1.7.2 & 2.0.1 bomb as soon as they see `vh` in the CSS. As is often the case with that unfortunate pieces of crap software, it is not a good citizen even when you take the trouble to add a fallback for reading systems that do not support viewport-relative sizes by preceding that CSS rule with another identical one using “%” instead, for example. They crash nevertheless.

Anyone tried “Centering the Unknown”? This works on the browser and it doesn’t involve vh units, but it uses pseudo elements which might not be supported on most reading systems. I’m not sure if this will work on flowing epubs but it sounds promising.

Hey Mark,
I’ve played with this a bit but haven’t done a thorough job of checking its support on devices. I think if you wanted to try to get this to be supported everywhere you’d be better off using tables than this trick.