HTML & CSS Interview Question #136

How should CSS support right-to-left languages?

Advanced CSS, Accessibility, Performance, Debugging & Senior Scenarios Senior Advanced

Quick Interview Answer

CSS should avoid unnecessarily hard-coding left and right when the design concept is actually start and end. Logical properties such as margin-inline-start, padding-inline, inset-inline-end, and text-align: start adapt to the document's writing direction.

Detailed Explanation

CSS should avoid unnecessarily hard-coding left and right when the design concept is actually start and end. Logical properties such as margin-inline-start, padding-inline, inset-inline-end, and text-align: start adapt to the document's writing direction.

HTML should declare the correct dir and lang values where needed. Components should then be tested in both left-to-right and right-to-left content rather than assuming logical properties alone solve every localization issue.

Code Example

html[dir="rtl"] {
    /* Direction is declared by document semantics. */
}

.card {
    padding-inline: 1rem;
    margin-inline-start: .5rem;
}

.icon-end {
    inset-inline-end: .75rem;
}