Center align text in epub

[virtual_ink]

I have been trying to find a fix all day but my head is about to explode. I cannot get text to center consistently throughout my epub.

In addition to the paragraph styles I wish to centre, I use a centered '*' to sub-seperate some sections of the book. Do I really need to convert these to images?

I have read these posts about related problems, but am not sure a solution is present:
http://isambard.com.au/blog/2010/08/...b-on-the-ipad/
http://www.pigsgourdsandwikis.com/20...-worse-in.html

Can anyone offer a solution?

[AlexBell]

For what it is worth this is what I do:

- in the stylesheet: .centre { text-indent: 0; text-align: center; }
- in the HTML: <p class="centre">*</p>

The reason for the text-indent: 0; is that I have paragraphs set to be indented, and if I don't remove the indent they won't be centred.

[virtual_ink]

Thanks very much for your reply Alex. Have you tested the results on an iPad with the settings in iBooks for 'Full Justification' switched ON (the default setting referred to in the Pigs, Gourds and Wikis link above)?

That is what I have been testing against but it is not working. The iPad settings seem to override the css and html. I'm not sure if anyone has come up with a clever fix for this yet.

[mtrahan]

I had some centering problems with iBooks also. iBooks wouldn't center paragraph but was centering header tags correctly. The solution I found after a bit of research was to add <span> and </span> tags right inside the element you want centered. To use the example above, I would in the text put <p class="centre"><span>*</span></p> instead. It worked for me at least. And yep, no indent on the centered stuff.

Good luck.

Edit: And yes, the <span> tags were added because of the full justification thingy. When I turned that off, things were centered correctly without the <span> tags, but not when turned on.

[virtual_ink]

I've just tried the above and it works!! Thank you so much mtrahan, you've well and truly made my day

[mtrahan]

Glad to hear it did the trick

[Jellby]

Have you tried using <div class="centre"> instead of <p class="centre">?

[Zeypxi]

Stop using ipads for reading ebooks, they're a pain in the ass.

[AlexBell]

Originally Posted by virtual_ink

Thanks very much for your reply Alex. Have you tested the results on an iPad with the settings in iBooks for 'Full Justification' switched ON (the default setting referred to in the Pigs, Gourds and Wikis link above)?

That is what I have been testing against but it is not working. The iPad settings seem to override the css and html. I'm not sure if anyone has come up with a clever fix for this yet.

No, I'm sorry, I don't have an iPad. I use a Sony reader.

I was under the impression that what looks good on my Sony would look good on an iPad. Is this not so?

Regards, Alex

[virtual_ink]

Originally Posted by Jellby

Have you tried using <div class="centre"> instead of <p class="centre">?

I haven't Jellby, I'll give it a shot. What are there benefits of using <div> over <p>?


@Alex, I haven't tried the Sony reader yet but iPad have a default setting for 'full justification' - which throws a lot of centered items over to the left margin (its an odd one, as some things remain centered).

[AlexBell]

Originally Posted by virtual_ink

I haven't Jellby, I'll give it a shot. What are there benefits of using <div> over <p>?


@Alex, I haven't tried the Sony reader yet but iPad have a default setting for 'full justification' - which throws a lot of centered items over to the left margin (its an odd one, as some things remain centered).

I'll respond to both questions if I may - but I'm writing as someone who makes ePub by hand, marking up the source documents into XHTML 1.1 strict and then packaging them into an ePub.

For what is worth I only use <div class="centre"> ....</div> when I am centering several things together like

<div class="centre">
<p>Do you know who made your ebook reader?</p>
<p>Do you know whether they were paid properly and treated fairly?</p>
<p>If not, you could ask the manufacturer.</p>
<p style="margin-top: 1em;">Why it matters &hellip;&hellip;</p>
<p>http://www.guardian.co.uk/<br />
technology/2011/apr/30/<br />
apple-chinese-factory-workers-suicides-humiliation</p>

<p class="larger" style="margin-top: 3em;">Circaidy Gregory Press</p>
<p>www.circaidygregory.co.uk<br />
Independent Books for Independent Readers</p>

</div>


For the second part: I set the justification in the stylesheet - almost all the ebooks I do have the text justified. Do you know whether the iPad's setting over rules the stylesheet?

[Jellby]

Originally Posted by virtual_ink

I haven't Jellby, I'll give it a shot. What are there benefits of using <div> over <p>?

None in principle. But from what I have read, iBooks has some particular concepts about <p> et al., and maybe using <div> instead bypasses this (and it would obviate the need of "text-indent: 0" too).

[charleski]

This is why ereaders should not try to override the code specified in the book's css. The only excuse for it is the abysmal typography found in many commercial ebooks that are produced by technicians working on minimum wage. Even then, any programmer with an ounce of sense would realise that a Full Justification override should only apply to elements set to text-align: left.

Here's a blog post about the <span> oddity in iBooks:
http://www.pigsgourdsandwikis.com/20...ooks-bugs.html
Note that it's a year old ... Apple is far more interested in adding flashy features than fixing core issues, though they have at least added support for embeddable fonts.

[virtual_ink]

@ Alex, yes iPad overrides the stylesheet. Crazy huh?

Aside from manually adding a blank <span> to every <p> that needs it, does anyone know a way to do this at a macro level?

[virtual_ink]

Also, I can not for the life of me figure out how get his centered in iBooks.

I want to center the text 'PART I." and here's the code:

</head>
<body>
<div id="chapter-6.html" xml:lang="en-GB">
<div class="center">
<h2 id="toc_marker-3" class="sectiontitle"><strong>PART I.</strong></h2>
</div>
</div>
</body>
</html>


the css for sectiontitle is:

h2.sectiontitle {
font-family : Georgia, serif;
font-weight : bold;
font-style : normal;
font-size : 1.17em;
text-decoration : none;
font-variant : normal;
line-height : 1.2;
text-align : center;
color : #818386;
text-indent : 0px;
margin : 0px 0px 16px 0px;
}


[and the div]

div.center {
text-align : center;
}