What steps will reproduce the problem?
1. Add an existing file called "cover.jpg" (1562 x 2500 px) to the Images
folder.
2. Select Tools, Add Cover..., select the "cover.jpg" file, and press OK.
3. Save the EPUB file and open it in the Readium Web Chrome Extension.
What is the expected output? What do you see instead?
I expect to see the cover page followed immediately by the next page of the
e-book, such as the title page. Instead, I see an extra blank page between the
cover page and what should be the next page.
What version of the product are you using? On what operating system?
Sigil is running on Mac OS X, while Readium is running in Chromium on Ubuntu,
as follows:
- Sigil Version 0.7.2, Loaded Qt 5.0.2
- Apple Mac OS X System Version: OS X 10.8.4 (12E55), Kernel Version: Darwin
12.4.0
- Readium Web Chrome Extension Version 0.9.1 Release Date 05.17.13
- Chromium Version 28.0.1500.52 Ubuntu 13.04 (28.0.1500.52-0ubuntu1.13.04.3)
Please provide any additional information below. If your source file is
required to fully understand the problem, please attach it to this issue.
One fix for the problem is to style the "svg" element with "display: block"
after Sigil creates the "cover.xhtml" page. The "cover.xhtml" body before and
after the fix are shown below:
BEFORE (causing extra blank page)
<body>
<div style="text-align: center; padding: 0pt; margin: 0pt;">
<svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 1562 2500" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
<image width="1562" height="2500" xlink:href="../Images/cover.jpg"></image>
</svg>
</div>
</body>
AFTER (no extra blank page)
<body>
<div style="text-align: center; padding: 0pt; margin: 0pt;">
<svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 1562 2500" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: block">
<image width="1562" height="2500" xlink:href="../Images/cover.jpg"></image>
</svg>
</div>
</body>
The only difference is the following style attribute on the "svg" element:
style="display: block"
I think it's the same general problem that is documented by Mozilla here:
Images, Tables, and Mysterious Gaps
https://developer.mozilla.org/en-US/docs/Images,_Tables,_and_Mysterious_Gaps
Without the added style, the "svg" element is displayed inline with any text.
There is no text on the same line as the cover image, yet there is still an
extra 5 pixels of "descender space" reserved below the image. With the image
height at 100 percent, the baseline of the image is aligned with the bottom of
the page, so the descender space gets pushed onto an additional blank page that
follows.
Displaying the "svg" element as a block removes the descender space and fixes
the problem.
Original issue reported on code.google.com by jgn...@gmail.com on 15 Jul 2013 at 11:12
Original issue reported on code.google.com by
jgn...@gmail.com
on 15 Jul 2013 at 11:12