ePUB logo

Centering for an ePUB

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


11 September 2014

One comment

Make a comment (no id or logon required)

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s