Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

readium cover image split across 2 pages #10

Closed
artbyrt opened this issue Aug 15, 2017 · 8 comments
Closed

readium cover image split across 2 pages #10

artbyrt opened this issue Aug 15, 2017 · 8 comments
Labels
out-scoped

Comments

@artbyrt
Copy link

artbyrt commented Aug 15, 2017

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
Copy link
Collaborator

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
Copy link
Author

artbyrt commented Aug 16, 2017

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
Copy link
Collaborator

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
Copy link
Author

artbyrt commented Aug 19, 2017 •
edited
Loading

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
Copy link
Collaborator

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
Copy link
Author

artbyrt commented Aug 19, 2017

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 JayPanoz mentioned this issue Aug 19, 2017
Open
@JayPanoz
Copy link
Collaborator

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: readium/readium-shared-js#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
Copy link
Collaborator

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

@danielweck danielweck mentioned this issue Dec 4, 2018
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
out-scoped
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@JayPanoz @artbyrt