FOUT Layout-Shift Width Delta Check

Estimate following-block displacement from measured line reflow/line heights and sum declared displacement areas; not browser CLS impact/viewport clipping/session-window aggregation or duplicate text-width delta.

Description

Font-swap reflow can displace following blocks.

Font-swap reflow can displace following blocks. A simple displaced-area ratio differs from browser Cumulative Layout Shift.^[1]

Enter aligned nonempty nonnegative integer line counts, positive line heights/viewport and block widths between zero and viewport width. Return signed displacements, sum(abs(displacement)×blockWidth)/viewportArea and maximum absolute displacement.

When to use FOUT Layout-Shift Width Delta Check

Use FOUT Layout-Shift Width Delta Check when you need to evaluate the supplied records under the calculation and evidence rules below. No viewport clipping, impact-region union or CLS session-window aggregation is modeled.

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 FOUT Layout-Shift Width Delta Check 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 fallbackLineCounts, webfontLineCounts, fallbackLineHeightsPx, webfontLineHeightsPx, measuredFollowingBlockWidthsPx, viewportWidthPx, viewportHeightPx using the field table and calculation rules, then run the tool.
Read signedFollowingBlockDisplacementsPx, sumDisplacedAreaOverViewportArea, maximumAbsoluteFollowingDisplacementPx. 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
fallbackLineCounts	Fallback line counts	list of number	Required
webfontLineCounts	Webfont line counts	list of number	Required
fallbackLineHeightsPx	Fallback line heights px	list of number	Required
webfontLineHeightsPx	Webfont line heights px	list of number	Required
measuredFollowingBlockWidthsPx	Measured following block widths px	list of number	Required
viewportWidthPx	Viewport width px	number	Required
viewportHeightPx	Viewport height px	number	Required

displacement=webLines×webLineHeight−fallbackLines×fallbackLineHeight

Units, indexing, boundary conditions and exceptional cases are defined in the calculation rules above.

Output field	Meaning	Value type
signedFollowingBlockDisplacementsPx	Signed following block displacements px	list of number
sumDisplacedAreaOverViewportArea	Sum displaced area over viewport area	number
maximumAbsoluteFollowingDisplacementPx	Maximum absolute following displacement px	number

json

{
  "input": {
    "fallbackLineCounts": [
      2,
      3
    ],
    "webfontLineCounts": [
      3,
      2
    ],
    "fallbackLineHeightsPx": [
      20,
      20
    ],
    "webfontLineHeightsPx": [
      22,
      22
    ],
    "measuredFollowingBlockWidthsPx": [
      100,
      200
    ],
    "viewportWidthPx": 500,
    "viewportHeightPx": 500
  },
  "output": {
    "signedFollowingBlockDisplacementsPx": [
      26,
      -16
    ],
    "sumDisplacedAreaOverViewportArea": 0.0232,
    "maximumAbsoluteFollowingDisplacementPx": 26
  }
}

Limitations and assumptions

No viewport clipping, impact-region union or CLS session-window aggregation is modeled.

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.

Alternative or Complementary methods

Use font-display Swap Block Fallback Shift Metric: Font-display timing and measured fallback differences jointly determine a modeled visible swap. Caller windows differ from browser implementation behavior. 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

FOUT Layout-Shift Width Delta Check — tool.io

Similar or alternative tools

font-display Swap Block Fallback Shift Metric
Font-display timing and measured fallback differences jointly determine a modeled visible swap. Caller windows differ from browser implementation behavior.
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.