Apple symbol and other special characters in ePub

[Tex2002ans]

Originally Posted by mtrahan

But still there must be something I'm doing wrong (long story). What's the good way to add the .svg image so that it appears inline with the text (ie. I want to downsize it so that it is just the size of a letter in the middle of a paragraph)? Style an image class with something like "height: 1em;"? Or there is a better way?

Sorry, I don't know more details... SVG is one area where I don't have any experience.

Just wanted to toss it out there that using SVG is also a choice when dealing with odd characters/symbols.

I would say embedding a subsetted font would be the MOST COMPATIBLE bet. More devices/programs support font-embedding than those that have proper SVG support... and to my knowledge, the Kindle formats, and iBooks, don't support SVG. Also going the SVG route would need some sort of relevant fallback anyway.

Also, let us say you wanted to use a tool (like Calibre) to convert from EPUB -> DOC. I bet Calibre would handle the font-embedded Apple character fine... while an Apple SVG... who knows what would happen.

Originally Posted by mtrahan

EDIT: OK, styling an image class with "height: 1em;" just doesn't work in iBooks. I end up with a giant apple... Argh.

And if all else fails (even the font embedding), I generated a (quite large) PNG from that Wikimedia SVG that you can scale down to 1em.

To generate the Apple PNG: I used Inkscape (exported as a 600px wide PNG) -> GIMP (stripped transparency and made grayscale) -> Export as PNG -> Ran the PNG through ScriptPNG to optimize it.

I haven't tested it in a long while, but last time I did something similar (if I remember, it had to deal with formulas needing to be in-line), scaling the image down to 1em worked on ADE + Kindle.

Here is the code from the test EPUB:

 <p>This is a lot of sample text with the apple <img alt="" class="apple" src="../Images/ApplePNG.png" />.</p>

  <p class="double">This text is <img alt="" class="apple" src="../Images/ApplePNG.png" /> 2em.</p>

Here is the CSS:

img.apple {
	height: 1em;
}

p.double {
	font-size: 2em;
}

Here are the sample images. First = 100% scale, Second = 200% scale:

[Jellby]

Originally Posted by mtrahan

Style an image class with something like "height: 1em;"? Or there is a better way?

EDIT: OK, styling an image class with "height: 1em;" just doesn't work in iBooks. I end up with a giant apple... Argh.

I would say an <img> element with height:1em style should work. If it doesn't, it's the reader's fault, but that doesn't help you. Maybe there's more to be cleaned in the SVG file?

Originally Posted by Tex2002ans

Also going the SVG route would need some sort of relevant fallback anyway.

I'm not sure about that. SVG is required by the ePub spec so no fallback is needed. What is needed is an "alt" text, but that's an advantage. With images disabled you'd see the alt text, with font embedding disabled (or non-working) you'd see nothing meaningful.

[Tex2002ans]

Originally Posted by Jellby

Maybe there's more to be cleaned in the SVG file?

Every so often SVG topics pop up, but it usually does not get a concrete answer. And it seems to be an area that many avoid/do not know much about.

I know enough that SVG exists, but not enough to properly get SVGs working.

I linked over to those two topics with RbnJrg examples/discussing SVG (which is the latest I recall).

Do you happen to have any good samples of SVG being used in EPUB?

For example, how would you go from an SVG of Red Apple (U+1F34E):

http://www.fileformat.info/info/unic.../red_apple.svg

to getting that SVG working/scaling in an EPUB?

I happened to plop that SVG into Sigil, and it is very large (see attached image and EPUB). All quick attempts at resizing using width/height seemed to have failed miserably.

Maybe a step-by-step tutorial on how to make sense of the SVG file, strip it down/add to it (if necessary), and get some actual usage out of it?

Or maybe a tutorial on how to use Inkscape to bash the SVG to your will?

I do know how to go from SVG -> Inkscape -> high resolution PNG -> EPUB (see ApplePNG attached above). (I can post steps on how I do this if anyone is interested).

On a related note, here is a link to SVG in the MobileRead Wiki: https://wiki.mobileread.com/wiki/SVG

[Jellby]

Originally Posted by Tex2002ans

Do you happen to have any good samples of SVG being used in EPUB?

Not really, at least not for pictures... Testing in my device is not the most convenient, and I haven't really found the need for it yet.

For example, how would you go from an SVG of Red Apple (U+1F34E):

http://www.fileformat.info/info/unic.../red_apple.svg

to getting that SVG working/scaling in an EPUB?

That SVG is actually pretty simple. If you open it with any text editor, you'll see it's a single path, and it does not seem to have any hard-coded size that would prevent it from resizing. Maybe the font-size="12" is the culprit, or maybe it needs some kind of width/height.

And let's not forget that readers are buggy anyway.

Or maybe a tutorial on how to use Inkscape to bash the SVG to your will?

For that, nothing like the XML browser in Inkscape, you can see the structure, remove all unnecessary objects and rearrange the others.

[PoP]

Originally Posted by Tex2002ans

...[snip]

And if all else fails (even the font embedding), I generated a (quite large) PNG from that Wikimedia SVG that you can scale down to 1em.

To generate the Apple PNG: I used Inkscape (exported as a 600px wide PNG) -> GIMP (stripped transparency and made grayscale) -> Export as PNG -> Ran the PNG through ScriptPNG to optimize it.

I haven't tested it in a long while, but last time I did something similar (if I remember, it had to deal with formulas needing to be in-line), scaling the image down to 1em worked on ADE + Kindle.


[snip]...

Avoiding font or svg... indeed. I liked the png scaling to 1em trick. in this case of the single apple character, it does the job quite effectively.

Originally Posted by Tex2002ans

...[snip]
I do know how to go from SVG -> Inkscape -> high resolution PNG -> EPUB (see ApplePNG attached above). (I can post steps on how I do this if anyone is interested).
[snip]...

Sure, if you have the time to detail a bit more.

I don't want to hijack this thread but I would apply the idea in my Nadsat Translation Dictionary where I have strings of multiple characters (in alien language fonts). Since dictionaries are KF7 only, I could not use font embedding or svg and it annoys me that the images of text that I included cannot scale when font sizes are changed.

[EDIT 2013-09-22 13:52]
Alas no success. Kindlegen reports no error but Height: and Width: image scaling properties are simply ignored by the mobi-only KF7 on the K3.

Spoiler:

<style>
 img.oneEMh {height: 1em;}
 img.oneEMw {width: 1em;}
</style>

with

<I>vul:</I>   <img alt="" class="oneEMw"  src="../Images/t'hai'la 3.gif"/> /t'hai'la/

or

<I>fer:</I>  <img alt="" class="oneEMh"  src="../Images/itl 3.jpg"/> /itl/

has no effect on the images when changing the text size on the reader

[mtrahan]

OK. Trying to please every e-reader around is enough to literally drive a man crazy. I spent way too much time in this &%!&% ePub and every time I manage to get something working I seem to break something else.

The Apple symbol. Yes, it works in Sigil: I set "height: 1em;" and the symbol is the size I want (just as Text2002ans showed). But as soon as I open the ePub in ADE the Apple gets back to its giant size. And frankly, I have no idea why.

The most confusing thing is that when I open Text2002ans's AppleTest.epub in ADE, it works just fine! The Apple symbol is shown at the good size. So I tried to import his exact code in my ePub, same PNG file, copied the CSS and HTML. And it doesn't work anymore! Giant Apple in ADE again...

Frankly, this is getting insane. I really have no idea what is causing this. At this point I'm a little desperate. I spent way too much time trying to get this ePub to work this week...

Even my other embedded symbols seem to have stopped working in ADE. And my 'Special-character.epub' test file posted on the first page still works fine in ADE, and the fonts are embedded exactly the same way.

I can't upload the ePub here because of copyright, but if anyone is curious about this and wants to have a look at it, let me know and I'll send a link in private.

Thanks again for all the help.

EDIT: Oh and by the way, the AppleTest.epub (with the PNG file) doesn't work in iBooks either. I get giant apples there too... The most frustrating thing is that iBooks is pretty much the only reader where I wouldn't even need to do this: Apple symbols are already embedded in it so the symbol appeared automatically on the first try...

[Jellby]

Originally Posted by mtrahan

The most confusing thing is that when I open Text2002ans's AppleTest.epub in ADE, it works just fine! The Apple symbol is shown at the good size. So I tried to import his exact code in my ePub, same PNG file, copied the CSS and HTML. And it doesn't work anymore! Giant Apple in ADE again...

Maybe you have some syntax problem elsewhere in the CSS file. ADE is known for ignoring the whole stylesheet if a semicolon is missing anywhere, for instance.

[mtrahan]

Originally Posted by Jellby

Maybe you have some syntax problem elsewhere in the CSS file. ADE is known for ignoring the whole stylesheet if a semicolon is missing anywhere, for instance.

Yeah, 10 minutes ago I found a missing semicolon after a "border-collapse: collapse;"... I don't know if it was this, but I now get the image to scale down correctly in ADE.

Only problem is: it is useless. Neither my book or Text2002ans's AppleTest.epub works in iBooks (for the scaled symbol that is). I still get giant apples with both... And frankly, I'm beginning to think to only way to do this is to do downsize the PNG file directly to something very small, similar to a letter.

(That is another story but I feel I understand less and less as time go by. I managed to get the other symbols working in ADE and iBooks, but I'm beginning to think the embedded 'Symbola' font is simply useless (as in not used by the readers or something). Well, I don't know: before I embedded this font, the symbols didn't work in ADE, now they do. But I'm trying to embed another font the exact same way and it's just not working at all in ADE. Works fine everywhere else. Oh well.)

EDIT: Ah! Found the solution to the problem to the embedded fonts in ADE: a blank space! Font name had two works, and a regular space between them. I didn't think about this (and read nothing nowhere about this either). I renamed the font to remove the space, adjusted the stylesheet and voila! My embedded font now works in ADE. (Let's just hope it still works everywhere else...

[Tex2002ans]

Originally Posted by PoP

Sure, if you have the time to detail a bit more.

I'll do it within the coming days, I will mark the thread as "Tutorial: ".

Originally Posted by PoP

I don't want to hijack this thread but I would apply the idea in my Nadsat Translation Dictionary where I have strings of multiple characters (in alien language fonts). Since dictionaries are KF7 only, I could not use font embedding or svg and it annoys me that the images of text that I included cannot scale when font sizes are changed.

Hopefully everyone can piece together some code and figure this out. In my experience, usually you can get code like this working in:

Sigil + ADE, and break in Kindle
Sigil + Kindle, and break in ADE
Work in all three, and then explode in iBooks
Work everywhere, and explode in an otherwise perfectly compliant ereader that has never treated you wrong... UNTIL NOW.

Originally Posted by mtrahan

OK. Trying to please every e-reader around is enough to literally drive a man crazy. I spent way too much time in this &%!&% ePub and every time I manage to get something working I seem to break something else.

[...]

The most confusing thing is that when I open Text2002ans's AppleTest.epub in ADE, it works just fine! The Apple symbol is shown at the good size. So I tried to import his exact code in my ePub, same PNG file, copied the CSS and HTML. And it doesn't work anymore! Giant Apple in ADE again...

Frankly, this is getting insane. I really have no idea what is causing this. At this point I'm a little desperate. I spent way too much time trying to get this ePub to work this week...

I know your pain!!!

This is why working on such a strict deadline is just asking for gremlins... this EPUB requires a break (of a day or two, maybe a week or two)... and when you come back to it, the gremlins will have disappeared, everything will magically be working, the good ideas will flow right to your brain! It happens in programming all the time!

Originally Posted by mtrahan

The Apple symbol. Yes, it works in Sigil: I set "height: 1em;" and the symbol is the size I want (just as Text2002ans showed). But as soon as I open the ePub in ADE the Apple gets back to its giant size. And frankly, I have no idea why.

I will have to see if I hunt down that EPUB I mentioned and see what I did in the code.... What happens when you do 165+ EPUBs is that your brain gets a little rusty, and you forget what you used where.

Originally Posted by mtrahan

I can't upload the ePub here because of copyright, but if anyone is curious about this and wants to have a look at it, let me know and I'll send a link in private.

Send it on over.

Originally Posted by mtrahan

EDIT: Oh and by the way, the AppleTest.epub (with the PNG file) doesn't work in iBooks either. I get giant apples there too... The most frustrating thing is that iBooks is pretty much the only reader where I wouldn't even need to do this: Apple symbols are already embedded in it so the symbol appeared automatically on the first try...

I don't have any apple device. I test on ADE (my first-generation Nook, and every so often Bluefire reader on my phone) + Sigil + at work there are people who test on Kindles and report any problems.

From what I gather on the forums, iBooks creates horrors for rendering.

I gave up on iBooks with two things:

• When people were recommending that empty <span> surrounding everything "workaround".
• When I had an EPUB that had gremlins just like you. A reader contacted me saying that the cover of ONE BOOK wouldn't work on iBooks (the tens of EPUBs with the same exact code worked all fine). I went through maybe six or seven iterations of tiny tweaks to the gremlin EPUB... and right when I thought I was getting down to figuring it out... poof... the original EPUB worked!

You reach a point where you code your EPUB as compliant code, it renders good on 99% of the stuff you test on, and the other 1% can fix their crap, the user can tweak the EPUB to their liking, or they just ignore the one giant sized apple (hopefully you don't use the apple symbol too often? ).

The philosophy in my ebooks is:

Keep your code as minimal code as possible.

I keep things pretty much down to "left" + "center" + "right" + "noindent" + "negindent" + "margintop" + "smallcaps" (I use the CSS bold + font-variant:smallcaps to keep clean code, if the device can't handle smallcaps, the text is bold at least).

If I stray far from my CSS template code with odd code like this, I make sure to mark that it needs some extra testing. But at a point, you just can't have one EPUB file that handles them all! You will pull your hair out!

Originally Posted by mtrahan

Only problem is: it is useless. Neither my book or Text2002ans's AppleTest.epub works in iBooks (for the scaled symbol that is). I still get giant apples with both... And frankly, I'm beginning to think to only way to do this is to do downsize the PNG file directly to something very small, similar to a letter.

No no no... you never want a tiny image that is scaled UP. It looks ATROCIOUS.

Since iBooks seems to have the Apple character built into the fonts, why not generate two EPUBs JUST FOR THIS SINGLE CASE.

iBooks version: Toss out the PNG and just use the embedded fonts + it seems like the Apple character works on its own.
Everything else version: Toss in the Apple PNG and scale it in ems instead.

[mtrahan]

ePub gremlins, eh. I just know what you mean. This book is no good for my health!

I'll consider the two versions idea... I actually thought about it, because I can choose to add a version to be sold only through iBookstore. The thing is, though, if someone buys it through another retailer he'll get the other version (with the scaled-down png) so if he decides to read it in iBooks it will be all broken again.

Only solution I see at this point is to tweak the 'Symbola' font I already embedded in this ePub and try to add the Apple glyph with Type light or something. I have no idea how to do that, but I can learn. The new problem would probably be a legal one so it is not exactly a solution...

[RbnJrg]

Originally Posted by Tex2002ans

Do you happen to have any good samples of SVG being used in EPUB?

For example, how would you go from an SVG of Red Apple (U+1F34E):

http://www.fileformat.info/info/unic.../red_apple.svg

to getting that SVG working/scaling in an EPUB?

I happened to plop that SVG into Sigil, and it is very large (see attached image and EPUB). All quick attempts at resizing using width/height seemed to have failed miserably.

Maybe a step-by-step tutorial on how to make sense of the SVG file, strip it down/add to it (if necessary), and get some actual usage out of it?

Or maybe a tutorial on how to use Inkscape to bash the SVG to your will?

OK, here is my tutorial.

1. Open Inkscape.

2. Select File/Open and in the dialog "Select file to open", in the field "Name:" write:

http://www.fileformat.info/info/unic.../red_apple.svg

(or the url of the file you wish or another .svg file). After that press the buttom "Open".

3. Do click with the mouse over the apple in the Inkscape page (you'll see a lot of arrows rounding the apple).


4. ATENTION - THIS IS THE KEY: Select the menu File/Document Properties... and select the option "Resize page to content..." and after that, press the buttom "Resize page to drawing or selection". Close the dialog.


5. Now select the menu File/Save as... and chose the name red_apple (or whatever you want) and the type "Plain SVG". That's all with Inkscape.

6. Open Sigil and start a new ePub.

7. On the Images folder, right click with the mouse, chose "Add Existing File..." and select the red_apple.svg file.

8. On the Styles folder, right click with the mouse and select "Add a Blank Stylesheet"

9. Write in that stylesheet the following:

p {
  font-size: 1em; /* this size must be linked with the height of the svg image */
  text-align: justify;
  text-indent: 1em;
  margin: 0;
}

.svg_img {
  display: inline;
  height: 1em; /* this must be equal to the font-size used to style "p" */
  width: auto;
}

10. In the .html file write (after linking it with the stylesheet) the following:

<p>This is a test with the <img class="svg_img" alt="red_apple" src="../Images/red_apple.svg" /> used as image inline</p>

That's all

Below you can test my ePub.

Regards
Rubén

[mtrahan]

By the way, for anyone from the future who's looking for the answer, here's a post from Liz Castro, who suggests putting the image in a div and setting the div's width to get the desired size in iBooks (and then set the image to div size to avoid overflow outside of iBooks). I didn't manage to get this working, but for me it's not even an option since my image is in the middle of a sentence and can not be considered as a block like a div. "Currently," I learned on Jutoh documentation, "this won't work if you have multiple images or other content in a paragraph"...

[Tex2002ans]

Originally Posted by RbnJrg

OK, here is my tutorial.
[...]

Fantastic, worked like a charm!

I went in and added the Green Apple (U+1F34F):

http://www.fileformat.info/info/unic...reen_apple.svg

I also tweaked the SVG file and changed "fill" into the hex for red and green.



Sigil:



ADE:



On Nook:



Does this work on Marvin/other devices/reading programs too?

Anyone have any of the Kindles on hand? How well does this transfer over?

Kindle Unpack shows the SVG files sitting in the KF8 version. According to what I read in the Amazon Publishing Guidelines, I am getting mixed signals (SVG only in Kindle Fire (?)).

In section 8.4.2 they recommend using the SVG with an accompanying image. Setting the image to "display:none", and only displaying the image in old MOBI using media queries. UGH:

http://kindlegen.s3.amazonaws.com/Am...Guidelines.pdf

Not much information though on SVG in their documentation.

I also stumbled upon this thread with a formula as SVG, with a sample EPUB plus lots of info:

https://www.mobileread.com/forums/showthread.php?t=87781

Now I want to find more complex SVGs and do some testing.

Originally Posted by mtrahan

By the way, for anyone from the future who's looking for the answer, here's a post from Liz Castro, who suggests putting the image in a div and setting the div's width to get the desired size in iBooks (and then set the image to div size to avoid overflow outside of iBooks). I didn't manage to get this working, but for me it's not even an option since my image is in the middle of a sentence and can not be considered as a block like a div. "Currently," I learned on Jutoh documentation, "this won't work if you have multiple images or other content in a paragraph"...

And I bet this "workaround" that people do will be just like those empty spans! Apple will "fix" this bug, and lots of EPUBs which took advantage of this will break. DIE DIE DIE!

[mtrahan]

Originally Posted by Tex2002ans

I also stumbled upon this thread with a formula as SVG, with a sample EPUB plus lots of info:

https://www.mobileread.com/forums/showthread.php?t=87781

[...]

And I bet this "workaround" that people do will be just like those empty spans! Apple will "fix" this bug, and lots of EPUBs which took advantage of this will break. DIE DIE DIE!

Oh, thanks for this link! Following what he did in the sample ePub I managed to get my SVG apple to display correctly in iBooks:

<span style="display: inline-block; width: 1em;"><img alt="" src="../Images/Pomme.svg" style="width: 100%;" />

Let's hope my ePub can at least survive until Tuesday.

I gotta run but I'll check your work on SVG tomorrow (very nice!). I can test your file on my old Kindle 3.

Happy dance for now:

[RbnJrg]

Originally Posted by Tex2002ans

Fantastic, worked like a charm!

Thank you!

Anyone have any of the Kindles on hand? How well does this transfer over?

It works in any Kindle that supports the .kf8 format.

I also stumbled upon this thread with a formula as SVG, with a sample EPUB plus lots of info:

https://www.mobileread.com/forums/showthread.php?t=87781

Now I want to find more complex SVGs and do some testing.

Originally Posted by PoP

Avoiding font or svg... indeed.

That is for both of you, PoP and Tex; there is no trouble at all by working with text (formulas) inside a .svg image. Just there are two KEYS for that:

1. The first KEY I have already posted in my tutorial in the step #4:
In Inkscape, select the menu File/Document Properties... and select the option "Resize page to content..." and after that, press the buttom "Resize page to drawing or selection".

2. The second KEY is only applicable when we are working with some class of text and is:
In Inkscape, select the menu Path and then the command "Object to Path"
This command must be applied with the object selected (that is, with all the "arrows" rounding it).

That's all. After that we won't have any trouble with the .svg image and we won't need to embed any font in the ePub.

Regards
Rubén