SVG and float CSS on Kindle

[ptmkenny]

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

Here is my HTML:

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

Here is my CSS:

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)?

[jhowell]

Originally Posted by ptmkenny

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.

[Hitch]

Originally Posted by jhowell

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

[RbnJrg]

Originally Posted by ptmkenny

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:



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.

[RbnJrg]

Originally Posted by Hitch

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

[Hitch]

Originally Posted by RbnJrg

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

[ptmkenny]

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.

[RbnJrg]

Originally Posted by Hitch

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.

[Hitch]

Originally Posted by RbnJrg

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

[RbnJrg]

Originally Posted by Hitch

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:



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

[Hitch]

Originally Posted by RbnJrg

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

[Tex2002ans]

Originally Posted by Hitch

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?

[Hitch]

Originally Posted by Tex2002ans

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

[ptmkenny]

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:

<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!