Physical→Logical Margin Mapper

Map four finite physical pixel margins to inline and block sides using writing mode and text direction.

Description

Logical margins refer to inline and block flow rather than fixed top, right, bottom and left sides.

Logical margins refer to inline and block flow rather than fixed top, right, bottom and left sides. Their correspondence changes with writing mode and, for inline sides, text direction.^{[1, 2]}

Map four finite physical pixel margins to inline and block sides using writing mode and text direction.

When to use Physical→Logical Margin Mapper

Use this tool to map four finite physical pixel margins to inline and block sides using writing mode 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 Physical→Logical Margin Mapper 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, top, right, bottom, left using the field table and calculation rules, then run the tool.
Read inlineStart, inlineEnd, blockStart, blockEnd. 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
top	Top margin	number	Required
right	Right margin	number	Required
bottom	Bottom margin	number	Required
left	Left margin	number	Required

Choose horizontal-tb, vertical-rl or vertical-lr, ltr or rtl, and four finite pixel margins. Horizontal mode maps block start/end to top/bottom and inline start/end to left/right for ltr, reversed for rtl. Vertical modes map inline start/end to top/bottom for ltr and bottom/top for rtl. Vertical-rl maps block start/end to right/left; vertical-lr maps them to left/right. The tool returns the four values in logical-side fields.

logical margin value = supplied physical margin at the mapped side

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

Output field	Meaning	Value type
inlineStart	Inline start margin	number
inlineEnd	Inline end margin	number
blockStart	Block start margin	number
blockEnd	Block end margin	number

json

{
  "input": {
    "writingMode": "vertical-rl",
    "direction": "ltr",
    "top": 1,
    "right": 2,
    "bottom": 3,
    "left": 4
  },
  "output": {
    "inlineStart": 1,
    "inlineEnd": 3,
    "blockStart": 2,
    "blockEnd": 4
  }
}

Limitations and assumptions

Negative numeric margins are supported, but auto, percentages and CSS strings are not. It maps supplied values without resolving layout, inheritance or a cascade. Other writing modes and bidi behavior beyond these supplied properties are outside its scope.

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 Logical Property inline-start Mapping: Map inline-start to a physical side for horizontal or vertical writing modes and text direction. For a complementary task, use Margin 4-Value Shorthand Expansion: Expand four finite pixel margins in top, right, bottom, left order.

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

References

Physical→Logical Margin Mapper — tool.io
CSS Writing Modes: logical-to-physical mapping — W3C

Similar or alternative tools

Logical Property inline-start Mapping
Map inline-start to a physical side for horizontal or vertical writing modes and text direction.
Margin 4-Value Shorthand Expansion
Expand four finite pixel margins in top, right, bottom, left order.