Vertically Centered Text in iBooks

  • Sumo

At WWDC this week, Apple announced a new programming language called Swift. To coincide with its release, they included an iBooks title that documents the language. The opening page looks like this:

Screenshot 2014-06-03 22.35.05

Of course, many ebook clients want to know how to vertically center text in an EPUB file. Seeing this I thought that maybe the iBooks team had solved it. But I was disappointed by the results.

.part .chapter-name {
    font-size: 2em;
    text-align: center;
    margin-top: 55%;
}
The markup iBooks Swift book uses to vertically center text

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:

  1. Must be either mathematically or visually centered
  2. Must remain centered regardless of type sizes
  3. 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.

Now, the code:

.perfect-center {
    margin: 50vh 0 0 0;
    text-align: center;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

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.

See the demo file for an example.

17 Responses to “Vertically Centered Text in iBooks”

  1. Marty S says:

    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.

    It was a lot of extra work. There must be a better way!

    Can this technique be applied to images? Thanks for your insights!

    Cheers,
    Marty

  2. Derrick Schultz says:

    Yeah, this could work for images as well.

    I’d only add this to the img to make sure the image isn’t too large:

    img {
        max-width: 100%;
        max-height: 100vh;
    }
    
  3. Marty S says:

    Derrick, I will print this out and frame it. 🙂 Thanks for your help and it’s so great to see you breathing life into this site.

    Marty

  4. elmimmo says:

    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.

  5. Derrick Schultz says:

    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.

  6. elmimmo says:

    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.

  7. Derrick Schultz says:

    yeah, that’s a good point. this is definitely something that should only be included in iBooks, and you should test and test again.

  8. elmimmo says:

    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.

    Step 3 and 5 look different. Step 3’s behavior is a bug.

  9. elmimmo says:

    I meant to write “it is not accomplising it”

  10. Derrick Schultz says:

    ah, so that’s actually a webkit bug, not just an iBooks bug.

    good news. solved in iOS8 (haven’t checked iBooks, but assume it might be fixed there too): https://github.com/scottjehl/Device-Bugs/issues/36#issuecomment-45202747

    there’s also a fix that could be added for older versions: https://github.com/scottjehl/Device-Bugs/issues/36#issuecomment-45308900 (and hey, iBooks supports JS so this is doable).

    Thanks for digging into this. Really helpful.

  11. elmimmo says:

    Go figure. ADE only seems to crash if you use viewport-relative sizes with the `margin` shorthand, not so with, say, `margin-top`. I guess I should be happy that there is a workaround…

  12. […] Vertically Centered Text in iBooksHow to mathematically centre text vertically in iBooks (rather than by cheating) […]

  13. Mark Anthony Degamo says:

    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.

    Thanks.

  14. Mark Anthony Degamo says:

    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.

  15. Derrick Schultz says:

    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.

  16. […] Vertically Centered Text in iBooksHow to mathematically centre text vertically in iBooks (rather than by cheating) […]