search

w3c / publ-cg

EPUB 3 Community Group Repository
Other
44 stars 16 forks source link

Complex image handling best practices #39

Open RachelComerford opened 6 years ago

RachelComerford commented 6 years ago

From BISG survey

JayPanoz commented 6 years ago

Does complex image means image grids, full-bleed, etc.?

RachelComerford commented 6 years ago

@JayPanoz in answer to your question:

"I’m just referring to the age-old question of handling portrait images in a wide variety of aspect ratios with a best practices approach that will: ▪ provide “high enough” resolution for zooming ▪ (generally) scale to fit in a page view along with a (short or long) caption ▪ meet A11y standards ▪ work across devices

I’ve been chasing this for a long time, and have a semi-working solution, although it’s far from perfect. I’ve seen Jimmy’s wonderful demos; they are awesome (Hi, Jiminy). They also have a lot of moving parts and are complex.

But because this is for a best practices context, what are clear and direct best practices we can provide ebook producers for image handling that provides a good reader experience and meets requirements? If media queries or “progressive enhancement” with fallbacks are included, then we need to offer some practical step-through, because this is anything but clear and easy. And what works across devices is really going to be the driving element, I believe."

JayPanoz commented 6 years ago

Mmmkay so first, the bad news: I wouldn’t rule out landscape/square images either as they can find themselves in a tough spot in some configs i.e. one-page + large line-length/width + landscape orientation, in which they can overflow if there’s no max-height set – BTW this is something quite a significant number of Reading Apps end up doing as an override/safeguard so that it can’t happen.

I would also probably divide best practices into 2:

  1. without figcaption
    • global advice
    • landscape/square-specific
    • portrait-specific
  2. with figcaption
    • global advice
    • landscape/square-specific
    • portrait-specific

That’s a simplistic outline, obviously, just recording my thoughts there, as something else could well make more sense.

The backbone would probably be what RS have been doing: setting a max-width and max-height for all images, and using object-fit: contain (MDN doc). We obviously can’t rely on polyfills for EPUB so this is a non-option for RSs that don’t support it. This can only solve the “without figcaption” cases when it’s supported though.

Then I’m open to suggestions/opinions/etc.

I’ve been personally working on this for the last 3 years, did extensive prototypes and experiments, and don’t consider that all the issues are – or even can be – solved to be honest. Needless to say, fresh perspectives are consequently greatly welcome.