So I couldn't get Turtle91's code to work in iBooks or ADE (and Sony PRS-T2, but that's based on ADE AFAIK so I suppose I'm stating the obvious) but he gave me the start I needed.
After playing around with tables for a while, I've got the following to work in ADE and iBooks.
By the way, I'm not trying to vertically center the text... I want about 1/3rd whitespace above the text and 2/3rd whitespace below.
The XHTML has one table with 3 rows. The first row is empty, the second has the book title and the third row has the author's name.
This is the XHTML:
Code:
<body>
<table id="tableContainer">
<tr>
<td id="emptyRow"></td>
</tr>
<tr>
<td id="bookTitle" valign="top">SCARAMOUCHE</td>
</tr>
<tr>
<td id="bookAuthor">Rafael Sabatini</td>
</tr>
</table>
</body>
...and this is the CSS:
Code:
table#tableContainer {
margin: 0;
padding: 0;
text-indent: 0;
position: fixed;
height: 98%;
width:98%;
}
td#emptyRow {
margin: 0;
padding: 0;
height: 25%;
}
td#bookTitle {
font-family: Rye;
font-size: 2em;
font-weight: bold;
text-align: center;
height: 10%;
}
td#bookAuthor {
font-family: Italianno;
font-size: 1.8em;
font-weight: bold;
text-align: center;
}
I applied borders to the table rows during testing so that I could easily make out the row sizes and found that iBooks cuts off a portion of the right side if the table width is set to 100%. The height property works fine but to be on the safe side, I've set table height and table width to 98%. This setting leaves equal margins on the left and right of the screen.
Setting table height and width to 100% renders correctly in ADE but fortunately the 98% setting is not making a discernable difference.
With these settings, iBooks displays a table which fills the entire screen; since the height of the first and second row is defined, the last row fills up the rest of the screen. In ADE, the third row only takes as much vertical space as is required to display the text.
The crucial property in this entire code is "
position: fixed" applied to the table tag. Without this property, iBooks ignores the height set on the table rows. The presence or absence of this property does
not affect the display in ADE.
The other thing I found was that if you set a table height (of say 70%), iBooks resizes the table accordingly. ADE, on the other hand, ignores this property; if a height is not explicitly set on the table rows, the table will be only as high as needed to accommodate the text.
Lastly, using the valign attribute in the <td> is not mandatory; I just found it easier to visualise while doing the math for the row heights.
Oh, and I checked... according to w3schools, position: fixed means the element is positioned relative to the browser window.
I've tested this on ADE 4.5, Sony PRS-T2, iBooks on iPad, Aldiko and a Kobo reader whose model number I can't remember.