This is how we center the text for our ePUB files. After creating our ePUB files we found that the centering of text didn’t always work – even on devices where we’d tested the ePUB files during the build. This is due to the ePUB that eventually ends up on the ereading device going through the proprietory load process for the device, and some of them render the centering commands differently. We therefore used a combination of approaches to centering – though it is also worth considering if you want to center at all. Some devices offer the user the chance to control how the text is shown, what justification to use, and some of the code suggested below will mean that the user’s preferences are ignored, so don’t use this approach too widely.
This is what is needed around the text you want to center within each of the text html files:
<p class=”yourclass”><span class=”centered”>Your text to center</span></p>
This is also needed, assuming that you want the whole ‘body’ centered then can add the ‘id’ centertext, but still do the spans around each individual paragraph (p):
<body class=xyz id=”centertext”>
With the main text area that makes up the ‘body’. This is the main area of the book chapter it starts with <body> and ends with </body>
</body>
These are the controls for this that we included in the style.css:
centertext {
text-align: center;
text-indent: 0em;
}
span.centered { display:block; text-align: center; text-indent: 0em; }
The style.css was associated to each file with the following code at the top of the html file in the head section:
<head>
css” rel=”stylesheet” type=”text/css” />
<title>Your title</title>
</head>
Definitions: ePUB – format for an electronic book ereader – device to read an ebook css – cascading style sheet, set of shared formatting commands to control the appearance html – hypertext markup language. The formatting words that go around the text to tell the ereader how you want the book to appear (within < and > characters) 0em – here used for text-indent, this gives the size of the indent. It says it is made up of no (zero) elements of the type called ’em’. The size of em is the equivalent to the size of the ‘m’ character of the font you are using for that part of the text #centretext – the name of this section of the css file p, class, span, /span, /p, body, /body, head, /head, link, href, rel, type, title – html commands text-align, text-indent, span.centered, display-block – css control commands
Originally posted to wordpress.com on 11 September 2014.
When we tested our ePubs in various devices we found some text that should be centred wasn’t, so we adopted the above approach. While the last ePubs we’ve created haven’t had that problem we’ve kept the post in case e encounter the problem again so we can hopefully use the same fixes.