Image issues on multiple iOS apps

[Nabodita]

I'm working on a version of Alice in Wonderland which has a few images. I'm having issues with image formatting in different e-reading apps on iOS.

Example: One of the images is a text separator and I have a very simple piece of code for formatting this image.

In the XHTML:

<div class="container">
    <img class="textSeparator" alt="text separator" src="separator.png"/>
</div>

In the CSS:

div.container {
    margin: 1em 0;
    text-align: center;
}

img.textSeparator {
    max-width: 40%
}

I want the image to be centered horizontally (hence I've set text-align: center on the containing div) and I don't want the image to take take up the entire width of the screen (hence I've set the max-width of the image to 40%).

I've tested this ebook on:

-- the desktop version of ADE (v4.5)
-- ADE for iOS
-- Bluefire reader for iOS
-- Aldiko Book Reader for iOS and android
-- Kobo Reader app for android
-- my Kobo Reader
-- my Sony Reader

where it works fine.

It doesn't work in the following:

-- Kobo App for iOS
-- Marvin 3 (iOS)
-- Marvin Classic (iOS)

In these apps, the image takes up the full width of the screen so I assume the max-width property is being ignored.

I can't make the code any simpler. Either I'm missing something fundamental or it's a conspiracy to drive me crazy.

Please share your thoughts. Thanks.

Edit: If I set max-width: 40% as an inline style in the <img> tag instead of in the CSS, it works fine in the Kobo iOS app but not in Marvin Classic or Marvin 3.

[doubleshuffle]

Have you tried using width instead of or in addition to max-width?

[DaleDe]

I would forward this as a bug to Marvin. Another you might want to try is iBooks. You could also place this inside an SVG image and size it from there.

Dale

[Nabodita]

Originally Posted by doubleshuffle

Have you tried using width instead of or in addition to max-width?

Just tested the width property. You were right, setting the width to 40% works, whether or not the max-width property is present. I'm checking whether this displays correctly across the other apps and devices. Thanks a bunch!

Originally Posted by DaleDe

I would forward this as a bug to Marvin. Another you might want to try is iBooks. You could also place this inside an SVG image and size it from there.

Dale

I'm guessing this is still a bug that needs to be reported.

Not sure about using an svg wrapper... I haven't researched this yet but the Kobo app (both iOS and android), Marvin Classic and Marvin 3 is cutting off the bottom portion of the ebook cover and sending it to the next page.

[doubleshuffle]

Originally Posted by Nabodita

Just tested the width property. You were right, setting the width to 40% works, whether or not the max-width property is present. I'm checking whether this displays correctly across the other apps and devices. Thanks a bunch!

You're welcome. I usually use width in percent to set the width in relation to the page, and then max-width in px so that an image doesn't get blown up too far beyond its resolution; a trick I stole from the books of the wonderful GrannyGrump - look at her uploads to the MR library to find out all about image formatting.

[Nabodita]

Any idea why the max-width property didn't work? And yes, just tested across the same list of apps and devices and it works perfectly.

Will definitely take a look at GrannyGrump's books... I can use all the help I can get!

[doubleshuffle]

Originally Posted by Nabodita

Any idea why the max-width property didn't work?

No idea at all. But I can't even say if it should work. I am pretty clueless and unsystematic anyway, operating solely by trial, error and lifting code from folks who know what they are doing.

[Turtle91]

Originally Posted by Nabodita

Any idea why the max-width property didn't work? And yes, just tested across the same list of apps and devices and it works perfectly.

Will definitely take a look at GrannyGrump's books... I can use all the help I can get!

Well, Marvin's intent is to present regular books in their best possible light...this includes most of the very horrendously formatted books you find coming from self-pubs (and even sone publishing houses ). To do this, Marvin has it's own idea of how the formatting should be applied and ends up ignoring a lot of the css/styling from within the book. This is done intentionally - not a bug. You can bypass this behavior and have it faithfully render the book as published by turning on "Publisher's layout" from within the book settings in Marvin. (select the Aa and scroll down).

I use the same technique as described above (width:xx%; max-width:xxxpx) and haven't noticed any problems with Marvin. Full disclosure: I use Marvin on an iPhone 7+, and while the screen is fairly large, it doesn't allow for extensive testing of large images. My smaller images seem to work fine with the above technique.

Full screen images wrapped with an SVG do have a known bug. Instead of centering the image on the screen, the image is flush with the top.

Cheers,

[Nabodita]

Originally Posted by Turtle91

Well, Marvin's intent is to present regular books in their best possible light...this includes most of the very horrendously formatted books you find coming from self-pubs (and even sone publishing houses ). To do this, Marvin has it's own idea of how the formatting should be applied and ends up ignoring a lot of the css/styling from within the book. This is done intentionally - not a bug. You can bypass this behavior and have it faithfully render the book as published by turning on "Publisher's layout" from within the book settings in Marvin. (select the Aa and scroll down).

I use the same technique as described above (width:xx%; max-width:xxxpx) and haven't noticed any problems with Marvin. Full disclosure: I use Marvin on an iPhone 7+, and while the screen is fairly large, it doesn't allow for extensive testing of large images. My smaller images seem to work fine with the above technique.

Full screen images wrapped with an SVG do have a known bug. Instead of centering the image on the screen, the image is flush with the top.

Cheers,

I'm using a custom font for poetry in the book so I did have Publisher's Layout turned on.

Thanks for the heads-up about the full screen image bug... that was next on my "Huh? Why isn't it working?" list...

[Nabodita]

I'm posting this in this thread because I'm still dealing with image issues in the same ebook on the same apps..

I also have some images which are taller than they are wide. I wanted them to take up about 60% of the height of the screen. Unfortunately, neither height nor max-height properties appear to work on the Kobo app for iOS, Marvin 3 and Marvin Classic.

My theory is that since a percentage value defines the height of the image in respect to its containing element (and not the screen height), I'm not seeing the applied formatting. Of course, that doesn't explain why the height / max-height property appears to work in other apps and devices.

I can always fit these images into the document flow using the width property, but this does not give me control over how much of the vertical screen space an image occupies.

Any suggestions for formatting these images would be really appreciated! I suppose I should go check out GrannyGrump's books now.

[doubleshuffle]

Putting your image in an SVG wrapper and setting height and width of that to 60% might be worth a try.

[doubleshuffle]

No time for proper testing, but at least in Sigil this seems to work (even with only height set at 60% and width left at 100%:

<div>
    <svg xmlns="http://www.w3.org/2000/svg" height="60%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 930 1314" width="60%" xmlns:xlink="http://www.w3.org/1999/xlink">
      <image width="930" height="1314" xlink:href="../Images/filename.jpg"></image>
    </svg>
  </div>

[Nabodita]

@doubleshuffle
Yes, it works with only the height set to 60% and leaving the width at 100%. I'm not posting the code because my code is identical to the one you've posted.

Should the width be set to 'auto' instead of 100%?

I'll post back if I find issues with this on any app or reader.

@Turtle91
Is there a workaround for the full page svg bug in Marvin?

Thank you.
Nabodita

[Turtle91]

Originally Posted by Nabodita

@Turtle91
Is there a workaround for the full page svg bug in Marvin?

Thank you.
Nabodita

Not that I know of. I know Kris is aware of the issue, but I think it's pretty low on the priority list.