Skip to main content

unit-layout-mappings

Specify flow-relative or physical layout mappings for units.

a { width: 100vw; }
/**           ↑
 *            This unit */

Physical units like vw and vh are tied to the physical dimensions of the viewport. Flow-relative units like vi and vb adapt to different writing modes and text directions, making them useful for internationalization. They are the unit-level counterpart to flow-relative properties like inline-size and block-size.

The fix option can automatically fix problems reported by this rule when both the primary option is "flow-relative" and the languageOptions.directionality configuration property is configured.

This rule supports 2 message arguments: the disallowed mapping and the unit, or the physical unit and its flow-relative equivalent.

Prior art:

Options​

"flow-relative"​

Layout mappings for units must always be flow-relative.

note

If you want this rule to automatically fix problems, you must configure the languageOptions.directionality configuration property.

For example, for Latin-based languages such as English:

{
  "languageOptions": {
    "directionality": {
      "block": "top-to-bottom",
      "inline": "left-to-right"
    }
  }
}

Given:

{
  "unit-layout-mappings": "flow-relative"
}

The following patterns are considered problems:

a { margin-inline-start: 10vw; }
a { inline-size: 50cqw; }

The following patterns are not considered problems:

a { margin-inline-start: 10vi; }
a { inline-size: 50cqi; }

"physical"​

Layout mappings for units must always be physical.

Given:

{
  "unit-layout-mappings": "physical"
}

The following patterns are considered problems:

a { margin-top: 10vb; }
a { width: 50cqi; }

The following patterns are not considered problems:

a { margin-top: 10vh; }
a { width: 50cqw; }

Optional secondary options​

ignoreUnits​

Ignore the specified units.

{ "ignoreUnits": ["array", "of", "units", "/regex/"] }

Given:

{
  "unit-layout-mappings": ["flow-relative", { "ignoreUnits": ["vh", "/^cq/"] }]
}

The following patterns are not considered problems:

a { margin-inline-start: 10vh; }
a { width: 50cqw; }