Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Formats > ePub

Notices

Reply
 
Thread Tools Search this Thread
Old 06-19-2017, 04:23 PM   #16
graycyn
Guru
graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.graycyn ought to be getting tired of karma fortunes by now.
 
Posts: 994
Karma: 1595976
Join Date: Aug 2010
Location: NE Oregon
Device: Kindle Voyage, Kobo Aura HD, Kobo Aura One
Quote:
Originally Posted by Nabodita View Post
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
graycyn is offline   Reply With Quote
Advert
Old 06-20-2017, 03:55 PM   #17
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: 86
Karma: 44418
Join Date: Jul 2013
Location: Mostly in my own head!
Device: Kindle Fire, iPad
Smile

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

Name:	Aldiko.jpg
Views:	11
Size:	88.8 KB
ID:	157435   Click image for larger version

Name:	iBooks.jpg
Views:	10
Size:	123.4 KB
ID:	157436   Click image for larger version

Name:	Kobo.jpg
Views:	10
Size:	104.6 KB
ID:	157437   Click image for larger version

Name:	Sony.jpg
Views:	11
Size:	75.7 KB
ID:	157438   Click image for larger version

Name:	ADE 4.5.jpg
Views:	10
Size:	38.4 KB
ID:	157439  
Nabodita is offline   Reply With Quote
Old Yesterday, 02:11 AM   #18
fbrzvnrnd
Addict
fbrzvnrnd can program the VCR without an owner's manual.fbrzvnrnd can program the VCR without an owner's manual.fbrzvnrnd can program the VCR without an owner's manual.fbrzvnrnd can program the VCR without an owner's manual.fbrzvnrnd can program the VCR without an owner's manual.fbrzvnrnd can program the VCR without an owner's manual.fbrzvnrnd can program the VCR without an owner's manual.fbrzvnrnd can program the VCR without an owner's manual.fbrzvnrnd can program the VCR without an owner's manual.fbrzvnrnd can program the VCR without an owner's manual.fbrzvnrnd can program the VCR without an owner's manual.
 
Posts: 265
Karma: 190694
Join Date: Feb 2009
Device: iLiad
Be aware: a epubcheck warning will be for a position:fixed in ePub
fbrzvnrnd is offline   Reply With Quote
Old Yesterday, 03:24 AM   #19
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: 86
Karma: 44418
Join Date: Jul 2013
Location: Mostly in my own head!
Device: Kindle Fire, iPad
Quote:
Originally Posted by fbrzvnrnd View Post
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.

Last edited by Nabodita; Yesterday at 03:49 AM. Reason: Ran epubcheck and posted results
Nabodita is offline   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

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


All times are GMT -4. The time now is 10:12 AM.


MobileRead.com is a privately owned, operated and funded community.