search

gutenbergtools / ebookmaker

The Project Gutenberg tool to generate EPUBs and other ebook formats.
GNU General Public License v3.0
84 stars 18 forks source link

`<figure>` margin settings are overridden in Epub2 #151

Closed windymilla closed 1 year ago

windymilla commented 1 year ago

To center an image, for many years the Guiguts method was to enclose it in a <div> with a figcenter class. This uses margin:auto to cause the <div> to be centered.

Recently, a <figure> (still with figcenter class) is used instead of the <div>.

When converted to epub2, the <figure> is converted to a <div> with class figure. Additional CSS is written to the HTML file to set the margins for a div.figure to 1em 40px thus overriding the user's settings via figcenter.

This is not only a problem for the specific Guiguts figcenter code, but would break any user's attempts to set margins on their <figure> elements.

This example file shows the problem - the small image on the title page is centered in browsers, but is left-justified in ebookmaker's epub2 output.

windymilla commented 1 year ago

Suggested solution: Don't output any additional CSS setting the margin to 1em 40px. Leave the user to specify margins if they are bothered about them.

eshellman commented 1 year ago

The reason for this css is that it reproduces the default css for a figure element.I think that the way to handle it is to load this css first rather than last so that any author provided css will override it.

windymilla commented 1 year ago

That would work OK as long as this CSS is not more specific than the user's. Hopefully that shouldn't be a problem as the user will not have used the '.figure' class name. I suppose you could prefix it with x-ebookmaker like other classes that ebookmaker adds.

windymilla commented 1 year ago

This is still an issue for many books, with what has been the normal markup for centered images for many years, recently changing to use <figure class="figcenter"> instead of <div class="figcenter">. In epub2, ebookmaker replaces the <figure> with <div> but adds CSS that sets the margins, rather than them being auto as set in the figcenter class. It's been reported in the forums again in the posts leading up to this one. I know the intention is that that the div that being used instead of the figure is to have the default settings that a figure would have, which I agree with. However, the way it is implemented causes those defaults to have a higher precedence than those set in the figcenter class. The following very small file has an HTML, images and epub3/epub2 converted using ebookmaker 0.12.29: cenimg.zip