Skip to content

Commit 8f431e2

Browse files
davidsgrogandavidsgrogan
committed
add page that shows difference between using font-size and text-size-adjust with the env var
1 parent 9eac702 commit 8f431e2

1 file changed

Lines changed: 151 additions & 0 deletions

File tree

‎tsa.html‎

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
<!doctype html>
2+
<meta name="viewport" content="width=device-width, initial-scale=1" />
3+
4+
<style>
5+
:root {
6+
--mittens: env(preferred-text-scale);
7+
/* Disable the autosizer */
8+
text-size-adjust: none;
9+
}
10+
11+
#safe-area::after {
12+
content: "env(preferred-text-scale): " var(--x-text);
13+
color: blue;
14+
}
15+
16+
#scaled-text {
17+
text-size-adjust: calc(100% * env(preferred-text-scale));
18+
}
19+
20+
#scaled-text-font-size {
21+
font-size: calc(16px * env(preferred-text-scale));
22+
}
23+
24+
</style>
25+
26+
<script>
27+
const mittens = getComputedStyle(document.documentElement).getPropertyValue('--mittens');
28+
document.documentElement.style.setProperty('--x-text', JSON.stringify(mittens));
29+
console.log('preferred-text-scale:', mittens);
30+
31+
/**
32+
* Retrieves the computed values of specified CSS env() variables.
33+
*
34+
* @param {string[]} envVarNames An array of env() variable names (e.g., 'safe-area-inset-top').
35+
* @returns {Object} An object where keys are the env() variable names and values are their computed string values.
36+
*/
37+
function getCssEnvVariableValues(envVarNames) {
38+
const results = {};
39+
if (!document.body) {
40+
console.error("Cannot get env() values: document.body is not yet available.");
41+
return results;
42+
}
43+
44+
const tempElement = document.createElement('div');
45+
46+
// Style to make it non-intrusive and ensure it's part of the layout tree for getComputedStyle
47+
tempElement.style.position = 'absolute';
48+
tempElement.style.visibility = 'hidden';
49+
tempElement.style.width = '1px'; // Needs some dimension to be computed
50+
tempElement.style.height = '1px';
51+
tempElement.style.top = '-100px'; // Move off-screen
52+
tempElement.style.left = '-100px';
53+
54+
document.body.appendChild(tempElement);
55+
56+
// It's good practice to get computedStyle once if possible,
57+
// but styles are set iteratively, so we get it after setting all properties
58+
// OR get it inside the loop if setting one property might affect others (not typical for this case).
59+
// For simplicity and clarity, we'll set all properties first, then read.
60+
61+
const tempPropToEnvVarMap = {};
62+
63+
for (const varName of envVarNames) {
64+
// Create a unique temporary CSS custom property name
65+
const tempCustomPropName = `--temp-env-${varName.replace(/[^a-zA-Z0-9-]/g, '_')}`;
66+
tempPropToEnvVarMap[tempCustomPropName] = varName;
67+
68+
// Set the custom property using the env() variable with a fallback.
69+
// The fallback (e.g., '0px') is important:
70+
// 1. If env(varName) is not supported/set, the custom property gets the fallback value.
71+
// 2. This makes getComputedStyle().getPropertyValue() return the fallback,
72+
// instead of an empty string or an unresolvable value.
73+
tempElement.style.setProperty(tempCustomPropName, `env(${varName}, 5)`);
74+
}
75+
76+
const computedStyle = window.getComputedStyle(tempElement);
77+
78+
for (const tempCustomPropName in tempPropToEnvVarMap) {
79+
if (Object.prototype.hasOwnProperty.call(tempPropToEnvVarMap, tempCustomPropName)) {
80+
const originalVarName = tempPropToEnvVarMap[tempCustomPropName];
81+
const value = computedStyle.getPropertyValue(tempCustomPropName).trim();
82+
results[originalVarName] = value;
83+
}
84+
}
85+
86+
document.body.removeChild(tempElement);
87+
return results;
88+
}
89+
90+
// --- How to use it ---
91+
92+
// Define a list of common/known env() variables you want to check.
93+
// You cannot get "all" env() variables because there's no API to list them.
94+
// You must specify the ones you're interested in.
95+
const knownEnvVariables = [
96+
// Safe area insets (for notches, rounded corners, etc.)
97+
'safe-area-inset-top',
98+
'safe-area-inset-right',
99+
'safe-area-inset-bottom',
100+
'safe-area-inset-left',
101+
102+
// PWA window controls overlay (title bar geometry)
103+
// These are relevant when display_override: ["window-controls-overlay"] is in manifest
104+
'titlebar-area-x',
105+
'titlebar-area-y',
106+
'titlebar-area-width',
107+
'titlebar-area-height',
108+
109+
// Experimental: Virtual keyboard insets (support varies)
110+
'keyboard-inset-top',
111+
'keyboard-inset-right',
112+
'keyboard-inset-bottom',
113+
'keyboard-inset-left',
114+
'keyboard-inset-width',
115+
'keyboard-inset-height',
116+
117+
'preferred-text-scale',
118+
119+
// A non-existent one to see the fallback in action
120+
'my-custom-nonexistent-env-variable'
121+
];
122+
123+
// Get the values (ensure this runs after the DOM is ready, or at least document.body is available)
124+
// For example, call this inside a DOMContentLoaded listener or at the end of your body.
125+
document.addEventListener('DOMContentLoaded', () => {
126+
const envValues = getCssEnvVariableValues(knownEnvVariables);
127+
128+
console.log("--- CSS env() Variable Values ---");
129+
if (Object.keys(envValues).length === 0 && knownEnvVariables.length > 0) {
130+
console.log("Could not retrieve env() values. Ensure document.body was available.");
131+
} else {
132+
for (const [key, value] of Object.entries(envValues)) {
133+
// The value will be the actual env() value if set, or '0px' (the fallback we used) otherwise.
134+
console.log(`env(${key}): ${value}`);
135+
}
136+
}
137+
console.log("-------------------------------");
138+
console.log("Full results object:", envValues);
139+
});
140+
141+
</script>
142+
143+
This is normal text.
144+
145+
<p id="safe-area"></p>
146+
<p id="scaled-text">
147+
This text should be env scaled via text-size-adjust.
148+
</p>
149+
<p id="scaled-text-font-size">
150+
This text should be env scaled via font-size.
151+
</p>

0 commit comments

Comments
 (0)