Preserve vh/vw units in compatibility CSS #747
Merged
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
In the Apple Books app on iOS, full-page images are often spread over multiple pages:
Example from How the other half lives:
The full-page figures are styled with
max-height: 100vh
(see CSS from the book), but the compatibility code inse build
converts thevh
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
andvm
units for readers that support this (such as the Apple Books app):This fixes the problem, see this image from the Books app:
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 byse 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
withmargin-top: 5em
. As far as I can see, this doesn't currently do anything, because the20vh
is changed to20%
before this rule is reached. For an input of:the current rules generate CSS:
However, now that the main change in this PR preserves the
vh
, it would generate this:so I think it is better to remove the old rule. The result would then be: