Logical Property inline-start Mapping

Map inline-start to a physical side for horizontal or vertical writing modes and text direction.

Description

Inline-start is the side where inline content begins.

Inline-start is the side where inline content begins. It is left or right in horizontal writing and top or bottom in the supported vertical writing modes, depending on text direction.^{[1, 2]}

Map inline-start to a physical side for horizontal or vertical writing modes and text direction.

When to use Logical Property inline-start Mapping

Use this tool to map inline-start to a physical side for horizontal or vertical writing modes and text direction.

Choose the CSS values, dimensions or counts for this calculation. Supply resolved numeric measurements in matching units and the explicit reference box or writing mode where required.

How to use Logical Property inline-start Mapping and understand its results

Choose the CSS values, dimensions or counts for this calculation. Supply resolved numeric measurements in matching units and the explicit reference box or writing mode where required.
Enter writingMode, direction using the field table and calculation rules, then run the tool.
Read physicalSide. 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
writingMode	Writing mode	string; one of horizontal-tb, vertical-rl, vertical-lr	Required
direction	Text direction	string; one of ltr, rtl	Required

Select horizontal-tb, vertical-rl or vertical-lr and ltr or rtl. The tool uses a fixed writing-mode/direction mapping and returns the physicalSide label. The two vertical modes share the same inline-start rule even though their block progression differs.

horizontal inline-start = ltr ? left : right; vertical inline-start = ltr ? top : bottom

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

Output field	Meaning	Value type
physicalSide	Physical inline-start side	string; one of top, right, bottom, left

json

{
  "input": {
    "writingMode": "horizontal-tb",
    "direction": "rtl"
  },
  "output": {
    "physicalSide": "right"
  }
}

Limitations and assumptions

It does not infer styles, resolve inheritance or return all logical-side mappings. Sideways modes and complex bidi layout are outside the accepted values. The output names a side rather than returning a margin or offset.

Numeric inputs must be finite. Follow the calculation-specific rules for overflow, underflow and exceptional cases. Extremely large text inputs are rejected. Missing required fields, extra fields, wrong value types and violations of the calculation rules are input errors.

Alternative or Complementary methods

Use Physical→Logical Margin Mapper: Map four finite physical pixel margins to inline and block sides using writing mode and text direction. For a complementary task, use inset All-Four Offsets Shorthand: Expand one to four finite pixel inset values into top, right, bottom, and left offsets.

Further background: CSS Writing Modes: logical-to-physical mapping.

References

Logical Property inline-start Mapping — tool.io
CSS Writing Modes: logical-to-physical mapping — W3C

Similar or alternative tools

Physical→Logical Margin Mapper
Map four finite physical pixel margins to inline and block sides using writing mode and text direction.
inset All-Four Offsets Shorthand
Expand one to four finite pixel inset values into top, right, bottom, and left offsets.