ebookmaker silently wraps img elements under body

[charliehoward4dp]

This probably is not not the right place to ask this question, but it’s the closest I can find: in e-book number 69503, “Looking towards Sunset”, the HTML version’s illustrated dropped caps does not hide the underlying first letter of the word with which they are associated. There is a sizable gap between the illustrated drop cap and the first word, with the first word repeating the text version of the illustrated drop cap. This was my project, and when I look at what I submitted to project Guttenberg, it displays properly in browsers, unlike what is at project Guttenberg. When I look at the project Guttenberg CSS and HTML, I see differences that could explain why the book is not being displayed properly. Why is this happening, and what, if anything, can I do about it?

The ebook’s folders do not contain a converter.log; at least, none I could find.

[charliehoward4dp]

I found the converter.log with your help, but didn't see any "errors", just a zillion warnings about empty 'alt's for images. The illustrated drop-cap references all have filled-in 'alt' fields.

Here are the original submitted files, if they might be useful: sunset.zip

[eshellman]

Thanks, Charlie. What's happening here is that Ebookmaker is wrapping your drop cap img in a div. img elements are not allowed directly under body in XHTML 1.0 strict documents, though they are allowed in HTML5. Ebookmaker wraps top-level img elements in order to produce valid EPUB2 (and maybe EPUB3 as well?) files.

if you move the img inside the p or wrap the img and p in a div, ebookmaker won't mess with them.

I should probably add a warning message about this behavior, but in most cases the change has no effect - what do you think?

[charliehoward4dp]

Moving the img inside the p doesn't work; result is the same as using the PG copy: there's a large horizontal gap after the image, and the first letter of the word displays, rather than being hidden.

Enclosing the img and its associated p within a div works, but is awkward/inefficient, as there usually are several/many of them. Also, I can't test to see how the final PG version will look (see next paragraph).

Enclosing the entire body in a div works and is efficient, but:

1. I can't test to see how the PG version will look (I ran the file through online eBookMaker and downloaded the resulting html. It was identical to the file I supplied, rather than being modified the way the final PG version was with the original).
2. There are situations in which nested divs do not work the same way as unnested ones. I don't remember the details, and can't guess as to which of my (or other peoples') projects would be affected by that kind of nesting -- in the past or the future.

[charliehoward4dp]

DP's "Best Practices" shows a different way of doing illustrated drop caps, and it encloses the img tags in a div, which makes it compatible with eBookMaker's requirements. That solves the problem. Thank you for clarifying the situation.

[eshellman]

glad to be able to help a bit.