Additional env vars (MicrosoftEdge#243)

* added 2 additional env vars * added an example for LTR and RTL * added an example for LTR and RTL * updated colored boxes example
siliu1 · Mar 25, 2020 · a26ba9c · a26ba9c
1 parent 79295f1
commit a26ba9c
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 4 deletions.
diff --git a/Foldables/explainer.md b/Foldables/explainer.md
@@ -88,7 +88,7 @@ This value describes the state of when the browser window is not in spanning mod
 
 ![predefined environment variables](css-env-variables.svg)
 
-We propose the addition of 4 pre-defined CSS environment variables `fold-top`, `fold-left`, `fold-width`, `fold-height`. Web developers can utilize those variables to calculate each screen segment size at both landscape and portrait orientations. While the spanning media query guarantees there is only a single hinge and two screen segments, developers must not take a dependency that each screen segment is 50% of the viewport height or width, as that is not always the case (see above example of `single-fold-horizontal` where portions of the top display are consumed by browser UI).
+We propose the addition of 6 pre-defined CSS environment variables `fold-top`, `fold-right`, `fold-bottom`, `fold-left`, `fold-width`, `fold-height`. Web developers can utilize those variables to calculate each screen segment size at both landscape and portrait orientations. While the spanning media query guarantees there is only a single hinge and two screen segments, developers must not take a dependency that each screen segment is 50% of the viewport height or width, as that is not always the case (see above example of `single-fold-horizontal` where portions of the top display are consumed by browser UI).
 
 The values of these variables are CSS pixels, and are relative to the layout viewport (i.e. are in the [client coordinates, as defined by CSSOM Views](https://drafts.csswg.org/cssom-view/#dom-mouseevent-clientx)). When evaluated when not in one of the spanning states, these values will be treated as if they don't exist, and use the fallback value as passed to the `env()` function.
 
@@ -220,9 +220,9 @@ Box 1 `.blue` and Box 4 `.green` have a *width* and *height* of *100px*, however
 
 	.yellow {
 		height: 100px;
-		width: calc(100vw - env(fold-left) + env(fold-width));
+		width: calc(100vw - env(fold-right));
 		position: absolute;
-		left: calc(env(fold-left) + env(fold-width) );
+		left: env(fold-right);
 		top: 0;
 	}
 
@@ -238,12 +238,27 @@ Box 1 `.blue` and Box 4 `.green` have a *width* and *height* of *100px*, however
 		height: 100px;
 		width: 100px;
 		position: absolute;
-		left: calc(env(fold-left) + env(fold-width));
+		left: env(fold-right);
 		bottom: 0;
 	}
 }
 ```
 
+#### LTR and RTL Layout Example
+![Yelow flex column being hinge aware in both LTR and RTL writing modes](ltr-rtl.svg)
+
+#### CSS solution outline:
+
+```css
+[dir="ltr"] .col {
+   flex: 0 0 env(fold-left);
+}
+
+[dir="rtl"] .col {
+   flex: 0 0 env(fold-right);
+}
+```
+
 ## Additional Links
 
 - [CSS Spanning media feature polyfill & example](https://github.com/zouhir/spanning-css-polyfill)