Separate physical edges from logical flow
Left and right describe physical sides. Inline start and inline end describe positions relative to the writing direction. In an English horizontal layout, inline start is usually the left side; in a right-to-left layout it changes. Logical properties let a component express that relationship instead of embedding one language’s direction into every spacing rule.
Start with common spacing rules
Replace directional spacing where the intention is relative to the text. For example, padding-inline can give a card equal space on both inline edges, while margin-block-end separates it from following content. A small set of these properties can make a component’s purpose clearer even before the site supports more than one language.
Use a concrete icon-and-label example
A button with an icon before its label needs space between those two items, not necessarily a margin on the physical right edge of the icon. A flex gap often expresses that relationship directly. Where a one-sided margin is appropriate, choose margin-inline-end if the space should follow the icon in the reading direction.
Keep truly physical positioning physical
Not every left value should become inline-start. A decorative illustration may be intentionally anchored to the physical left of a photograph regardless of language. Review the design requirement before converting it. Mechanical replacement can move art direction unintentionally while leaving the genuinely language-dependent parts of the interface unchanged.
Check dimensions and borders together
Logical concepts also apply to sizing and border placement. Inline-size can describe a control’s extent along the inline axis, and border-inline-start can mark a callout’s beginning edge. Avoid mixing physical and logical properties on the same responsibility without checking which declarations win in the cascade and how they behave under a different direction.
Verify with a changed direction
Test the component in an RTL wrapper and inspect labels, icons, alignment and spacing. This does not prove the whole page is correctly localized; text, navigation order and cultural expectations still need review. It does reveal rules that accidentally assume every reader moves left to right and makes future adaptation more deliberate.
Further reading
Put the idea to work.
Explore free browser tools for images, text and developer workflows.