View Single Post
Old 11-14-2017, 06:05 AM   #1
Nabodita
Connoisseur
Nabodita has never been to obedience school.Nabodita has never been to obedience school.Nabodita has never been to obedience school.Nabodita has never been to obedience school.Nabodita has never been to obedience school.Nabodita has never been to obedience school.Nabodita has never been to obedience school.Nabodita has never been to obedience school.Nabodita has never been to obedience school.Nabodita has never been to obedience school.Nabodita has never been to obedience school.
 
Nabodita's Avatar
 
Posts: 97
Karma: 44418
Join Date: Jul 2013
Location: Mostly in my own head!
Device: Kindle Fire, iPad
Floated text missing in Aldiko Book Reader for iOS

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
Attached Thumbnails
Click image for larger version

Name:	Marvin Classic.PNG
Views:	303
Size:	72.2 KB
ID:	159997   Click image for larger version

Name:	Aldiko for iOS.PNG
Views:	286
Size:	62.8 KB
ID:	159998  
Nabodita is offline   Reply With Quote