Add a writing-mode use case

[huijing]

In the event that the writing-mode of a container or the document changes from horizontal to vertical, it would be helpful if there was a media query for writing-mode such that an image of a different orientation could be served up with the srcset attribute.

Currently, it is possible to adjust orientation using transform: rotate(-90deg) but a rotated image could end up overflowing the container especially if it is anything other than a square. For live example, please see demo.

Uncheck the toggle to go into horizontal mode and scroll down to the fourth image in the article. When the viewport is narrower than the width, there is a horizontal overflow, because this image was rotated.

Not sure how feasible it is to implement such a feature, but it would be a nice to have.

[eeeps]

+1 to this being an enormous unsolved use case.

I'm (very) new to writing modes, but because HTML <bdo> & dir, and the CSS direction property, can all exist on any DOM subtree, and not just the whole document – I think this would require some sort of element or container query?

Container queries are a big blocker. Is there any chance that this use case could be more easily solved with h descriptors?

[huijing]

I don't think so, because the orientation of the content is independent of the height of the viewport.

[yoavweiss]

@huijing - can you elaborate on why height descriptors won't help here?

I understand that orientation is not related to the viewport height, but if you have a certain image inside an vertically oriented container, can't the browser pick the right variant there based on the viewport height?

If not, is it possible for you to share an example that would help us better understand why not?