standardebooks / tools

The Standard Ebooks toolset for producing our ebook files.
Other
1.43k stars 127 forks source link

Preserve vh/vw units in compatibility CSS #747

Closed gvtulder closed 2 months ago

gvtulder commented 2 months ago

In the Apple Books app on iOS, full-page images are often spread over multiple pages:

Example from How the other half lives: before 1 before 2 before 3

The full-page figures are styled with max-height: 100vh (see CSS from the book), but the compatibility code in se build converts the vh units to percentages. Apparently this doesn't work for full-page images in Apple Books. (Cantook on iOS doesn't have this problem: it show the images on a single page.)

This patch changes the compatibility code so that it still adds the percentages, but also keeps the vh and vm units for readers that support this (such as the Apple Books app):

    max-height: 100%;
    max-height: 100vh;

This fixes the problem, see this image from the Books app: after


The change itself is quite small, but testing it is a bit more involved. This is the first test using se build, as far as I can see. The test actually runs two commands: se build to build the epub, followed by se extract-ebook to extract the files that can be compared against the golden version.

(I'd be happy to submit a patch without the test, if the test framework is out of scope for this PR.)


The third change (the middle commit) removes an unused compatibility rule that is supposed to replace margin-top: 20vh with margin-top: 5em. As far as I can see, this doesn't currently do anything, because the 20vh is changed to 20% before this rule is reached. For an input of:

    max-height: 20vh;

the current rules generate CSS:

    max-height: 20%;

However, now that the main change in this PR preserves the vh, it would generate this:

    max-height: 20%;
    max-height: 5em;

so I think it is better to remove the old rule. The result would then be:

    max-height: 20%;
    max-height: 20vh;
acabal commented 2 months ago

Great work, thanks!