Skip to main content

value-keyword-layout-mappings

Specify flow-relative or physical layout mappings for value keywords.

a { float: left; }
/**        ↑
 *         This keyword */

Physical keywords like left, top and horizontal are tied to the physical dimensions of the screen. Flow-relative keywords like inline-start, block-start and inline adapt to different writing modes and text directions, making them useful for internationalization. They are the keyword-level counterpart to flow-relative properties and units.

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 keyword, or the physical keyword and its flow-relative equivalent.

Prior art:

Options​

"flow-relative"​

Layout mappings for value keywords 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:

{
  "value-keyword-layout-mappings": "flow-relative"
}

The following patterns are considered problems:

a { float: left; }
a { text-align: right; }
a { resize: horizontal; }
a { caption-side: top; }

The following patterns are not considered problems:

a { float: inline-start; }
a { text-align: end; }
a { resize: inline; }
a { caption-side: block-start; }

"physical"​

Layout mappings for value keywords must always be physical.

Given:

{
  "value-keyword-layout-mappings": "physical"
}

The following patterns are considered problems:

a { float: inline-start; }
a { text-align: start; }
a { resize: inline; }
a { caption-side: block-start; }

The following patterns are not considered problems:

a { float: left; }
a { text-align: right; }
a { resize: horizontal; }
a { caption-side: top; }

Optional secondary options​

ignoreProperties​

Ignore the specified properties.

{ "ignoreProperties": ["array", "of", "properties", "/regex/"] }

Given:

{
  "value-keyword-layout-mappings": [
    "flow-relative",
    { "ignoreProperties": ["text-align", "/^caption-/"] }
  ]
}

The following patterns are not considered problems:

a { text-align: left; }
a { caption-side: top; }

ignoreKeywords​

Ignore the specified keywords.

{ "ignoreKeywords": ["array", "of", "keywords", "/regex/"] }

Given:

{
  "value-keyword-layout-mappings": [
    "flow-relative",
    { "ignoreKeywords": ["left", "/^hor/"] }
  ]
}

The following patterns are not considered problems:

a { float: left; }
a { resize: horizontal; }