[css-orientation] - Missing squared orientation

[StfBauer]

According to the CSS specification only portrait and landscape exist in the following definition

portrait The orientation media feature is portrait when the value of the height media feature is greater than or equal to the value of the width media feature. landscape Otherwise orientation is landscape.

In case the height and width are equal it will become 'portrait', which is not correct and could even cause issues IMO.

When media queries used together with aspect ratios for example.

@media screen and (orientation: landscape){
    .imageelement{
        aspect-ratio: 16 / 9;
    }
}

@media screen and (orientation: portrait){
    .imageelement{
        aspect-ratio: 9 / 16;
    }
}

So the image on a squared screen will then have an aspect ratio of 9:16.

The correct or more appropriate handling of this situation would be to have a media query that has orientation squared.

@media screen and (orientation: squared){
    .imageelement{
        aspect-ratio: 1 / 1;
    }
}

The case that the screen is perfectly squared is pretty unlikely to happen but I might could happen and then the aspect ratio of images of iframe might look off.

Another option would be if we could compare height and width of the window in a media query somehow.

[tabatkins]

How common is it that you encounter a square window? I assume that, practically speaking, this more or less never happens - do you have evidence to the contrary?

I assume also that if you wanted to handle this sort of thing, you'd also want to handle it when you're near square, rather than solely at the precise point where they're balanced. This probably wants some JS then, attached to a resize listener on window, so you can choose the ratio that suits you. (We could perhaps do it with orientation also becoming a range query, so you could say orientation < 1.1 / 1 or something, if necessary.)

[StfBauer]

@tabatkins range query would be great because you might never know what devices come out in the future. Maybe a display would be split into half screen. Which then would be a squared.

Landscape: predefined (16 / 9 - just an example) Portrait: predefined (9 / 16 - just an example) Others: custom range

[tabatkins]

Sorry, the first part of my comment was actually the more important one; the latter was just me musing.

How often do you encounter a square device? Has the current treatment of that case as being "portrait" caused problems for your users? Could you give an example of a page where the "portrait" and "landscape" styles cause a troublesome rendering when the page is square? Is this just a problem when it's exactly square, or is there a range of near-square ratios that are similarly problematic? If the latter, are all your near-square ratios handled with the same styles, or do you adapt it in a more complex way to respond to the exact ratio?

[Crissov]

I regularly split a 16:9 screen into two windows – I’m probably not alone with that since even Microsoft’s windows manager makes this easy for users (Windows key plus horizontal arrow key). Ignoring chrome, both windows accordingly have an aspect ratio of 8:9 ≈ 0.89. That’s more than 10% off, so would that be considered square, squarish or portrait?

PS: What if I do the same on a 16:10 or a “21:9” (really 64:27 or 24:10) screen? Is an aspect ratio range from 0.8 through 1.2 inclusive a good one for squarish?

[StfBauer]

@Crissov Would help when we get quasi rid of misleading orientation and more towards a screen aspect ratio, i think.

[tabatkins]

Heya @StfBauer, would you mind answering the questions in https://github.com/w3c/csswg-drafts/issues/7210#issuecomment-1100235218? Without these we can't evaluate whether this would be worthwhile.

[StfBauer]

@tabatkins sorry for getting not back to use. As it turns out, a better way has already worked in CSS for a long time. This is done by using media query against the aspect ratio.

// Portrait
@media screen and (max-aspect-ratio: 1/1) {
    body {
        background-color: magenta;
    }
}
// Landscape 
@media screen and (min-aspect-ratio: 1/1) {
    body {
        background-color: lime;
    }
}
// Squared
@media screen and (aspect-ratio: 1/1) {
    body {
        background-color: yellow;
    }
}

It gives you way better control over your design than just knowing Portrait and Landspace. Thanks for your support.

There are only some technical questions to this. Why is aspect-ratio ranged while orientation is discrete? Why is one based on height (orientation) and the other based on width (aspect ratio)?

I get the thought process of it but wouldn't it be optimal when both are based on height or width, when I don't really see in the end result any difference?