search

readium / readium-css

🌈 A set of reference stylesheets for EPUB Reading Systems, starting with Readium Mobile
https://readium.org/readium-css/
BSD 3-Clause "New" or "Revised" License
90 stars 20 forks source link

readium cover image split across 2 pages #10

Closed artbyrt closed 6 years ago

artbyrt commented 6 years ago

I'm trying to find a way to fit cover image onto single page. CSS has max-height: 95%; and max-width: auto; as well as a container p with object-fit: contain; and overflow: hidden;. But Readium is ignoring this. Any suggestions?

JayPanoz commented 6 years ago

Hum I assume this is happening in Readium JS? We didn't ship any of the CSS in an app yet.

See this issue (and the ones Daniel Weck listed as related).

Quick fix: use vh for max-height, it’s like % but the reference is the viewport (and not the parent element). RMSDK doesn’t support max-height anyway so it won’t take this style into account.

Longer fix: set an height for both html and body (and <section> or <figure> or <div> if the image is nested in those ones). When % is applied to height, it depends on the parent element so if the parent element doesn’t have an explicit height, a % can’t be computed.

Say if you have

<html>
<body>
  <section>
    <figure>
      <img />
    </figure>
  </section>
</body>
</html>

then, html, body, section and figure must have an explicit height in your CSS. Last time I tried this in Readium, it worked as expected but maybe you did set an height for those parent elements?

Also, auto is not a valid value for max-width. You should use 100% there (and none when you want to reset a max-width).

artbyrt commented 6 years ago

I did finally solve this... however, I still don't understand the way the rules work on images. An image of a fixed size is inside a parent that has a variable size and is able/not able to contain the image and show it as a whole... what is the best way to manage this– especially if the parent is a page showing a full screen-page of a graphic novel? Any links to discussion on this would be truly useful to the work I'm doing at present.

JayPanoz commented 6 years ago

An image of a fixed size

What do you mean? It has width and/or height attributes? Or CSS with width/height in px values?

inside a parent that has a variable size

I assume this is width/height in % or vh, right?

% is cascading i.e. if height isn’t explicitly set for all its parents (in your CSS), the value can’t be computed.

vh depends on the viewport. If your figure is 200px and your image is 95vh, the latter value wins (it’s 95% of the window’s or page’s size).

is able/not able to contain the image and show it as a whole...

Depends on the values you’re using and the image’s aspect ratio.

If say you’re sizing a portrait image based on its width while the screen has a landscape ratio, then your image won’t be entirely displayed on the screen, it will overflow.

a page showing a full screen-page of a graphic novel?

You’re probably better off using something like what we’re using as a safeguard.

Won’t work in the older versions of RMSDK though, as it doesn’t support max-height and vh. As for object-fit, Microsoft’s rendering engines don’t support them (impacts ADE 4.5 on Windows).

There is really no perfect way to deal with that everywhere, which is why we have designed those safeguards when pagination is set (by the user). We have interop with iBooks so if it works in iBooks, it will work in Readium 2. That's the max we can do in Readium CSS though; should you have other issues, please feel free to file them in the Readium-shared-js repo and ping me so that I can provide a CSS fix there.

artbyrt commented 6 years ago

Here is the issue that I've come across (sorry, have not yet tested with the 'safeguard' styles you recommend.. will do that next). But, I don't see this issue in the repo (although, there is a lot there and I haven't read all of it) Using: body{ height: 100%; } section.coverImgWrap { margin: 0; padding: 0; overflow: hidden; } p.cover figure.coverImg{ object-fit: contain; box-sizing: content-box; height: calc(100vh - 5px); } img.frame-1{ border: 2px solid #5D6365; page-break-inside: avoid; height: 95vh; } as a separate CSS for cover page... I get performance good on Readium page settings 'auto' and 'page' but very strange behaviour on 'continuous' ... image appears as a thumbnail, then progressively disappears. When you said 'explicit height' on html or body... do you mean px?

JayPanoz commented 6 years ago

Ah OK I see, let me file this bug on the Readium-shared-js repo, encountered it as some point but I didn’t find time to report it on github. Thanks for the accidental reminder, I’ll update this issue to point to the Readium 1 issue.

artbyrt commented 6 years ago

Behaviour exists even with 'safeguards'. Just tested. But, on the good side: Readium is getting better and better. When I first started my research 2 years ago, it failed to show 'audio' or 'video'. Big advances in 2 years!!

JayPanoz commented 6 years ago

Yeah, the Readium you’re using to test your files doesn’t use Readium CSS at all, which is why I reported this issue on the other repo. You can add details there if needed: https://github.com/readium/readium-shared-js/issues/402

FYI we’ll ship a proto next week but it doesn’t mean you’ll be able to access Readium CSS: we’ll just push stylesheets and docs on the master branch so that everyone (RS developers) can review and test them. Practical implementations will come later, probably in 2018. I’ll try to make that clear in the ReadMe, so that we can deal with issues’ scope more easily.

JayPanoz commented 6 years ago

Closing the issue as this is not related to the Readium CSS project.