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.

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

Add a writing-mode use case #63

Open
huijing opened this Issue Dec 4, 2017 · 3 comments

Comments

Projects
None yet
3 participants
@huijing

huijing commented Dec 4, 2017

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

This comment has been minimized.

Show comment
Hide comment
@eeeps

eeeps Dec 4, 2017

+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?

eeeps commented Dec 4, 2017

+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

This comment has been minimized.

Show comment
Hide comment
@huijing

huijing Dec 5, 2017

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

huijing commented Dec 5, 2017

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

@yoavweiss

This comment has been minimized.

Show comment
Hide comment
@yoavweiss

yoavweiss Apr 11, 2018

Member

@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?

Member

yoavweiss commented Apr 11, 2018

@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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment