Problem with inline image

[eggheadbooks1]

I want to put a webding symbol in my text. I have converted it to a GIF (~300 pixels x 300 pixels). I embedded the image in the text as per the following code:

When you see this symbol in the chapter <img alt="note symbol" height="1em" src="../Images/note2.gif"/>, listen to the song that accompanies the story.</p>

This code works perfectly in the ePub. But when I convert to Kindle, the symbol does not appear. I then upped the em value to 20em, and then the image appeared BUT it is a different size in Kindle Previewer than it is in Kindle for PC app, and different again in my Fire. And when I change the font size, the image does not scale as is expected in any device/app.

All help appreciated.

[Hitch]

Originally Posted by eggheadbooks1

I want to put a webding symbol in my text. I have converted it to a GIF (~300 pixels x 300 pixels). I embedded the image in the text as per the following code:

When you see this symbol in the chapter <img alt="note symbol" height="1em" src="../Images/note2.gif"/>, listen to the song that accompanies the story.</p>

This code works perfectly in the ePub. But when I convert to Kindle, the symbol does not appear. I then upped the em value to 20em, and then the image appeared BUT it is a different size in Kindle Previewer than it is in Kindle for PC app, and different again in my Fire. And when I change the font size, the image does not scale as is expected in any device/app.

All help appreciated.

Questions, if I may?

1. How are you converting the file? CL KG, KP? ePUB to either? Zipped HTML to...?
2. You're using inline CSS? As opposed to the usual? May I inquire why?
3. Are you using the default font? I note that you've made the image 1em, in a line that by default is 1.2em, yes? Are you using any embedded font?
4. What's the styling of the line? The line/paragraph, rather, that the image is in?

When you say that the image is a different size, in the K4PC versus the Previewer, wouldn't you expect that? Assuming that you don't have K4PC sized the same as the KP viewing/reading pane?

What happens if you use other image types? PNG? JPG?

Hitch

[GrannyGrump]

I know that since you are making books for commercial resale, it is highly unlikely, but just in case you are using Calibre to convert to AZW3 --- if you want to preserve font-size settings from your original code, on the "Look and Feel" dialog for your conversion settings, make sure to disable "font re-scaling". This definitely affects font-sizing --- not sure if it would affect images sized in ems, but logic says possibly so.

[Doitsu]

@eggheadbooks1: Kindles and Kindle apps support the following Unicode characters that you could use instead of a Webdings symbol:

♩ ♩ Unicode Character 'QUARTER NOTE' (U+2669)
♪ ♪ Unicode Character 'EIGHTH NOTE' (U+266A)
♫ ♫ Unicode Character 'BEAMED EIGHTH NOTES' (U+266B)
♬ ♬ Unicode Character 'BEAMED SIXTEENTH NOTES' (U+266C)

[eggheadbooks1]

Thanks to everyone for responding.

I am converting the ePub to Kindle using Kindle Previewer (Kindlegen).

Sorry, when I pasted the code I must have missed the opening tag:

<p class="NoIndent">When you see this symbol in the chapter <img alt="note symbol" height="20em" src="../Images/note2.gif"/>, listen to the song that accompanies the story.</p>

I thought that was the usual code -- I have it from an older Kindle Publishing Guidelines (coding for inline images has disappeared from the latest guide).

Default font. No font family information in the CSS as per Amazon's demands. Body text is 1em.

In the past, I have created scaling images by using an em value; the image scaled with the font. However, these were not inline images but logos on the title page that I put in a frame. I cannot frame this musical symbol because it has to appear inline as if it were text.

Doitsu: I will try the unicode symbol as that may be the easiest and most logical. However, I would still like to learn how to do this in case I have to do it again for another book. I don't do this commercially, only for myself and friends.

As for working in ePubs, I spoke too soon. It works great in ADE and in Aldiko but not in my older Kobo Touch (which I was finally able to test once it recharged). :-(

[eggheadbooks1]

Originally Posted by Doitsu

@eggheadbooks1: Kindles and Kindle apps support the following Unicode characters that you could use instead of a Webdings symbol:

♫ ♫ Unicode Character 'BEAMED EIGHTH NOTES' (U+266B)

Doitsu: This is the exact symbol and the unicode works! In Kindle. But not in ePubs. Sigh.

Thus far, then, I can use the unicode for Kindle, and the image for ADE and the likes of Aldiko, but not for Kobo.

Well, one down and only one to go. All continued help appreciated.

[eggheadbooks1]

Also, Hitch, I will try using CSS instead of inline styling. That may work better. Will report back.

[eggheadbooks1]

We have lift off!

Hitch: set the image height in CSS instead of inline and now the image appears in my older Kobo.
Doitsu: Kindle problem solved using Unicode.

Many thanks.

[jackie_w]

Originally Posted by eggheadbooks1

Doitsu: This is the exact symbol and the unicode works! In Kindle. But not in ePubs. Sigh.

Thus far, then, I can use the unicode for Kindle, and the image for ADE and the likes of Aldiko, but not for Kobo.

Well, one down and only one to go. All continued help appreciated.

Which firmware and font were you using on your Kobo Touch? All my Kobos are newer models than the Kobo Touch and I'm fully up-to-date with the firmware ...

That particular unicode char - 'BEAMED EIGHTH NOTES' (U+266B) - displays OK with the following 8 built-in fonts on my Kobo GloHD:
Amasis, Caecilia, Georgia, Malabar, Avenir, Gill Sans, Kobo Nickel, OpenDyslexic as long as I'm reading the epub as a kepub.

If I'm reading as a plain standard epub, it's OK in 4 of them, Amasis, Caecilia, Georgia, Malabar.

[eggheadbooks1]

Originally Posted by jackie_w

Which firmware and font were you using on your Kobo Touch? All my Kobos are newer models than the Kobo Touch and I'm fully up-to-date with the firmware ...

It's an older Kobo Touch. 3.3.0 is the version. It's so old it doesn't even have a button to update the firmware. I was using Georgia font.

The unicode font did not work in ADE either. I take the position that ADE is such crap that if I can get something to work there, it usually works elsewhere. This time, though, the inline image styling worked in ADE but not Kobo. In the latest GitHub Kobo specs, it says to avoid inline styling in text, and I would think that applies to images, too. Switching to styling in the CSS as per Hitch's suggestion did the trick.

I cannot use the unicode in the ePub because I have no way of knowing who will be using what device/app or what font. But the image system now works as intended, so I am happy with the result.

The wonderful thing about the Unicode in Kindle, too, is that it also works in the older Kindle DX, or so says Previewer. So that avoids having to use media queries.

[eggheadbooks1]

Hitch:

I just had a thought. I remember in the past struggling with trying to put images in an Apple version of my last non-fiction book. Apple demand that you style the image size as follows:

HTML:
<div class="image-container">
<img src="images/bears.jpg" alt="three bears peer at goldie locks"/>
</div>

and then in the CSS:

img {height: 100%;}
.image-container {height: 100vh;}

But how does that work if you have both horizontal and vertical images, or differently sized images (50%, 75%, etc)?

I think I tried making different containers (so that each image was 100% of the size of, for example, a 50%-of-screen image) but that didn't work.

Also, in this latest ebook, in order to make the large cover fit and sit properly, I have to style inline there:

<div style="text-align: center;"><img alt="cover" height="100%" src="../Images/cover.jpg"/></div>

This overrides the 1em in the CSS, though I don't understand why exactly.

[Tex2002ans]

Originally Posted by eggheadbooks1

Also, Hitch, I will try using CSS instead of inline styling. That may work better. Will report back.

Not too sure if you were aware of this topic. Way back in 2013 we had a discussion in "Apple symbol and other special characters in ePub":

https://www.mobileread.com/forums/sho...d.php?t=222825

You may find a useful example or two there.

Originally Posted by eggheadbooks1

I cannot use the unicode in the ePub because I have no way of knowing who will be using what device/app or what font.

You should be able to embed/subset a font that ONLY includes the ♫ character. Are you sure you did the HTML/CSS correctly? Or maybe you referenced the font on your computer but forgot to include it in the EPUB? (That is a very easy mistake to make.)

[eggheadbooks1]

Hi Tex2002ans:

I did not embed the Unicode font in the ePub; I was hoping it would work automatically as it does in the Kindle (as per Doitsu's post). It didn't. So I am using a GIF for the ePub. Works just as well now that I tweaked the code.

I don't how to make a subset of the font, that only includes the one character, to embed. Though that would be good to know for future issues. I'll google it.

[Tex2002ans]

Originally Posted by eggheadbooks1

I don't how to make a subset of the font, that only includes the one character, to embed. Though that would be good to know for future issues. I'll google it.

There are quite a few methods to subset fonts, but Calibre made it super easy.

After you have the fonts in your EPUB + correct CSS, you could either:

• Right click a book in your library and press "Polish Books" -> "Subset all embedded fonts".
• If you have the book open in the Calibre Editor, press "Tools" -> "Subset Embedded Fonts"

Open Source Fonts

There are plenty of free fonts you can choose from to embed:

https://en.wikipedia.org/wiki/Open-s...code_typefaces

One of the fonts that includes the ♫ is Deja Vu Sans, which can be downloaded here:

http://dejavu-fonts.org/wiki/Main_Page

You can easily add the OTF or TTF fonts to the EPUB just like you add any other file. Then you just have to make sure to properly add the references to CSS.

Example Musical Notes EPUB

Here is example code (sample EPUBs attached to this post):

<p><span class="musicnote">♩</span> &amp;#x2669; Unicode Character 'QUARTER NOTE' (U+2669)</p>

<p><span class="musicnote">♪</span> &amp;#x266a; Unicode Character 'EIGHTH NOTE' (U+266A)</p>

<p><span class="musicnote">♫</span> &amp;#x266b; Unicode Character 'BEAMED EIGHTH NOTES' (U+266B)</p>

<p><span class="musicnote">♬</span> &amp;#x266c; Unicode Character 'BEAMED SIXTEENTH NOTES' (U+266C)</p>

<p class="NoIndent">When you see this symbol <span class="musicnote">♫</span> in the chapter, listen to the song that accompanies the story.</p>

Here is the CSS you need to tell the musical notes to use "Deja Vu Sans" as the font:

@font-face {
font-family: 'DejaVuSans';
font-style: normal;
font-weight: normal;
src: url(../Fonts/DejaVuSans.ttf);
}

.musicnote {
font-family: 'DejaVuSans', serif;
}

I attached 3 EPUBs:

• [NoFont]
  
  • This is just the HTML, no CSS.
• [YesFont]
  
  • This includes the entire "Deja Vu Sans" font (739.33 KB).
    
  • Total EPUB Size: 373.0 KB.
• [YesSubsetFont]
  
  • I subset this using Calibre, and the font became 175.01 KB.
    
  • Total EPUB Size: 62.8 KB.

ADE Before/After:



Kindle Before/After:

Originally Posted by eggheadbooks1

I did not embed the Unicode font in the ePub; I was hoping it would work automatically as it does in the Kindle (as per Doitsu's post). It didn't. So I am using a GIF for the ePub. Works just as well now that I tweaked the code.

In the topic I linked to there was a bit of discussion of many of the Pros/Cons of the different methods (Font/Bitmap/Vector). I will just mention a few of the downfalls of the Bitmap method off the top of my head:

• Not searchable
• Not copy/pastable
• Doesn't work well with Text-to-Speech (well... you could add an alt to your <img>)
• Doesn't match user preferences
  
  • The user might want to read in a different color font ♫♫♫♫♫♫♫.
    
  • Might not work well in Night Mode (could have a huge white background behind the image).
    
• Doesn't upscale/downscale well (unless SVG)

As you can probably see, many of the cons are sort of "hidden" from plain view. The images LOOK/WORK fine on the surface, but underneath, there are issues that creep up.

[Hitch]

Originally Posted by eggheadbooks1

We have lift off!

Hitch: set the image height in CSS instead of inline and now the image appears in my older Kobo.
Doitsu: Kindle problem solved using Unicode.

Many thanks.

It's weird, but we've had similar experiences. Not recently, but..I don't know, 3, maybe even 4 years back, like that? (Damn. Hard to believe I've been at this as long as I have.) Glad it worked.

I see your other post about the hell of Apple images; I'm beat tonight, and tied up MOST of tomorrow, but I'll try to get to it tomorrow night or Sunday, if I can. In the interim, I see that Tex has jumped in, and his attention to detail is really QUITE excellent, you can bank on his stuff, too.

(That doesn't mean that everyone else's aren't excellent; just that Tex tends to do the nitty-gritty details that the rest of us skip over. :-)

Hitch