Re: [csswg-drafts] [resize-observer-1] physical, rather than logical, dimensions – for images (#4005)

So, my original use case was using ResizeObserver in order to load responsive images without `sizes`, ASAP after layout. [Like this](https://ericportis.com/etc/resize-observer-for-responsive-images/) (view source).

That example uses the ResizeObserver v1 syntax (`.contentRect.width`+`.height`), assumes that images are extrinsically-constrained on `width`, and is not responsive to any changes after the initial layout. As soon as an `<img>` gets a `width` > 0, it says, "hey! this (still `src`-less) `<img>` has been laid out!" and inserts a `src` pointing to a resource that's a good fit for the observed, laid-out width.

After I sketched out this demo, I started wondering (probably [inspired by](https://www.chenhuijing.com/blog/vertical-typesetting-revisited/) @huijing) how all of this would work with the ROv2 syntax, and without making any assumptions about writing modes, and thought – wait – maybe it can't?

[Here's an example page](https://ericportis.com/etc/writing-mode-and-images) that swaps `writing-mode`s at a breakpoint. With the either the v1 or v2 syntax, the listening-for-layout could be made robust to arbitrary writing-modes (and layouts!) by listening for both dimensions (inline and block), instead of just one, as my demo does. But when feeding the layout dimensions to an image CDN (or a `sizes` attribute, if https://github.com/whatwg/html/issues/2973 ever gets resolved), you need to know which *physical* dimension you're dealing with: a height or a width. Knowing the block or inline size of the box doesn't help you (without also knowing the element's writing mode, which, I think, would require a `.getComputedStyle`, which [again I think] defeats some of the performance reasons for using ResizeObserver in the first place).

The art-directed hero image in the example suggests another interesting case. It's possible that an art-directed image could go from being, say, 1500w × 500h, to 500w × 1500h, at the breakpoint where the writing mode changes, and its inline and block sizes would remain unchanged. But clearly, anyone interested in the size of the image for any reason would want to know that such a drastic change had occurred.

-- 
GitHub Notification of comment by eeeps
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4005#issuecomment-606335410 using your GitHub account

Received on Tuesday, 31 March 2020 01:06:23 UTC