Epub is epub and devices are devices. With iPad ignoring text-align: center; there is a lot of extra work going on out there to put in substitute elements to make ePub work with devices. Every new device presents new "challenges".
The most common hack to overcome this iPad problem is to introduce a blank <span> statement into the paragraph. It can be a lot of work and looks like this:
<p class="center-me"><span>I am text that wants to be centered</span></p>
To avoid the spoiling of the XHTML with countless unnecessary <span> statements, these can be processed in with Javascript for iPad. This works for us because of our automated ePub assembly using IGP:Formats on Demand.
We use a lot of dedicated class statements in headers and other text to get good looking outputs. here is our generic title block structure:
<div class="title-block">
<h1>The title</h1>
<p class="title-sub">The sub-title</p>
<p class="title-author">The author of the work</p>
<p class="title-contributor">Any old contributor</p>
<p class="title-other">For any other text that may be required</p>
</div>
So with that little combination, the iPad doesn't center text when justified mode is on.
Our Javascript dude Atul Kulkarni came up with a really small bit of Javascript to fool iPad and insert the spans with Javascript at runtime. It's listed below.
ePub says Javascript is not forbidden, just not recommended. Because the iPad is Safari at heart it is trying really hard to use the Javascript, bless its little rendering heart. The final trick is you can't put this into the head statement as a <script type="text/javascript">. The enemy of good ePubs strip that off.
Something like this goes in the OPF manifest:
<item id="x_epub_and_javascript_for_ipad_04" href="insertSpan.js" media-type="text/javascript"/>
This goes into the <head> of each page:
<script type="text/javascript" src="insertSpan.js"></script>
... and if you have a lot of centered text, the Javascript does the job for you. Great for that 106 chapter book.
Here is a test ePub. The Book and Chapter title blocks are all centered. The publisher colophon block and copyright page missed out as they are not in the Javascript.
Download Epub_and_javascript_for_ipad
Feel free to crack the ePub open and have a look.
This validates. I am not sure we are recommending this. It works, but is subject to the peccadilloes of the Apple programmers, as is the use of the <span> hack. If they have a mood fit tomorrow and change the rules, using this system your file may not be filled with useless <span> statements, but it will have some useless, although harmless Javascript.
The Javascript. Change our class statements for your class statements
Save this into a file insertSpan.js (or whatever). If you minify it, it is a whopping 800Bytes.
function setSpanIGP()
{
var clsElementList=document.getElementsByClassName('title-num');
setSpaninPara(clsElementList);
clsElementList=document.getElementsByClassName('title-sub');
setSpaninPara(clsElementList);
clsElementList=document.getElementsByClassName('title-author');
setSpaninPara(clsElementList);
clsElementList=document.getElementsByClassName('title-contributor');
setSpaninPara(clsElementList);
clsElementList=document.getElementsByClassName('title-other');
setSpaninPara(clsElementList);
clsElementList=document.getElementsByClassName('caption');
setSpaninPara(clsElementList);
}
function setSpaninPara(pClassList)
{
for(i=0;i<=pClassList.length;i++)
{
if(pClassList[i])
{
var para_html=pClassList[i].innerHTML;
para_html='<span>'+para_html+'</span>';
pClassList[i].innerHTML=para_html;
}
}
}
function init()
{
setSpanIGP();
}
window.onload=init;
If you add the code to made Ipad display better, will it mess up the display on Nook or Kindle made from the same html? Thanks.
Posted by: Elizabeth Boepple | 20 August 2011 at 10:56 AM
Hi
The best solution so far seems to be that you use a heading for any paragraphs you want centered on an iBook:
Blah, blah
with CSS:
.centered {text-align: center !important;}
of course, you can additionally set font size, color etc. in the CSS style sheet.
Posted by: Scott Hooper | 12 November 2011 at 01:28 AM