Feature request: Add logical property to physical property mappings

[lifeiscontent]

Summary

It would be helpful to have explicit mappings from logical CSS properties to their physical equivalents for both LTR and RTL writing modes.

Current State

The logicalPropertyGroup field groups related properties together, but:

1. Properties are listed alphabetically, not by their logical-to-physical relationship
2. There's no explicit mapping showing which logical property corresponds to which physical property in LTR vs RTL

Use Case

CSS-in-JS libraries and tools that need to:

• Convert logical properties to physical properties for older browser support
• Generate RTL stylesheets from LTR source
• Understand the relationship between margin-inline-start → margin-left (LTR) / margin-right (RTL)

Proposed Enhancement

Add explicit LTR/RTL mappings:

{
  "name": "margin-inline-start",
  "logicalPropertyGroup": "margin",
  "physicalMapping": {
    "ltr": "margin-left",
    "rtl": "margin-right"
  },
  ...
}

Or a separate mapping structure:

{
  "logicalToPhysical": {
    "margin-inline-start": { "ltr": "margin-left", "rtl": "margin-right" },
    "margin-inline-end": { "ltr": "margin-right", "rtl": "margin-left" },
    "margin-block-start": { "ltr": "margin-top", "rtl": "margin-top" },
    "padding-inline-start": { "ltr": "padding-left", "rtl": "padding-right" },
    ...
  }
}

Affected Properties

Logical properties that need mappings:

• margin-inline-start, margin-inline-end, margin-block-start, margin-block-end
• padding-inline-start, padding-inline-end, padding-block-start, padding-block-end
• border-inline-start-*, border-inline-end-*, border-block-start-*, border-block-end-*
• inset-inline-start, inset-inline-end, inset-block-start, inset-block-end
• border-start-start-radius, border-start-end-radius, border-end-start-radius, border-end-end-radius
• inline-size, block-size, min-inline-size, max-inline-size, etc.

[ydaniv]

Convert logical properties to physical properties for older browser support

Do we really need to? I think these are all widely available already since 2020 or 2021.

Generate RTL stylesheets from LTR source

Well the point of logical is that you don't need to generate another stylesheet. If you're already using logical properties, what else do you need to change?
Only things that need to change are perhaps things that don't have logical values, like transforms.

Understand the relationship between margin-inline-start → margin-left (LTR) / margin-right (RTL)

Well, if not for the above, what do we need this for? Ideally, also as far as the CSSWG is concerned, you should only be using logical properties and values today as much as possible.
Perhaps there's a use-case for explicitly still using physical properties/values that I'm not aware of?

[tidoust]

The reverse use case could perhaps be useful for editing tools: some way to warn the user that they're using physical properties and point at the logical properties they could use instead.

The "logical property group" in property definitions should help here. I don't see anything that directly identifies the logical property in that group. Can we simply assume it's "the one that's defined in css-logical" for now?

I note margin-inline-start may also map to margin-top or margin-bottom depending on the writing mode, it's not only about left-to-right and right-to-left. Or is there any reason to exclude vertical writing modes?

[ydaniv]

I note margin-inline-start may also map to margin-top or margin-bottom depending on the writing mode, it's not only about left-to-right and right-to-left. Or is there any reason to exclude vertical writing modes?

No reason. That's part of logical properties. The physical meaning of inline and block depend on writing modes, not just HTML dir.

[lifeiscontent]

Good points, @ydaniv and @tidoust.

@ydaniv is right that logical properties are widely supported now and should be the default for new code. Let me clarify the remaining use cases:

1. Warning/linting tools (as @tidoust mentioned): A tool that warns "you're using margin-left, consider margin-inline-start instead" needs to know the mapping.

2. Writing mode completeness: @tidoust correctly notes that inline can map to horizontal OR vertical depending on writing-mode, not just dir. My original request was too narrow - it only considered LTR/RTL, not vertical writing modes.

3. Legacy interop: Some third-party CSS libraries still use physical properties. Understanding the mapping helps when composing styles.

For my specific use case (LiveStyle), I've already implemented the LTR/RTL mappings based on StyleX's approach. The broader question of writing-mode-aware mappings is more complex.

Given the complexity of properly supporting all writing modes (horizontal-tb, vertical-rl, vertical-lr, sideways-rl, sideways-lr), this might be better left to downstream tools unless there's broader demand. Happy to close this if it's deemed too niche.