View Full Version : Center align text in epub


virtual_ink
07-04-2011, 03:58 AM
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/18/issue-with-centre-aligned-text-in-an-epub-on-the-ipad/
http://www.pigsgourdsandwikis.com/2010/06/apple-makes-full-justification-worse-in.html

Can anyone offer a solution?

AlexBell
07-04-2011, 05:26 AM
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
07-04-2011, 08:36 AM
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
07-04-2011, 08:40 AM
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
07-04-2011, 08:50 AM
I've just tried the above and it works!! Thank you so much mtrahan, you've well and truly made my day :)

mtrahan
07-04-2011, 09:01 AM
Glad to hear it did the trick :)

Jellby
07-04-2011, 09:38 AM
Have you tried using <div class="centre"> instead of <p class="centre">?

Zeypxi
07-04-2011, 02:49 PM
Stop using ipads for reading ebooks, they're a pain in the ass.

AlexBell
07-05-2011, 05:43 AM
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
07-05-2011, 10:13 PM
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
07-06-2011, 05:41 AM
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
07-06-2011, 06:20 AM
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
07-06-2011, 08:19 AM
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/2010/06/beating-ibooks-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
07-07-2011, 12:10 AM
@ 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
07-12-2011, 11:38 PM
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;
}

charleski
07-13-2011, 05:33 AM
@ 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?

One way to do this inside ID is to create a junk character style that doesn't contain anything that will be exported (set kerning to metrics, for instance*). Then open the Find/Change dialog, set the Find Format to Character Style: None and the Change Format to Character Style: iBooks junk, leave the other boxes blank and do a replace over the whole document.

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>


I thought iBooks did respect text alignment for header tags. Maybe try removing the <div class="center">


* kerning should, of course, always be set to metrics (!), but this isn't really relevant to ebooks :)

AlexBell
07-13-2011, 05:51 AM
@ Alex, yes iPad overrides the stylesheet. Crazy huh?

Thanks for letting me know. If I ever prepare an ebook for an iPad I'll keep that in mind.

coldplayplayer
07-13-2011, 07:02 AM
I use Notepad++ to edit my XHTML and CSS. Today I did a very similar thing you are asking about I think.

I did a find and replace search like this.

FIND: <p>(.*)</p>
REPLACE: <p><span>\1</span></p>

The (.*) is a wildcard search I believe so it found every instance in my XTHML page that started with <p> had text in between and then ended with </p> and replaced it with the <p><span> and </span></p>.

If you use them, don't forget to add the class after the p, for example <p class="bodytext">(.*)</p>

It worked for me and 99 changes were done in a little under a minute.

virtual_ink
07-20-2011, 10:46 PM
Fantastic, I will try this out.

On a related issue, when my * is centered, spacing above is not working as it should. My CSS is:

p.asterisk {
font-family : Georgia, serif;
font-weight : normal;
font-style : normal;
font-size : 1em;
text-decoration : none;
font-variant : normal;
line-height : 1.2;
text-align : center;
color : #000000;
text-indent : 0px;
margin : 8px 0px;
}

I have tried editing this line, as:
margin : 8px 0px 8px 0px;

But it didn't make any difference.

virtual_ink
07-21-2011, 02:42 AM
I use Notepad++ to edit my XHTML and CSS. Today I did a very similar thing you are asking about I think.

I did a find and replace search like this.

FIND: <p>(.*)</p>
REPLACE: <p><span>\1</span></p>

The (.*) is a wildcard search I believe so it found every instance in my XTHML page that started with <p> had text in between and then ended with </p> and replaced it with the <p><span> and </span></p>.

If you use them, don't forget to add the class after the p, for example <p class="bodytext">(.*)</p>

It worked for me and 99 changes were done in a little under a minute.

If my code already contains a class, and reads for eg:

<p class="bodycenter"><span>text text text</span></p>

Is there a way to adjust and use this find/replace methodology?

coldplayplayer
07-22-2011, 01:18 AM
If my code already contains a class, and reads for eg:

<p class="bodycenter"><span>text text text</span></p>

Is there a way to adjust and use this find/replace methodology?

I think I get what you're asking. In this case you want to search like this:

<p class="bodycenter"><span>(.*)</span></p>

I just tried it in Notepad++ and it worked. Basically you are just telling it to find each individual instance of code that starts with <p class="bodycenter"><span> and ends with </span></p>.

So I guess could say it is a more refined search than the original one I posted up and probably a good thing to remember. Otherwise if you already had a line of code like you suggested, the original find and replace method would produce the following result:

<p class="bodycenter"><span><span>text text text</span></span></p>

Does this help you out?

AlexBell
08-29-2011, 05:28 AM
@ 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?

I know this is a relatively old thread, but rather than start another may I ask whether you have found a solution?

virtual_ink
08-29-2011, 05:45 AM
I was doing a conversion today and didn't require a span around my centered asterisk. As there was only one in the book, I'm not convinced that ibooks have fixed the problem (I'd had some text center correctly before). I added a span just in case.

Not really an answer, but I haven't needed to revisit this for a while. I'm hoping coldplayplayers tip will work.

AlexBell
08-31-2011, 07:27 AM
I was doing a conversion today and didn't require a span around my centered asterisk. As there was only one in the book, I'm not convinced that ibooks have fixed the problem (I'd had some text center correctly before). I added a span just in case.

Not really an answer, but I haven't needed to revisit this for a while. I'm hoping coldplayplayers tip will work.

Thanks, Virtual_Ink.

I've just started trying to produce ebooks for the iPad, and am running into many problems - mainly centering text but some others.

Something which is driving me frantic at the moment is that I have produced several ePub ebooks using a template. Some of them when read on an iPad centre the text where I have required that, and some of them, using the same template, do not. And I don't know why.

Also, some of the images show on an iPad the same as they do on my Sony, and some do not. For example I use a logo for myself which I set to 25% of the screen width, and it looks the same on the iPad as it does on the Sony. Some images are floated to the right side of the screen and set to 50% width, and look the same on the iPad as on the Sony. But another image which is centred and set to 50% width looks much wider on the iPad than it does on the Sony. And I don't know why, nor how to make look the same on the iPad as on the Sony.

It seems to my jaundiced eye that Apple ePub is only a loose approximation of real ePub.

If ever I find out why these difference occur and how to fix them I'll ask the Moderator to start a sticky so we can all add explanations and fixes.