Positioning text vertically on a page - Page 2

graycyn · 06-19-2017, 04:23 PM

Quote:

Originally Posted by Nabodita

Thanks Turtle91. Will play around with this and test it out tonight.

I also like the idea of a transparent png... do android reading apps mean ADE?

Out of curiousity, is iBooks ignoring the empty div or the height property? I've still been fiddling with it and it looks like its the height that's being ignored.

Android reading apps mean whatever the developer wants as far as I can tell. It's a situation wherein ePub might be a standard, but all you can generally count on is that an Android reader app will open an epub and the text will be readable if it's valid.

Whether your CSS will be honored depends on the app. How images get treated depends on the app. Some will let you tap to zoom, some won't.

FWIW, things I've found:

A lot of Android reader apps don't like too large of an image. Many will give you a blank page if an image goes much over 2200 pixels high/1500 pixels wide. This is annoying when one owns a 10" tablet with 300 dpi resolution, since covers or other full page images will look a little softer. Reasonably acceptable, but not ideal. There's no error message to let you know an image didn't load, just a blank page to mystify the reader.

I used to think I was doing something wrong, but I saw someone else on MR mention the same problem.

About half of the apps I've tested on don't seem to care for a transparent PNG in an SVG wrapper, giving a blank white page again, or in the case of the Overdrive app, a solid black rectangle. Non-transparent images seem to work fine in SVG wrappers though. But a tablet or phone is exactly where you want transparency most, sigh.

SVG images are generally supported OK, and transparency works. I've had no issues with using SVG for title pages. Use title and desc tags, those are generally honored when an SVG image won't display. However, bitmap tracing a complex drawing can result in a larger file size of the SVG than a PNG would give you. I created an SVG yesterday where the size was 1.83 MB vs 401 KB for a transparent PNG at full resolution. This created a slight lag for image loading on a fast tablet (Pixel C). The loading lag time for the same image on my e-ink Kobo was just entirely unacceptable!

CSS support in Android apps is somewhat variable. Best at rendering my books as they appear in ADE are Bookari, Pocketbook and Bluefire Reader. These however, are amongst those that the image issues I mentioned can be found in.

One more infuriating issue, a few Android reading apps don't play well with 4:3 aspect ratio tablets. Gitden Reader and Lithium will cut off the bottoms of images on the aforesaid tablets and display that cut bit on the next page. The identical ebook file will display absolutely fine on a narrower phone screen with no image cut off. Overdrive and Google Play Books are sometimes guilty of the image cut off behavior on 4:3 tablets as well, though to a lesser extent.

Android reading apps I've played with so far:

Aldiko
Bluefire
Bookari
Cool Reader
FB Reader
Gitden Reader
Google Play Books
Lithium
Kobo
Moon+ Reader
Nook
Overdrive
Pocketbook
UB Reader

Sent from my Pixel C using Tapatalk

Nabodita · 06-20-2017, 03:55 PM

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.

fbrzvnrnd · 06-21-2017, 02:11 AM

Be aware: a epubcheck warning will be for a position:fixed in ePub

Nabodita · 06-21-2017, 03:24 AM

Quote:

Originally Posted by fbrzvnrnd

Be aware: a epubcheck warning will be for a position:fixed in ePub

Can this be taken up with someone, somewhere? As I said, I checked and position:fixed is not absolute positioning. The element is positioned relative to the browser window... or in this case, the device screen...

Update:
Ok, just ran epubcheck on the file. I have two versions of epubcheck on my computer; the older v3.0.1 and the latest 4.0.2. The epub passes validation on the older version but generates a warning in the current version.

And again.

Hitch · 06-24-2017, 04:22 PM

Quote:

Originally Posted by Nabodita

Can this be taken up with someone, somewhere? As I said, I checked and position:fixed is not absolute positioning. The element is positioned relative to the browser window... or in this case, the device screen...

Update:
Ok, just ran epubcheck on the file. I have two versions of epubcheck on my computer; the older v3.0.1 and the latest 4.0.2. The epub passes validation on the older version but generates a warning in the current version.

And again.

I have a stupid question, and yes, I skimmed, didn't peruse or delve, in getting to this last post. Presumably, your title page is in an xhtml/html file of its own, yes?

(n.b.: I meant to add, that table will cause you grief, if not in ePUB, certainly in MOBI. Now, you may be utterly disinterested in MOBI, for all I know, but for those that cometh later, to read this post, I wished to make that point.)

Hitch

Nabodita · 07-04-2017, 01:30 AM

Quote:

Originally Posted by Hitch

I have a stupid question, and yes, I skimmed, didn't peruse or delve, in getting to this last post. Presumably, your title page is in an xhtml/html file of its own, yes?

Yes, it's a separate xhtml file. And yes, I will need to convert to mobi so thanks for the heads up!

Took a small break, getting back to work now. I think I'll spend a little more time playing around with this and post back here with any updates... worst case scenario, I'll use an image for the title page.

Cheers
Nabodita

Hitch · 07-04-2017, 06:52 AM

Quote:

Originally Posted by Nabodita

Yes, it's a separate xhtml file. And yes, I will need to convert to mobi so thanks for the heads up!

Took a small break, getting back to work now. I think I'll spend a little more time playing around with this and post back here with any updates... worst case scenario, I'll use an image for the title page.

Cheers
Nabodita

You're welcome. You're using a separate XHTML page, for the title page--and you're 100% sure that Turtle's coding with vertical-align didn't work???? I'm going to have to ask my guys...but I'm pretty sure that we've done that for dog's years.

Hitch

06-20-2017, 03:55 PM	#17
Nabodita Connoisseur Posts: 97 Karma: 44418 Join Date: Jul 2013 Location: Mostly in my own head! Device: Kindle Fire, iPad	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. Attached Thumbnails

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
PDF page number positioning	TheOldFellow	Conversion	2	11-10-2014 04:02 PM
PDF page number positioning	TheOldFellow	Introduce Yourself	0	11-10-2014 02:48 PM
How do you vertically center a text?	Julius Caesar	Workshop	9	09-08-2013 02:58 PM
How do you center text vertically?	44reader	ePub	8	08-06-2012 01:52 PM
Problem: positioning text to the bottom-right	JulienDym	ePub	5	07-06-2011 09:03 AM

06-21-2017, 02:11 AM	#18
fbrzvnrnd Fanatic Posts: 554 Karma: 400004 Join Date: Feb 2009 Device: ONYX M96	Be aware: a epubcheck warning will be for a position:fixed in ePub