When using RLT css, this book cover is cut off and has strange flow. Please check

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

As said before to <a class="user-mention notranslate" data-hovercard-type="user" data-

Book cover has strange flow and cut into 2 pages about readium-css HOT 8 CLOSED

readium commented on June 11, 2024

Book cover has strange flow and cut into 2 pages

from readium-css.

Comments (8)

iaomw commented on June 11, 2024

@JayPanoz

from readium-css.

JayPanoz commented on June 11, 2024

Hmmm, I can see two issues in <head> at first sight:

ReadiumCSS-before.css is loaded after all other stylesheets while it should come first (before authors’ stylesheet(s);
the ReadiumCSS stylesheet used are the ones for CJK in vertical writing (for RTL, they should be the one in the RTL folder, which is this one)

Do you get the same result with the RTL stylesheets?

from readium-css.

JayPanoz commented on June 11, 2024

Also, I would recommend dividing this sample into 2 because, in and of itself, it exactly is an edge case we agreed to not handle back in December 2017 as the EPUB spec provides zero guidance for it.

So it would be a better idea to isolate Japanese from Arabic/Hebrew.

from readium-css.

iaomw commented on June 11, 2024

Hi, the order doesn't matter, it will have the same effect. I have double checked it in Safari.

This one in picture is modified by myself on Mac, so it has this order. Don't worry. The webpage generated by Streamer has correct order.

The book is using CJK vertical mainly, and this cover html is mark as xml:lang="ja"
Logically, we should use CJK vertical. What is the reason to use others?

I just checked the css file under rtl, it will have some difference but still been cut off.

from readium-css.

JayPanoz commented on June 11, 2024

OK I’ll take a look and report back.

But if we end up discovering we need to isolate h1 wrapping svg or images from others, there’s nothing we can do in CSS to achieve that.

from readium-css.

iaomw commented on June 11, 2024

Thanks. I also found if the h1 has a width:(some number smaller than the container): important!
It will also work fine. But I am not CSS expert. You guys should has better solutions.

from readium-css.

JayPanoz commented on June 11, 2024

OK so I was able to reproduce this issue… without loading any ReadiumCSS stylesheet.

h1 indeed has no dimensions set (width and height) so it can’t constrain the nested SVG which is 100% of… nothing. This explains why putting a width on h1 works, as you reported in the comment above.

With ReadiumCSS Stylesheets loaded we got this (note columns are on the y-axis).

I’m reluctant to safeguard h1 there, as some may well be more than the width of the page so our best option is probably switching to viewport width (vw) there. But that is not a perfect solution as it will indeed create a blank page after.

I’ll try deploying the change on the develop branch ASAP so that we can see if it is good enough. But there’s not much we can do considering it doesn’t even work properly when kept untouched (and there’s consequently an authoring issue).

from readium-css.

llemeurfr commented on June 11, 2024

As said before to @iaomw, this edge case EPUB sample must be put on the side for RTL study and only used for check if the issue we see here can be solved easily. We must not spend too much time on this.

from readium-css.

Book cover has strange flow and cut into 2 pages about readium-css HOT 8 CLOSED

Comments (8)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent