- General
-
Вопросы
0
Image "width" attribute problems on image intensive ebook
I've made a couple attempts at creating a comic book but have been hung up on formatting issues. I know this can be very tricky for EPUB-based ebooks and is maybe not worth focusing on in alpha, but here's what's happened anyway.
First, without reading anything, I tried making an ebook of pretty high quality 300dpi PNGs that amounted to 12MB of data. The TPE editor was okay with this and output a file as expected. I then tried uploading this to Google's Play Books service and it errored out. I went to test the file with the EPUB validator ( http://validator.idpf.org/application/validate) but it has a threshold of 10MB so I couldn't. I also tried viewing it on an Android phone with Aldiko and it recognized the ebook fine but the sizing was way off so that it was only rendering a small part of each page (Aldiko doesn't seem to let you zoom either).
Before my second attempt I read your guide for image sizing and reformatted all the images to be 1000 pixels wide by 1294 pixels high at 72dpi. Unfortunately the result is exactly the same. But at least the validator would accept the file this time since it's down to ~5MB. The validator says:
value of attribute "width" is invalid; must be an integer
Do you have any formatting advice for making an EPUB that's more akin to a comic book?
First, without reading anything, I tried making an ebook of pretty high quality 300dpi PNGs that amounted to 12MB of data. The TPE editor was okay with this and output a file as expected. I then tried uploading this to Google's Play Books service and it errored out. I went to test the file with the EPUB validator ( http://validator.idpf.org/application/validate) but it has a threshold of 10MB so I couldn't. I also tried viewing it on an Android phone with Aldiko and it recognized the ebook fine but the sizing was way off so that it was only rendering a small part of each page (Aldiko doesn't seem to let you zoom either).
Before my second attempt I read your guide for image sizing and reformatted all the images to be 1000 pixels wide by 1294 pixels high at 72dpi. Unfortunately the result is exactly the same. But at least the validator would accept the file this time since it's down to ~5MB. The validator says:
value of attribute "width" is invalid; must be an integer
Do you have any formatting advice for making an EPUB that's more akin to a comic book?
Сервис поддержки клиентов работает на платформе UserEcho
I think there are a couple issues at play here. The first has to do with weirdnesses of different e-readers. What you're describing often happens for larger images in some e-reading programs. To take an example, the Chrome extension Readium, when it encounters an image that is too long for a particular page, it will cut off the image and display the lower portion of the image on the next page (curiously it only does this when you are viewing a book two pages at a time. For a single page view it handles the image pretty well). iBooks in iOS and on the Mac, on the other hand, handles images as you'd expect. All this is to say that the epub world is not a super standardized. So it may simply be that Aldiko on your Android device can't handle this situation.
All books created using TPE include a css stylesheet that make all images max-width of 100%. Aldiko doesn't seem to be honoring that. It could be that another e-reader would. One thing you could try is selecting an image in the wysiwyg and from the "Paragraph" dropdown choose "image/Caption Full Width"
This will wrap the image in a paragraph and explicitly make the image width 100%. It's possible that an explicit width will be honored by more e-reader apps.
As to the validation error, you probably have a width attribute with a percent in it in one of your images. You should remove it manually. I didn't think you were able to do that via the tool (other than manually), but if you did use one of the wysiwyg controls to do it, would you mind letting me know how?
Also, if you'd like, I can look specifically into your book to check out what's going on and check it on a couple e-readers. Would you mind if I did that?
thanks, oliver
First I tried using the WYSIWYG caption option for all the images but the result was the same. I had a look at the actual HTML being output and verified that all images are now wrapped in paragraph elements with a class attribute set to "fullimage". But yeah, Aldiko still only shows a small portion of the top left corner of each page.
I found mention of a bug in Aldiko where it doesn't respect the max-width property in an external stylesheet. In order to get the proper scaling it seems you have to add max-width as an inline style attribute to every <img> element. Here's where I found mention of this: http://www.mobileread.mobi/forums/showthread.php?t...
re: validation, I checked and none of the page section html files have width attributes in the image elements. However, in the cover page HTML file (e00000.html) the <img> element has a width attribute set to "100%".
Also, I hadn't noticed before, but the cover image actually displays correctly in Aldiko. I'll try adding inline max-width properties to all the other images. But if it's true that Aldiko is for some reason ignoring stylesheet properties than that's pretty lousy and I'd rather just look for a better reader.
Before this I'd never made any manual changes to the images at all. I just made a new page section for each one, drag-and-dropped the images in and hit the "Create Your E-Book" button.
Yeah, definitely feel free to look at the book! Thanks again. -Jesse
Your book is awesome.
I am seeing the differences between readers though. iBooks on an iPhone works as you'd expect. iBooks on the Mac looked perfect when I opened it, but then started leaving a page blank. I think that's just a bug in their program. Readium did the thing I talked about where it splits the image onto two pages. And Ehon ( another desktop reader) honored the 100% width, but you'd couldn't zoom out, so you just had to make the window the correct width to be able to see the whole image.
Since what you want to do is not uncommon, I'm thinking a project for next year will be to add a bit of javascript to resize an image when there's only one on a page. It won't work in all of the readers, but I think it will add a bit of consistency.
Thanks for finding the percentage image width. I found the code that was doing that for the cover and have decided to take it out. Instead it'll wrap the cover image in a paragraph with the class "fullwidth". I'd rather err on the side of having the epub validate.
oliver