Switch physical direction props to logical ones (inline-start / inline-end) for better bidi support

[emrothenberg]

Summary

I’d like to propose updating MUI’s component internals so that CSS logical properties are used (inline-start, inline-end, margin-inline-start, etc.) instead of physical left/right/margin-left/margin-right.

Rationale

Even with theme.direction = 'rtl', several MUI components still require manual prop changes because their internal styles rely on physical properties or DOM order rather than logical properties. Examples include:

• Button icon placement (startIcon / endIcon)
• Chip delete/action icon positioning
• FormControlLabel margins
• Various components using marginLeft/marginRight instead of logical equivalents

As a result, bidi apps must manually swap props or override internal styles even when the theme direction is set correctly. Using logical properties internally would ensure that components automatically follow the writing mode without additional work from the developer.

Proposal

• Replace internal physical layout properties with logical CSS properties.
• Avoid introducing new optional layers or alternative props; the goal is to align the underlying implementation with logical-direction standards so that components behave correctly in both LTR and RTL out of the box.

This change should not affect user-facing APIs, only internal styling, so backwards compatibility can be maintained while significantly improving RTL/bidi correctness.

I’m willing to implement this and submit a PR, but I’d like confirmation from the maintainers that switching the internal styling model to logical properties is acceptable before starting.

Please advise on whether this direction would be approved or whether it has been discussed previously.

Examples

No response

Motivation

I developed many projects using MUI, all of them in at least two languages, one LTR and one RTL. The RTL theme needed a lot of extra configurations just to get margins and positioning right, as simply changing the theme direction to "rtl" didn't change everything.

Search keywords: bidi, inline, rtl, left, right, logical directions

[mj12albert]

There is no browser support issue, and I agree with all the upsides of doing this.

The difficulty is in that theres a lot of ground to cover to ensure it doesn't cause any regressions: https://github.com/search?q=repo%3Amui%2Fmaterial-ui+margin+%28language%3AJavaScript+OR+language%3ATypeScript%29+%28path%3A%2F%5Epackages%5C%2Fmui-material%5C%2Fsrc%5C%2F%2F+AND+-path%3A**%2F*.d.ts%29&type=code

I’m willing to implement this and submit a PR

@emrothenberg Perhaps you could start with one component first?