oasegips / sigil

Automatically exported from code.google.com/p/sigil
GNU General Public License v3.0
0 stars 0 forks source link

Extra blank page after cover page in Readium #2320

Closed GoogleCodeExporter closed 9 years ago

GoogleCodeExporter commented 9 years ago
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

GoogleCodeExporter commented 9 years ago

Original comment by john@nachtimwald.com on 15 Jul 2013 at 11:29