Let me start by saying that I'm only facing this issue on the iOS version of Aldiko Book Reader... the formatting works in the android version so this may be a bug.
I have a contents page where I have the chapter numbers (in roman numerals) and the name of each chapter. I want the numbers right-aligned and the chapter names left-aligned. See the first screenshot attached below.
In order to style the numbers differently from the names, the chapter names and the chapter numbers are placed in separate <span> tags within a containing <p> tag. I have one <p> tag for each entry in the html TOC.
In my XHTML:
Code:
<div id="contentsContainer">
<p>
<span class="rightAlign">I.</span>
<span class="left-align">Down the rabbit-hole</span>
</p>
<p>
<span class="rightAlign">II.</span>
<span class="left-align">The pool of tears</span>
</p>
</div>
In my CSS:
Code:
div#contentsContainer {
width: 75%;
margin: 1em 12%;
text-align: center
}
/* Formatting unrelated to floating text */
div#contentsContainer p {
font-family:"Some Font";
font-size: 1em;
margin-top: 0.8em;
margin-bottom: 0.8em;
}
/* Format chapter numbers */
/* Give the <span> a width, float it left and right-align */
span.rightAlign {
display: block
width: 15%;
float: left;
text-align: right;
}
/* Format chapter names */
span.leftAlign {
display: block;
text-align: left;
text-indent: 0.5em; /* Little space between number and name */
}
This CSS floats the <span> containing the chapter numbers to the left of the containing <div> and then places the <span> containing the chapter names up against it.
This code works for all the apps and e-readers which I've tested on
except Aldiko Book Reader for iOS. In Aldiko,
the floated text is simply missing. See the second screenshot.
Note: I've only added borders to make it easier to understand the layout of the page.
Can anyone spot if I've missed something? Or is it a bug which needs to be reported?
Thanks in advance
Nabodita