09-08-2016, 08:48 PM | #1 |
Read, don't parrot.
Posts: 224
Karma: 110242
Join Date: Apr 2011
Device: Kindle Fire, Kobo Touch, Aldiko for Android
|
Problem with inline image
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:
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> All help appreciated. |
09-08-2016, 11:43 PM | #2 | |
Bookmaker & Cat Slave
Posts: 11,462
Karma: 158448243
Join Date: Apr 2010
Location: Phoenix, AZ
Device: K2, iPad, KFire, PPW, Voyage, NookColor. 2 Droid, Oasis, Boox Note2
|
Quote:
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 |
|
09-09-2016, 03:24 AM | #3 |
Obsessively Dedicated...
Posts: 3,200
Karma: 34977896
Join Date: May 2011
Location: JAPAN (US expatriate)
Device: Sony PRS-T2, ADE on PC
|
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.
|
09-09-2016, 05:01 AM | #4 |
Grand Sorcerer
Posts: 5,584
Karma: 22735033
Join Date: Dec 2010
Device: Kindle PW2
|
@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) |
09-09-2016, 12:14 PM | #5 |
Read, don't parrot.
Posts: 224
Karma: 110242
Join Date: Apr 2011
Device: Kindle Fire, Kobo Touch, Aldiko for Android
|
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: Code:
<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> 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). :-( |
09-09-2016, 12:31 PM | #6 | |
Read, don't parrot.
Posts: 224
Karma: 110242
Join Date: Apr 2011
Device: Kindle Fire, Kobo Touch, Aldiko for Android
|
Quote:
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. Last edited by pdurrant; 10-28-2016 at 05:22 AM. Reason: fixed quote tags |
|
09-09-2016, 12:40 PM | #7 |
Read, don't parrot.
Posts: 224
Karma: 110242
Join Date: Apr 2011
Device: Kindle Fire, Kobo Touch, Aldiko for Android
|
Also, Hitch, I will try using CSS instead of inline styling. That may work better. Will report back.
|
09-09-2016, 12:51 PM | #8 |
Read, don't parrot.
Posts: 224
Karma: 110242
Join Date: Apr 2011
Device: Kindle Fire, Kobo Touch, Aldiko for Android
|
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. |
09-09-2016, 01:17 PM | #9 | ||
Grand Sorcerer
Posts: 6,212
Karma: 16534894
Join Date: Sep 2009
Location: UK
Device: Kobo: KA1, ClaraHD, Forma, Libra2, Clara2E. PocketBook: TouchHD3
|
Quote:
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. Last edited by pdurrant; 10-28-2016 at 05:22 AM. Reason: fixed quote tags |
||
09-09-2016, 01:36 PM | #10 | |
Read, don't parrot.
Posts: 224
Karma: 110242
Join Date: Apr 2011
Device: Kindle Fire, Kobo Touch, Aldiko for Android
|
Quote:
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. Last edited by pdurrant; 10-28-2016 at 05:23 AM. Reason: fixed quote tags |
|
09-09-2016, 01:46 PM | #11 | |||
Read, don't parrot.
Posts: 224
Karma: 110242
Join Date: Apr 2011
Device: Kindle Fire, Kobo Touch, Aldiko for Android
|
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: Quote:
Quote:
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: Quote:
|
|||
09-09-2016, 02:27 PM | #12 | |
Wizard
Posts: 2,297
Karma: 12126329
Join Date: Jul 2012
Device: Kobo Forma, Nook
|
Quote:
https://www.mobileread.com/forums/sho...d.php?t=222825 You may find a useful example or two there. 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.) Last edited by Tex2002ans; 09-09-2016 at 02:35 PM. |
|
09-09-2016, 03:16 PM | #13 |
Read, don't parrot.
Posts: 224
Karma: 110242
Join Date: Apr 2011
Device: Kindle Fire, Kobo Touch, Aldiko for Android
|
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. |
09-10-2016, 02:18 AM | #14 | ||||
Wizard
Posts: 2,297
Karma: 12126329
Join Date: Jul 2012
Device: Kobo Forma, Nook
|
Quote:
After you have the fonts in your EPUB + correct CSS, you could either:
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): Quote:
Quote:
ADE Before/After: Kindle Before/After: Quote:
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. Last edited by Tex2002ans; 09-10-2016 at 02:49 AM. |
||||
09-10-2016, 03:52 AM | #15 | |
Bookmaker & Cat Slave
Posts: 11,462
Karma: 158448243
Join Date: Apr 2010
Location: Phoenix, AZ
Device: K2, iPad, KFire, PPW, Voyage, NookColor. 2 Droid, Oasis, Boox Note2
|
Quote:
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 |
|
Tags |
em value, image scaling, inline image |
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
TOC problem - AZW3 and MOBI do not show inline H2 | hrvojej | Conversion | 2 | 06-06-2016 03:29 PM |
Glo Image problem | Andrew Ashling | Kobo Reader | 18 | 12-12-2012 02:24 PM |
Adding a scaleable inline image within a paragraph | ryntau | ePub | 4 | 02-03-2012 11:20 AM |
Creating epub with inline block problem | Gerlyn | ePub | 5 | 12-22-2011 01:59 PM |
HTML to EPUB Inline Text/Image Issue | HoushaSen | Conversion | 2 | 07-02-2011 08:03 PM |