MobileRead Forums - View Single Post

graycyn · 11-22-2016, 05:22 PM

Bear with me, I'm old and all of this is kind of new to me, but I'm learning!

I have an epub put together, but I wanted, for nostalgia reasons to have a title page graphic that looked like the title page in the actual paper book. And because I sometimes read on a tablet, where I like to set a sepia colored background, I like transparency.

A transparent PNG in an SVG wrapper (to make it fit fullscreen) works fine on my Sony and Kobo e-ink readers. However, NOT SO MUCH in many Android reading apps, where it often results in a BLANK PAGE. Seems the SVG wrapper might be the problem as the apps that do that *will* display a transparent PNG that is *NOT* in an SVG wrapper.

I haven't yet tried just a straight PNG image because I really wanted the image to fill the page, just like the cover does. (Cover is in an SVG wrapper.)

Enter Inkscape. I created a brand new SVG version of my title page graphic using text. It looks great, even better than the PNG I made in Photoshop. I put it inline in my epub. (Yes, I did save it as a plain SVG for the purpose.)

I'm using this code (I'm just putting the first bit here, the rest is the text description of the graphic which goes on and on.)

Code:

<div class="svg">
<svg xmlns="http://www.w3.org/2000/svg" height="100%"
 preserveAspectRatio="xMidYMid meet" version="1.1" 
viewBox="0 0 744.09448819 1052.3622047" width="100%"
 xmlns:xlink="http://www.w3.org/1999/xlink" id="svg2">

Everything checks with ePubcheck and FlightCrew through Sigil. I ran my CSS through CSSLint and the W3C validator and that's good too. (except for an error that the adobe-hyphenate property generates)

I tested this on the following reader devices where it works fine:

Sony PRS-350
Sony T1

I tested on my PC and it works fine in:

ADE 2.01
Readium for Chrome (displays properly, but I did get some kind of odd loading circle of dots on that page, but had no trouble just going to the next page)

I tested in the following Android epub reading apps, where again, it works beautifully! And TTS can read it in apps where that's an option, except one.

Aldiko Premium
Bookari Premium
Cool Reader (graphic does not display, but text from tag does.)
Bluefire Reader
FBReader (graphic does not display, but text from tag does.)
Gitden Reader (displayed beautifully but TTS borked.)
Lithium Reader
Kobo
Moonreader+ Pro
Overdrive
Pocketbook
UBReader

The above apps display the text SVG like a graphic. Changing font size has NO EFFECT on the display.

BUT THEN THERE IS A PROBLEM!

In Google Play Books, at a font size of 100%, the display is fine, but changing font size upward causes the display of the graphic to behave like text and causes portions of the text at larger font sizes to run right off the screen or overlap in an ugly fashion! (I normally read at 125% to 138% in that app.)

The font itself also changes as you change fonts in the Play Books app, though this looked fine at sizes of 100% or less and was not detrimental.

In the Nook app, the display is STATIC, i.e. changing font size does NOT change the text, but the text displays somewhat like it looks in Google Play Books at 138% or higher with some text run off the page and other text overlapping. Actual font does NOT change either.

On my Kobo Aura HD, the display is similar to that of Google Play Books, both font size and font are variable, and it looks pretty damn awful there, not remotely like how it displays elsewhere! Even using the same font (Georgia) that the SVG graphic uses did not help the appearance.

So, my question is, is this simply a limitation of support by the reading systems, or is there anything I can do to make it work in the few places it doesn't?

The simple solution for this particular book would be to eliminate the title page graphic entirely. It really doesn't *have* to have it.

But I have other books with illustrated title pages that I absolutely *DO* need to have a graphic title page and I want those books to work on both my e-ink readers AND my Android phone/tablets if possible.

If there is a fix, simple explanations help. Assume I don't know too much. My brain is already exploding over this!

Edited: FWIW, the Android apps that bork (display a blank page) on a transparent PNG in an SVG wrapper are:

Aldiko Premium
Bookari Premium
Bluefire Reader
Overdrive
Pocketbook
UBReader

I guess I could just go with PNG in SVG, but it does bother me that it won't display correctly in some of these apps.

11-22-2016, 05:22 PM	#1
graycyn Wizard Posts: 1,591 Karma: 11722446 Join Date: Aug 2010 Location: NE Oregon Device: Kobo Sage, Pocketbook Era, Kobo Forma, Kindle Oasis 2	Adventures & misadventures with SVG Bear with me, I'm old and all of this is kind of new to me, but I'm learning! I have an epub put together, but I wanted, for nostalgia reasons to have a title page graphic that looked like the title page in the actual paper book. And because I sometimes read on a tablet, where I like to set a sepia colored background, I like transparency. A transparent PNG in an SVG wrapper (to make it fit fullscreen) works fine on my Sony and Kobo e-ink readers. However, NOT SO MUCH in many Android reading apps, where it often results in a BLANK PAGE. Seems the SVG wrapper might be the problem as the apps that do that will display a transparent PNG that is NOT in an SVG wrapper. I haven't yet tried just a straight PNG image because I really wanted the image to fill the page, just like the cover does. (Cover is in an SVG wrapper.) Enter Inkscape. I created a brand new SVG version of my title page graphic using text. It looks great, even better than the PNG I made in Photoshop. I put it inline in my epub. (Yes, I did save it as a plain SVG for the purpose.) I'm using this code (I'm just putting the first bit here, the rest is the text description of the graphic which goes on and on.) Code: <div class="svg"> <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 744.09448819 1052.3622047" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink" id="svg2"> Everything checks with ePubcheck and FlightCrew through Sigil. I ran my CSS through CSSLint and the W3C validator and that's good too. (except for an error that the adobe-hyphenate property generates) I tested this on the following reader devices where it works fine: Sony PRS-350 Sony T1 I tested on my PC and it works fine in: ADE 2.01 Readium for Chrome (displays properly, but I did get some kind of odd loading circle of dots on that page, but had no trouble just going to the next page) I tested in the following Android epub reading apps, where again, it works beautifully! And TTS can read it in apps where that's an option, except one. Aldiko Premium Bookari Premium Cool Reader (graphic does not display, but text from tag does.) Bluefire Reader FBReader (graphic does not display, but text from tag does.) Gitden Reader (displayed beautifully but TTS borked.) Lithium Reader Kobo Moonreader+ Pro Overdrive Pocketbook UBReader The above apps display the text SVG like a graphic. Changing font size has NO EFFECT on the display. BUT THEN THERE IS A PROBLEM! In Google Play Books, at a font size of 100%, the display is fine, but changing font size upward causes the display of the graphic to behave like text and causes portions of the text at larger font sizes to run right off the screen or overlap in an ugly fashion! (I normally read at 125% to 138% in that app.) The font itself also changes as you change fonts in the Play Books app, though this looked fine at sizes of 100% or less and was not detrimental. In the Nook app, the display is STATIC, i.e. changing font size does NOT change the text, but the text displays somewhat like it looks in Google Play Books at 138% or higher with some text run off the page and other text overlapping. Actual font does NOT change either. On my Kobo Aura HD, the display is similar to that of Google Play Books, both font size and font are variable, and it looks pretty damn awful there, not remotely like how it displays elsewhere! Even using the same font (Georgia) that the SVG graphic uses did not help the appearance. So, my question is, is this simply a limitation of support by the reading systems, or is there anything I can do to make it work in the few places it doesn't? The simple solution for this particular book would be to eliminate the title page graphic entirely. It really doesn't have to have it. But I have other books with illustrated title pages that I absolutely DO need to have a graphic title page and I want those books to work on both my e-ink readers AND my Android phone/tablets if possible. If there is a fix, simple explanations help. Assume I don't know too much. My brain is already exploding over this! Edited: FWIW, the Android apps that bork (display a blank page) on a transparent PNG in an SVG wrapper are: Aldiko Premium Bookari Premium Bluefire Reader Overdrive Pocketbook UBReader I guess I could just go with PNG in SVG, but it does bother me that it won't display correctly in some of these apps. Last edited by graycyn; 11-22-2016 at 06:04 PM.