Added the first proposal for a 'environment-blending' keyword.

[rcabanier]

This is a proposal to add the ability to detect the display environment.
We've heard from several authors that they want to use a different style for an immersive display and they currently can't do that without invoking script.

With this simple media feature they can adjust their pages for an AR and VR display.

Hopefully this PR can start a good discussion!

[frivoal]

nitpick: that isn't a valid value of font-weight. from the spec:

Only values greater than or equal to 1, and less than or equal to 1000, are valid, and all other values are treated as parse errors.

[frivoal]

None of these values are falsy. I suspect you might want mixed and virtual to be truthy, and 2d to be falsy, so maybe something like:

vr: none | mixed | full

[rcabanier]

I think it depends.
I don't think "full" is a good term since VR is limited compared to AR

[blairmacintyre]

Over in the WebXR group, when we migrated from WebVR, we went with XR vs MR or AR or because these terms have been muddled up by competing marketing departments. "Mixed Reality" is used in different ways by different companies (eg. Microsoft, MagicLeap, Meta, etc use AR, VR and MR to mean different things). We settled on XR because it was the only term left that was all-encompassing of the "various kinds of reality". So, can I suggest "xr:" as the property name, since it's going to be the name of that standard, and javascript devs will access it through navigator.xr?

[frivoal]

reality doesn't seem to work for me out of context. When paired with virtual, then it is clear what this is about, but otherwise, saying "we now have a media query to test reality" just sounds weird.

[rcabanier]

There's mixed reality and virtual reality. I'm unsure what 2D should be. "None"?

[kearwood]

I imagine that two decisions need to be made by 2d content running in a VR or mixed reality display:

• Is the browser content the primary focus of the user, possibly occupying a large portion of the user's field of view? .. Or is it a secondary activity to the user's interaction in the virtual or real world (eg. displayed on a virtual tablet within a VR environment or placed in a smaller region of the user's vision off to the side).
• Is the display capable of rendering dark colors over a bright background? Some displays are optically transparent and can only add additional light to the environment. In this case, black is invisible / fully transparent and bright colors always have the most contrast.

Perhaps two separate keywords could make this more expressive:

environment-blending:
opaque - The 2d content is fully opaque and able to render dark colors in a bright environment. Examples: Traditional 2d monitors, tablets, phones, VR headsets that are not optically transparent, AR devices that use a pass-through camera feed.
additive - The web content is blended with the real world with additive mixing. Black is fully transparent and bright colors have the most contrast. Examples: Windshield head's-up-display, optically transparent displays such as the Microsoft Hololens and Meta2.
subtractive - The web content is blended with the real world using subtractive mixing. White is fully transparent and dark colors have the most contrast. Examples: An LCD display embedded in a bathroom mirror.

reality
2D - Viewed on a traditional 2d display / monitor / tablet / phone..
mixed - Viewed in a AR/MR environment where the real world is visible behind the web content, either through an optically transparent display or a composited camera feed. In a "mixed" reality, even when focused, the content may not want to distract the user from their surroundings and is often a secondary activity.
virtual - Viewed in a VR environment where the user's view to the real world is obscured. When focused, the content is expected to be the primary activity.

[rcabanier]

@kearwood @blairmacintyre I think I will abandon this PR. As @AmeliaBR noted, our issue is with the display being transparent and not with running in an immersive environment.

environment-blending:
opaque - The 2d content is fully opaque and able to render dark colors in a bright environment. Examples: Traditional 2d monitors, tablets, phones, VR headsets that are not optically transparent, AR devices that use a pass-through camera feed.
additive - The web content is blended with the real world with additive mixing. Black is fully transparent and bright colors have the most contrast. Examples: Windshield head's-up-display, optically transparent displays such as the Microsoft Hololens and Meta2.
subtractive - The web content is blended with the real world using subtractive mixing. White is fully transparent and dark colors have the most contrast. Examples: An LCD display embedded in a bathroom mirror.

I have not seen subtractive blending. Do you think there are implementers for this feature? If not, we shouldn't put it in since the spec can't go to CR.

[frivoal]

I like the environment-blending suggestion. As for subtractive, we can always mark it at risk.

[rcabanier]

Does anyone have objections to environment-blending?
If not, maybe we can put it on the agenda.

[rcabanier]

@frivoal I updated the PR with the suggested changes. Can we put this on an agenda for the CSS WG?

[fantasai]

s/reality/environment-blending/

[rcabanier]

done

[fantasai]

The first sentence should be eliminated -- this also applies to e.g. print media and e-ink.

We don't talk about web pages, since CSS applies to things that aren't on the Web, so s/web//.
“interact” is a very generic word -- what does it mean to interact? If the meaning is that the display is opaque, then make that the definition. Otherwise I have to decide if having an automatic light sensor adjust the screen brightness is considered “interaction with the environment”. Maybe something like “The canvas is opaque and does not blend with other objects in the (real or virtual) environment in which it is rendered.” ?

Also, please break your text across lines. It helps the diffs (both readability, and also less diff churn and easier to see what changed as we edit the specs). See http://rhodesmill.org/brandon/2012/one-sentence-per-line/

[fantasai]

s/web content/canvas/

The canvas could be blended with a virtual world instead of the real world, so you need to adjust this description to make sure that case is handled as well.

Ditto for subtractive.

[rcabanier]

The display itself always blends with the real world.
A VR device typically acts like a regular monitor so there's no need for an author to restyle for an additive display

[blairmacintyre]

This sounds good to me!

[rcabanier]

@fantasai what do you think of these latest changes?

[frivoal]

Also: paper.

Suggestion: The document is rendered on an opaque medium, such as a traditional monitor or paper.

[rcabanier]

@frivoal done!

[fantasai]

@rcabanier You ignored my second comment entirely, and I don't think you understood the third one, which was about e.g. displaying the web page as a billboard or virtual screen in a virtual world which is itself opaque but could render the web page on a (virtually) non-opaque canvas.

[rcabanier]

@fantasai I didn't ignore your comment. I removed references to "web", put sentences on separate line, etc. What did I miss?

which was about e.g. displaying the web page as a billboard or virtual screen in a virtual world which is itself opaque but could render the web page on a (virtually) non-opaque canvas.

I think this is a different feature. In a VR world, web pages will likely behave in an opaque manner and colors will be composited with regular source-over.
If in such an environment, the browser should behave like an AR device (with additive compositing), the creator of the VR OS could mark the compositing of the browser as additive and set "environment-blending" to "additive"

[rcabanier]

@fantasai what do you think?

[css-meeting-bot]

The Working Group just discussed Add 'environment-blending' keyword, and agreed to the following:

• RESOLVED: Add environment-blending to MQ5

The full IRC log of that discussion

<dael> Topic: Add 'environment-blending' keyword
<dael> github: https://github.com//pull/2719
<dael> cabanier: Hi everyone! I work for Magic Leap and we do an AR headset and we're doing a web browser for that. One of the things in our headset is it's additive. A lot of websites aren't as pleasing to the eye as can be. Bright white background with small text is hard to read. People tend to switch styles. Some people use scripts to change the site and we want them to use MQ to design pages for display technologies.
<dael> cabanier: Originally we called the property reality, but it's for other tech so we came up with environment-blending name. I think fantasai had concerns about virtual reality.
<dael> fantasai: I had a handful of comments on how spec was written. There was a comment on how opaque vs additive...additive was if you're blending with real world but you could belnd the canvas of page with virtual world as well so I was saying description should be adjusted.
<dael> cabanier: So it doesn't need to be real world...real or vitural...like your desktop event
<dael> fantasai: Yeah
<dael> cabanier: Okay. I think we can do that.
<dael> florian: In principle I support. Need to expore details. One thing I was wondering about, if it falls under something desribed...something like an overhead projector slide with a default transparent background.
<fantasai> s/was written/was written, but aside from that../
<dael> cabanier: Like an additive display but you could also add darkness.
<dael> florian: I guess. opaque but default transparent
<fantasai> s/how opaque vs additive...a/opaque vs additive. A/
<dael> cabanier: Yes. I think maybe could add later. Webpages are defined opaque by default and you'd have to change that.
<dael> florian: I didn't want to dive into details, but in wording of options and list of options...we'll need to iterate. MQ5 is fairly speculative to I have no issue adding it there and working with it.
<dael> cabanier: And as I mentioned on PR is you want to see what we're trying to do we have videos on our home page of the things we want to do.
<dael> cabanier: I'll update wording to say real or another virtual
<dael> Rossen_: Sounds good. Sounds like neat feature.
<dael> Rossen_: I'm hearing support to proceeding forward.
<dael> Rossen_: Any other questions/opinions to Rik or should we resolve to continue this in MQ5?
<dael> RESOLVED: Add environment-blending to MQ5

[fantasai]

@cabanier Current text looks fine. :)

[NellWaliczek]

What was the conclusion regarding the "subtractive" option? Was there a specific hardware form factor in existence today that would set this value?