11-13-2017, 09:07 AM | #1 |
Connoisseur
Posts: 97
Karma: 44418
Join Date: Jul 2013
Location: Mostly in my own head!
Device: Kindle Fire, iPad
|
Image issues on multiple iOS apps
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: Code:
<div class="container"> <img class="textSeparator" alt="text separator" src="separator.png"/> </div> Code:
div.container { margin: 1em 0; text-align: center; } img.textSeparator { max-width: 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. Last edited by Nabodita; 11-13-2017 at 09:34 AM. Reason: Updated testing results |
11-13-2017, 11:20 AM | #2 |
Unicycle Daredevil
Posts: 13,923
Karma: 185041098
Join Date: Jan 2011
Location: Planet of the Pudding Brains
Device: Aura HD (R.I.P. After six years the USB socket died.) tolino shine 3
|
Have you tried using width instead of or in addition to max-width?
|
Advert | |
|
11-13-2017, 01:03 PM | #3 |
Grand Sorcerer
Posts: 11,470
Karma: 13095790
Join Date: Aug 2007
Location: Grass Valley, CA
Device: EB 1150, EZ Reader, Literati, iPad 2 & Air 2, iPhone 7
|
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 |
11-13-2017, 02:17 PM | #4 | ||
Connoisseur
Posts: 97
Karma: 44418
Join Date: Jul 2013
Location: Mostly in my own head!
Device: Kindle Fire, iPad
|
Quote:
Quote:
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. |
||
11-13-2017, 02:37 PM | #5 |
Unicycle Daredevil
Posts: 13,923
Karma: 185041098
Join Date: Jan 2011
Location: Planet of the Pudding Brains
Device: Aura HD (R.I.P. After six years the USB socket died.) tolino shine 3
|
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.
|
Advert | |
|
11-13-2017, 02:48 PM | #6 |
Connoisseur
Posts: 97
Karma: 44418
Join Date: Jul 2013
Location: Mostly in my own head!
Device: Kindle Fire, iPad
|
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! |
11-13-2017, 03:22 PM | #7 |
Unicycle Daredevil
Posts: 13,923
Karma: 185041098
Join Date: Jan 2011
Location: Planet of the Pudding Brains
Device: Aura HD (R.I.P. After six years the USB socket died.) tolino shine 3
|
|
11-13-2017, 07:54 PM | #8 | |
A Hairy Wizard
Posts: 3,095
Karma: 18727053
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
|
Quote:
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, |
|
11-14-2017, 12:32 AM | #9 | |
Connoisseur
Posts: 97
Karma: 44418
Join Date: Jul 2013
Location: Mostly in my own head!
Device: Kindle Fire, iPad
|
Quote:
Thanks for the heads-up about the full screen image bug... that was next on my "Huh? Why isn't it working?" list... |
|
11-14-2017, 03:41 AM | #10 |
Connoisseur
Posts: 97
Karma: 44418
Join Date: Jul 2013
Location: Mostly in my own head!
Device: Kindle Fire, iPad
|
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. |
11-14-2017, 06:48 AM | #11 |
Unicycle Daredevil
Posts: 13,923
Karma: 185041098
Join Date: Jan 2011
Location: Planet of the Pudding Brains
Device: Aura HD (R.I.P. After six years the USB socket died.) tolino shine 3
|
Putting your image in an SVG wrapper and setting height and width of that to 60% might be worth a try.
|
11-14-2017, 06:54 AM | #12 |
Unicycle Daredevil
Posts: 13,923
Karma: 185041098
Join Date: Jan 2011
Location: Planet of the Pudding Brains
Device: Aura HD (R.I.P. After six years the USB socket died.) tolino shine 3
|
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%:
Code:
<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> |
11-16-2017, 01:23 AM | #13 |
Connoisseur
Posts: 97
Karma: 44418
Join Date: Jul 2013
Location: Mostly in my own head!
Device: Kindle Fire, iPad
|
@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 Last edited by Nabodita; 11-16-2017 at 04:29 AM. |
11-16-2017, 03:41 PM | #14 |
A Hairy Wizard
Posts: 3,095
Karma: 18727053
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
|
|
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
[iOS] How to stop Calibre Companion from multiple copying Ebook/PDFs to reader apps? | chp380 | Calibre Companion | 6 | 05-05-2017 05:20 AM |
URL schemes of iOS apps | cedhax | Apple Devices | 8 | 03-04-2017 09:08 PM |
Kindle for iOS (AZK format) - image sizing issues | heulwen.jones | Kindle Formats | 3 | 05-11-2016 07:58 PM |
Keyboard support in iOS apps | tomsem | Apple Devices | 8 | 03-04-2016 05:59 PM |
Android and iOS apps | brudigia | Kobo Reader | 2 | 08-03-2012 02:28 PM |