Re: [csswg-drafts] Proposing new CSS primitives to enable great web experiences on foldable & dual-screen devices (#4736)

> `fold-top`, `fold-left`, `fold-width` and `fold-height`.

It would feel very unCSSy to not have respective _bottom_ and _right_ fold positions as well.

________

Overall, this issue raises some important points on design constraints, but the actual representation thereof in CSS, MQ or environment variables requires some additional thinking.

Some display mosaics simply represent a fixed segmentation of a common shared planar surface (i. e. the _viewport_), like an infinite virtual _wall_. The static edge width around each screen (and thus between any two neighboring screens) may vary, often approaching zero for a seamless appearance, and are important to consider in layout because the _wall_ may either be split at these _frames_ or be covered virtually by the physical _bezels_, i. e. continue invisibly beneath them.
In some cases, like a detachable mobile second screen that extends the desktop plane, the distance and relative (planar and even spatial) location is even variable. 
In other cases, the _wall_ (or its displayed projection, i. e. the _viewport_) slants by a fixed-angle _bracket_ <!--gusset--> or by a variable-angle _hinge_ at the _joint_, where the latter becomes a _fold_ if only 0° and 180° are stable positions. When this _knee_ is smoothed out and hence seamless, it is a _bend_, otherwise a sharp _kink_. (All terms up to bikeshedding by native speakers of course.) 

For the simplicity of a first level, we may assume that the gutter between all segments is the same and distributed evenly, except we would distinguish horizontal from vertical ones. 

We should also note that the classic spread of left and right pages in a printed book or magazine is conceptionally very similar to two adjacent screens. They can also be more complex, e. g. in centerfolds. If media can be folded completely at a joint, the distinction between recto and verso or front and back also becomes important. 

## Media Queries

- `segmentation-x` or `horizontal-segments`: maximum number of horizontal viewport segments spanned 
- `segmentation-y` or `vertical-segments`: maximum number of vertical viewport segments spanned 
- `segmentation`: `none | vertical | horizontal | both`
- `segmentation-gutter[-x|-y]?`: `seam | frame | bezel`
- `segmentation-joint[-x|-y]?`: `flat | bend | bracket | hinge | fold`

## Environment variables

- `env(vertical-seam-width)`
- `env(horizontal-seam-width)`
- `env(vertical-seam-angle)`
- `env(horizontal-seam-angle)`

Desktop setups with multiple screens would often have angles between 0° and 45° with 
A cubic cave, with (up to four) walls, optional floor and ceiling, would usually have zero-length seam widths and right seam angles.

For curved surfaces (and spheric caves, i. e. physical rooms, or virtual rooms around the user), we might want something similar:

- `env(bend-radius)`
- `env(horizontal-bend-radius)`
- `env(vertical-bend-radius)`


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

Received on Saturday, 8 February 2020 16:23:02 UTC