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

Go Back   MobileRead Forums > E-Book Formats > Kindle Formats

Notices

Reply
 
Thread Tools Search this Thread
Old 05-26-2018, 03:51 AM   #1
ptmkenny
Member
ptmkenny began at the beginning.
 
Posts: 12
Karma: 10
Join Date: May 2018
Device: Kindle Paperwhite
SVG and float CSS on Kindle

When I use float:left, it crushes my SVGs vertically in Kindle Previewer and the macOS Kindle app.

Here is my HTML:

Code:
<p class="speechbubble chat-octopus"><span class="speechicon"><img src="../Images/file4.svg" alt="タコ"/></span>私たち</p>
Here is my CSS:

Code:
p.speechbubble img {
  width: 2em;
  height: 2em;
  margin: 0em;
}

span.speechicon {
  float: left;
}
Here is what this looks like:


And this is what it looks like if I remove float: left:



When I use float:left with a JPG instead of an SVG, the JPG is fine (it is not vertically crushed like the SVG is).

Is there a way to float SVGs without crushing them? Or do I need to convert them to PNG or JPG (I'm trying to avoid this because A) I scale the images at several points in the text and B) the transparency breaks sometimes when using PNG)?
Attached Images
  
ptmkenny is offline   Reply With Quote
Advert
Old 05-26-2018, 03:41 PM   #2
jhowell
Wizard
jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.
 
jhowell's Avatar
 
Posts: 2,155
Karma: 22016394
Join Date: Nov 2011
Location: Florida
Device: Oasis 2, Fire, iPad Air 2, Nexus 7
Quote:
Originally Posted by ptmkenny View Post
Or do I need to convert them to PNG or JPG (I'm trying to avoid this because A) I scale the images at several points in the text and B) the transparency breaks sometimes when using PNG)?
According to the Amazon Kindle Publishing Guidelines image transparency is not supported. While it might work now in some formats on some devices, it is not guaranteed to continue to work in the future.

That document also lists supported and unsupported SVG features. Possibly use of an unsupported feature is causing the problem.
jhowell is offline   Reply With Quote
Old 05-27-2018, 01:58 AM   #3
Hitch
Bookmaker & Cat Slave
Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.
 
Hitch's Avatar
 
Posts: 6,572
Karma: 60087648
Join Date: Apr 2010
Location: Phoenix, AZ
Device: K2, iPad, KFire, PPW, Voyage, and NookColor. 2 Droid, 1 Win8 ePUB rdrs
Quote:
Originally Posted by jhowell View Post
According to the Amazon Kindle Publishing Guidelines image transparency is not supported. While it might work now in some formats on some devices, it is not guaranteed to continue to work in the future.

That document also lists supported and unsupported SVG features. Possibly use of an unsupported feature is causing the problem.
NOT to mention, but in KF8, you can have exactly ONE SVG image per page/screen. By which I mean, it will render with a page-break after EVERY use of SVG.

Look--we've done scads of books that are innovatively (cough) full of "speech bubbles." They are a nightmare to do, and they don't work very well, across devices--and, FWIW, they're godawful in the LITB. I have a client now that insists on redoing a book we did for her previously, b/c it doesn't/can't/won't work in the LITB--why on earth she thinks reshuffling the book will solve the problem, I don't know. I've repeatedly explained that it won't.

The ONLY way to to what you want is one jpg-one bubble. Or, two bubbles to a jpeg, take your pick. Yes, it sucks, but that's the reality.

Hitch
Hitch is offline   Reply With Quote
Old 05-27-2018, 10:08 AM   #4
RbnJrg
Guru
RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.
 
Posts: 831
Karma: 3222221
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by ptmkenny View Post
When I use float:left, it crushes my SVGs vertically in Kindle Previewer and the macOS Kindle app.
I think you are using a bad code to include a svg image in Kindle. Below you can see a .mobi file with two svg images (in this case, a letter) and the respective epub. And you can watch how it looks in the following screenshot of my Kindle:

Click image for larger version

Name:	screen_shot-36190.gif
Views:	29
Size:	40.5 KB
ID:	164127

I hope this can help you.

Regards
Rubén

PS: Of course, instead of <text></text> you have to use <image></image> tags to include the picture you want.
Attached Files
File Type: epub SVG Drop for Kindle.epub (2.7 KB, 15 views)
File Type: mobi SVG Drop for Kindle.mobi (30.1 KB, 21 views)
RbnJrg is online now   Reply With Quote
Old 05-27-2018, 10:10 AM   #5
RbnJrg
Guru
RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.
 
Posts: 831
Karma: 3222221
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by Hitch View Post
NOT to mention, but in KF8, you can have exactly ONE SVG image per page/screen. By which I mean, it will render with a page-break after EVERY use of SVG.

Look--we've done scads of books that are innovatively (cough) full of "speech bubbles." They are a nightmare to do, and they don't work very well, across devices--and, FWIW, they're godawful in the LITB. I have a client now that insists on redoing a book we did for her previously, b/c it doesn't/can't/won't work in the LITB--why on earth she thinks reshuffling the book will solve the problem, I don't know. I've repeatedly explained that it won't.

The ONLY way to to what you want is one jpg-one bubble. Or, two bubbles to a jpeg, take your pick. Yes, it sucks, but that's the reality.

Hitch
Hi Hitch;

Maybe the method I use to include SVG images as DropCaps can be useful for you to include more than one svg image in a same page. Watch my previous post to see two SVG DropCaps in a same Kindle page.

Regards
Rubén
RbnJrg is online now   Reply With Quote
Old 05-27-2018, 07:24 PM   #6
Hitch
Bookmaker & Cat Slave
Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.
 
Hitch's Avatar
 
Posts: 6,572
Karma: 60087648
Join Date: Apr 2010
Location: Phoenix, AZ
Device: K2, iPad, KFire, PPW, Voyage, and NookColor. 2 Droid, 1 Win8 ePUB rdrs
Quote:
Originally Posted by RbnJrg View Post
Hi Hitch;

Maybe the method I use to include SVG images as DropCaps can be useful for you to include more than one svg image in a same page. Watch my previous post to see two SVG DropCaps in a same Kindle page.

Regards
Rubén
Rubén:

Of course, I'll look at it--but it's highly unlikely we'll use it. I am still quite determined that I won't do anything that excludes a user from reading their book on a KF7. Oh, sure, we could probably work around it, but...{shrug}. It feels, at the moment, that it's more effort than the reward, but I will most surely look.

ETA: Your svgs, Rubén, are being created on the fly. You are not using an existing SVG image. I'll investigate when I'm back at the office, but I suspect that our "coding" isn't massively different--but what we're talking about, is. Just like the OP, who is using existing SVG images. Do you see what I mean?


Hitch

Last edited by Hitch; 05-27-2018 at 07:34 PM. Reason: Added the ETA.
Hitch is offline   Reply With Quote
Old 05-28-2018, 06:43 AM   #7
ptmkenny
Member
ptmkenny began at the beginning.
 
Posts: 12
Karma: 10
Join Date: May 2018
Device: Kindle Paperwhite
Rubén, thank you for the code example. I checked it out and it works in Kindle Previewer. It seems the difference is that I used a "drop caps" <span> (float: left) inside a <p>, whereas you use a "drop caps" <p> (float: left) inside a <div>.

So perhaps this is caused by the way Kindle handles <span> and <p>? I'll do some more testing to see if I can figure it out.
ptmkenny is offline   Reply With Quote
Old 05-28-2018, 08:07 AM   #8
RbnJrg
Guru
RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.
 
Posts: 831
Karma: 3222221
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by Hitch View Post
Rubén:

Of course, I'll look at it--but it's highly unlikely we'll use it. I am still quite determined that I won't do anything that excludes a user from reading their book on a KF7. Oh, sure, we could probably work around it, but...{shrug}. It feels, at the moment, that it's more effort than the reward, but I will most surely look.

ETA: Your svgs, Rubén, are being created on the fly. You are not using an existing SVG image. I'll investigate when I'm back at the office, but I suspect that our "coding" isn't massively different--but what we're talking about, is. Just like the OP, who is using existing SVG images. Do you see what I mean?


Hitch
Yes, I understand you Hitch. I will do some tests with more elaborated svg images and I'll see what happens.
RbnJrg is online now   Reply With Quote
Old 05-28-2018, 01:17 PM   #9
Hitch
Bookmaker & Cat Slave
Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.
 
Hitch's Avatar
 
Posts: 6,572
Karma: 60087648
Join Date: Apr 2010
Location: Phoenix, AZ
Device: K2, iPad, KFire, PPW, Voyage, and NookColor. 2 Droid, 1 Win8 ePUB rdrs
Quote:
Originally Posted by RbnJrg View Post
Yes, I understand you Hitch. I will do some tests with more elaborated svg images and I'll see what happens.
I'll ask my guys to take a look, too, when I get back to the madness. I, for a change, am taking all THREE WHOLE DAYS of the Memorial Day weekend here off. First three days in a row I've had off in forever. Hell, I don't even take both days of the weekend off, so I am definitely goofing off. :-)

Hitch
Hitch is offline   Reply With Quote
Old 05-28-2018, 04:23 PM   #10
RbnJrg
Guru
RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.
 
Posts: 831
Karma: 3222221
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by Hitch View Post
I'll ask my guys to take a look, too, when I get back to the madness. I, for a change, am taking all THREE WHOLE DAYS of the Memorial Day weekend here off. First three days in a row I've had off in forever. Hell, I don't even take both days of the weekend off, so I am definitely goofing off. :-)

Hitch
When you have decided to return from your holydays, then take a look for the material I attach.
I didn't have any issue to include more elaborated svg images; it works fine, watch for yourself:

Click image for larger version

Name:	screen_shot-36191.gif
Views:	34
Size:	40.5 KB
ID:	164151

I was reading the Kindle Guidelines and the restriction I saw is that it can't have more than one <image> tag inside of a <svg> tag. But that is not a problem, just is matter of opening for each svg image one svg tag

Enjoy your free days
Rubén
Attached Files
File Type: epub SVG Float Images for Kindle.epub (36.8 KB, 11 views)
File Type: mobi SVG Float Images for Kindle.mobi (137.2 KB, 12 views)
RbnJrg is online now   Reply With Quote
Old 05-29-2018, 11:25 AM   #11
Hitch
Bookmaker & Cat Slave
Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.
 
Hitch's Avatar
 
Posts: 6,572
Karma: 60087648
Join Date: Apr 2010
Location: Phoenix, AZ
Device: K2, iPad, KFire, PPW, Voyage, and NookColor. 2 Droid, 1 Win8 ePUB rdrs
Quote:
Originally Posted by RbnJrg View Post
When you have decided to return from your holydays, then take a look for the material I attach.
I didn't have any issue to include more elaborated svg images; it works fine, watch for yourself:

Attachment 164151

I was reading the Kindle Guidelines and the restriction I saw is that it can't have more than one <image> tag inside of a <svg> tag. But that is not a problem, just is matter of opening for each svg image one svg tag

Enjoy your free days
Rubén
Hey, Rubén:

My guys tell me that the multiple-images-per "page" thing changed in Feb or March, so you're right, and I'm wrong--I'm apparently behind, a bit.

They tell me that the real reason that we decided to not proceed with SVG was the (ironically) lack of zoomability. That's what drove our internal decision, and now that they're reminded me, I do remember this. We had a client with a boatload of vector graphics, and we looked into this for that book. At the time--beginning of the year--we still had that "page-break after each svg" problem to deal with, but I also now recall that they also weren't zoomable, and the client was having NONE of that, so...we put it back on the shelf for a while.

Offered solely FWIW. I'll have my guys take some peeks at what you've done here, of course. :-)

Hitch
Hitch is offline   Reply With Quote
Old 05-29-2018, 04:20 PM   #12
Tex2002ans
Guru
Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.
 
Posts: 995
Karma: 5860817
Join Date: Jul 2012
Device: Nook
Quote:
Originally Posted by Hitch View Post
At the time--beginning of the year--we still had that "page-break after each svg" problem to deal with, but I also now recall that they also weren't zoomable,[...]
Good to hear the "page-break after each SVG" was solved. I assume it was never mentioned in any sort of changelogs?
Tex2002ans is offline   Reply With Quote
Old 05-29-2018, 05:53 PM   #13
Hitch
Bookmaker & Cat Slave
Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.Hitch ought to be getting tired of karma fortunes by now.
 
Hitch's Avatar
 
Posts: 6,572
Karma: 60087648
Join Date: Apr 2010
Location: Phoenix, AZ
Device: K2, iPad, KFire, PPW, Voyage, and NookColor. 2 Droid, 1 Win8 ePUB rdrs
Quote:
Originally Posted by Tex2002ans View Post
Good to hear the "page-break after each SVG" was solved. I assume it was never mentioned in any sort of changelogs?
Not that I know of. For that matter, as far as I know, it was never mentioned as a bug, like most other weirdo things in the MOBI environment.

Hitch
Hitch is offline   Reply With Quote
Old 06-12-2018, 04:43 AM   #14
ptmkenny
Member
ptmkenny began at the beginning.
 
Posts: 12
Karma: 10
Join Date: May 2018
Device: Kindle Paperwhite
Mostly working solution

Ok, after much more testing, I identified the problem.

Thanks to RbnJrg for the sample code which pointed me in the right direction.

When you use an <img> tag for SVGs and set the height and width, this problem does not occur. However, if you leave the height and width blank and then attempt to set the height/width of the SVG to "~em" using CSS, then the Kindle app may squish the SVG to nothing.

So there are two potential ways to fix this:
1) Set the height and width (which prevents the SVGs from automatically resizing when the user increases/decreases the text size)
2) Put the SVG in an <img> tag inside a <div> like this:

Code:
<div class="speechbubble>
  <div class="speechicon"><img src="media/svg/mysvg.svg" alt="mysvg" /></div>
  <p class="speechtext">My text here.</p>
</div>
Then, in the CSS, set the height/width of the SVG by targeting the <div> container (div.speechicon in this example), not the <img> tag (targeting the <img> tag is fine for normal HTML/iBooks, but will break on Kindle).

I now have this working (SVGs resize properly when the user increases/decreases the text size) on Paperwhite, iOS, and Windows and Mac apps. There are a few visual problems based on the fact that iOS vs. Windows/Mac vs. Paperwhite handle line-height and margins differently, but it's much better than before. Many thanks!
ptmkenny 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
EPUB to MOBI (AZW3). Black SVG images with CSS styles uka Conversion 6 03-04-2018 09:50 PM
Can't add cover in Calibre -- get "svg-error" (the property 'svg' should be declared) Just some guy Editor 7 04-11-2017 09:54 PM
Using float in ADR v1 and v2 bobcdy ePub 5 01-31-2015 02:36 AM
The operator >> is undefined for the argument type(s) float, float twobob Kindle Developer's Corner 10 09-05-2012 12:50 PM
Kindle and SVG? Tom Wood News 1 09-03-2010 08:06 PM


All times are GMT -4. The time now is 12:55 PM.


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