kotlin-toolkit icon indicating copy to clipboard operation
kotlin-toolkit copied to clipboard

Published 20 hours ago • verified publisher icon readium

EPUB Fixed layout content do not display correctly

Open ajeanjean-vivlio opened this issue 3 years ago • 1 comments

Bug Report

What happened?

Today we faced an issue with epub fixed-layout on android. Some books do not display correctly. They open, but the height of the <Body> is insufficient. You just see a line, or nothing at all.

By debugging the Iframe and manipulating the css, you just need to add the css property height:700px to see the page content appear.

On IOS and on the web no problem.

There is a file on swift-toolkit named : readium-fixed-wrapper.js that we did not find out on kotlin-toolkit. I don't know if the problem comes specifically from there. But it seems to miss a calculation step to determine the iframe size on the android side.

Expected behavior

We should calculate the size needed to display the book content.

How to reproduce?

  1. Open book on android
  2. Open chrome inspector
  3. Click on inspect
  4. Add css property height: 700px to <Body>

Environment

  • Readium version: 2.2.0

Development environment

  • OS: macOS 12.2.1
  • IDE: Android Studio 2021.1.1

Testing device

  • Android version: 12
  • Model: Pixel 5 API 32
  • Is it an emulator? Yes

Additional context

Here are some screenshots:

Android without changing css Screenshot 2022-08-03 at 15 55 25

Android with updated css Screenshot 2022-08-03 at 16 07 32

IOS Screenshot 2022-08-03 at 15 59 00

Thank you for your help.

ajeanjean-vivlio avatar Aug 03 '22 15:08 ajeanjean-vivlio

Note to self: les-secrets-de-fantomette.epub

We probably need to extract the page size from the viewport meta tag instead of expecting that FXL books have height and width set.

mickael-menu avatar Aug 03 '22 15:08 mickael-menu