07-04-2011, 02:58 AM | #1 |
Zealot
Posts: 107
Karma: 1000
Join Date: Sep 2010
Location: Melbourne, Australia
Device: iPad2, Kindle
|
Center align text in epub
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? |
07-04-2011, 04:26 AM | #2 |
Wizard
Posts: 3,413
Karma: 13369310
Join Date: May 2008
Location: Launceston, Tasmania
Device: Sony PRS T3, Kobo Glo, Kindle Touch, iPad, Samsung SB 2 tablet
|
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. |
Advert | |
|
07-04-2011, 07:36 AM | #3 |
Zealot
Posts: 107
Karma: 1000
Join Date: Sep 2010
Location: Melbourne, Australia
Device: iPad2, Kindle
|
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. |
07-04-2011, 07:40 AM | #4 |
Colonel Mustard
Posts: 90
Karma: 1426
Join Date: Feb 2010
Location: Montreal
Device: iPhone 6, Kindle Paperwhite 2, iPad 2
|
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. Last edited by mtrahan; 07-04-2011 at 07:42 AM. Reason: Precision |
07-04-2011, 07:50 AM | #5 |
Zealot
Posts: 107
Karma: 1000
Join Date: Sep 2010
Location: Melbourne, Australia
Device: iPad2, Kindle
|
I've just tried the above and it works!! Thank you so much mtrahan, you've well and truly made my day
|
Advert | |
|
07-04-2011, 08:01 AM | #6 |
Colonel Mustard
Posts: 90
Karma: 1426
Join Date: Feb 2010
Location: Montreal
Device: iPhone 6, Kindle Paperwhite 2, iPad 2
|
Glad to hear it did the trick
|
07-04-2011, 08:38 AM | #7 |
frumious Bandersnatch
Posts: 7,516
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
Have you tried using <div class="centre"> instead of <p class="centre">?
|
07-04-2011, 01:49 PM | #8 |
Member
Posts: 23
Karma: 10
Join Date: Apr 2011
Device: none
|
Stop using ipads for reading ebooks, they're a pain in the ass.
|
07-05-2011, 04:43 AM | #9 | |
Wizard
Posts: 3,413
Karma: 13369310
Join Date: May 2008
Location: Launceston, Tasmania
Device: Sony PRS T3, Kobo Glo, Kindle Touch, iPad, Samsung SB 2 tablet
|
Quote:
I was under the impression that what looks good on my Sony would look good on an iPad. Is this not so? Regards, Alex |
|
07-05-2011, 09:13 PM | #10 | |
Zealot
Posts: 107
Karma: 1000
Join Date: Sep 2010
Location: Melbourne, Australia
Device: iPad2, Kindle
|
Quote:
@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). |
|
07-06-2011, 04:41 AM | #11 | |
Wizard
Posts: 3,413
Karma: 13369310
Join Date: May 2008
Location: Launceston, Tasmania
Device: Sony PRS T3, Kobo Glo, Kindle Touch, iPad, Samsung SB 2 tablet
|
Quote:
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 ……</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? |
|
07-06-2011, 05:20 AM | #12 |
frumious Bandersnatch
Posts: 7,516
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
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).
|
07-06-2011, 07:19 AM | #13 |
Wizard
Posts: 1,196
Karma: 1281258
Join Date: Sep 2009
Device: PRS-505
|
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. |
07-06-2011, 11:10 PM | #14 |
Zealot
Posts: 107
Karma: 1000
Join Date: Sep 2010
Location: Melbourne, Australia
Device: iPad2, Kindle
|
@ 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? Last edited by virtual_ink; 07-12-2011 at 09:44 PM. |
07-12-2011, 10:38 PM | #15 |
Zealot
Posts: 107
Karma: 1000
Join Date: Sep 2010
Location: Melbourne, Australia
Device: iPad2, Kindle
|
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; } Last edited by virtual_ink; 07-13-2011 at 12:23 AM. |
Tags |
alignment, centering, epub |
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
need help on how to align a table to the right | NASCARaddicted | ePub | 6 | 02-18-2011 01:46 PM |
I can not align the text...help please! XD | derfel_spain | ePub | 17 | 12-18-2010 09:45 AM |
Can you delete div with align=center | mufc | Recipes | 4 | 12-10-2010 06:23 PM |
ePub files do not center a custom <hr /> tag! | Haidon | ePub | 2 | 08-21-2010 04:29 AM |
Text becomes center-aligned when converting | Alfy | Calibre | 12 | 01-19-2009 12:41 AM |