font-display Swap Block Fallback Shift Metric
Audit measured fallback/webfont width differences and arrival against caller display block/swap windows; modeled visibility only, not a browser-timing guarantee or a real CLS score.
Description
Font-display timing and measured fallback differences jointly determine a modeled visible swap.
Font-display timing and measured fallback differences jointly determine a modeled visible swap. Caller windows differ from browser implementation behavior.1
Enter aligned nonempty nonnegative fallback/web widths and nonnegative timing windows. Return signed widths and all three timing flags.
When to use font-display Swap Block Fallback Shift Metric
Use font-display Swap Block Fallback Shift Metric when you need to evaluate the supplied records under the calculation and evidence rules below. No browser loading trace, guaranteed visibility or CLS score is produced.
Prepare measured font or typeset-layout values and the explicit design policy requested. For text or font bytes, use the supported syntax explained below.
How to use font-display Swap Block Fallback Shift Metric and understand its results
- Prepare measured font or typeset-layout values and the explicit design policy requested. For text or font bytes, use the supported syntax explained below.
- Enter fallbackMeasuredTextWidthsPx, webfontMeasuredTextWidthsPx, fontSwapAtSeconds, callerBlockWindowSeconds, callerSwapWindowSeconds using the field table and calculation rules, then run the tool.
- Read signedPostSwapWidthChangesPx, fontArrivedInBlockWindow, fontArrivedBeforeSwapWindowEnd, visibleFallbackSwapExpectedUnderPolicy. The explanation below defines the units, signs, ordering and any flags or placeholder values.
- If the tool reports an input issue, correct the values and run it again. Apply the stated assumptions when interpreting a successfully returned result.
| Input field | Meaning | Value type; see rules below | Requirement |
|---|---|---|---|
| fallbackMeasuredTextWidthsPx | Fallback measured text widths px | list of number | Required |
| webfontMeasuredTextWidthsPx | Webfont measured text widths px | list of number | Required |
| fontSwapAtSeconds | Font swap at seconds | number | Required |
| callerBlockWindowSeconds | Caller block window seconds | number | Required |
| callerSwapWindowSeconds | Caller swap window seconds | number | Required |
Enter aligned nonempty nonnegative fallback/web widths and nonnegative timing windows. Return signed widths and all three timing flags.
block=arrival≤blockWindow; beforeEnd=arrival≤blockWindow+swapWindow; visible=!block AND beforeEnd Units, indexing, boundary conditions and exceptional cases are defined in the calculation rules above.
| Output field | Meaning | Value type |
|---|---|---|
| signedPostSwapWidthChangesPx | Signed post swap width changes px | list of number |
| fontArrivedInBlockWindow | Font arrived in block window | boolean |
| fontArrivedBeforeSwapWindowEnd | Font arrived before swap window end | boolean |
| visibleFallbackSwapExpectedUnderPolicy | Visible fallback swap expected under policy | boolean |
{
"input": {
"fallbackMeasuredTextWidthsPx": [
100,
200
],
"webfontMeasuredTextWidthsPx": [
110,
180
],
"fontSwapAtSeconds": 2,
"callerBlockWindowSeconds": 3,
"callerSwapWindowSeconds": 2
},
"output": {
"signedPostSwapWidthChangesPx": [
10,
-20
],
"fontArrivedInBlockWindow": true,
"fontArrivedBeforeSwapWindowEnd": true,
"visibleFallbackSwapExpectedUnderPolicy": false
}
}Limitations and assumptions
No browser loading trace, guaranteed visibility or CLS score is produced.
Numeric inputs, where present, must be finite. Follow the calculation-specific rules for overflow, underflow and exceptional cases. Numeric lists are limited to 10,000 entries; string lists to 128 strings of at most 128 characters each. The rules above may impose smaller limits. Missing required fields, extra fields, wrong value types and violations of the calculation rules are input errors. A successfully returned false flag is an evaluated outcome; its meaning is explained above.
Alternative or Complementary methods
Use FOUT Layout-Shift Width Delta Check: Font-swap reflow can displace following blocks. A simple displaced-area ratio differs from browser Cumulative Layout Shift. For a complementary task, use Fallback Metrics Ascent/Descent Override: Font metrics overrides and size-adjust scaling interact. The requested percentages must account for scaling to reach the target layout metrics.
References
Similar or alternative tools
- FOUT Layout-Shift Width Delta Check
Font-swap reflow can displace following blocks. A simple displaced-area ratio differs from browser Cumulative Layout Shift.
- Fallback Metrics Ascent/Descent Override
Font metrics overrides and size-adjust scaling interact. The requested percentages must account for scaling to reach the target layout metrics.