CSS logical properties replace physical direction keywords — left, right, top, bottom — with flow-relative equivalents — inline-start, inline-end, block-start, block-end — that automatically adapt to the writing direction set by the document’s dir attribute or the CSS direction property. In a left-to-right Latin layout, margin-inline-start is equivalent to margin-left, but in a right-to-left Arabic layout it becomes margin-right without any additional CSS — the browser handles the flip. WordPress sites serving audiences in Arabic, Hebrew, Persian, or other RTL languages traditionally maintain a separate rtl.css file that mirrors every physical direction property — logical properties eliminate this duplication entirely. Block themes using theme.json already output logical properties for spacing and typography in the generated styles, making logical properties the natural choice for custom block stylesheets that extend the theme. Beyond margin and padding, logical properties extend to inset-inline, border-inline, border-block, text-align: start, and float: inline-start — replacing the most common sources of RTL breakage in a theme stylesheet. padding-inline is a shorthand for setting both inline-start and inline-end padding in a single declaration, equivalent to the physical padding-left + padding-right pair. The writing-mode CSS property also uses logical properties — a vertically typeset Japanese layout uses block for the reading direction and inline for the cross axis, exactly reversed from a standard horizontal layout. Browser support for logical properties is complete in all modern browsers as of 2023 — the only exceptions are a few shorthand forms that require physical fallbacks for Firefox ESR or older Safari. The container queries post demonstrates the same block-theme component approach where logical properties further improve the layout’s international compatibility. The CSS grid layout post shows grid column definitions where logical gap and margin properties should replace physical ones for full RTL compatibility. Audit existing theme stylesheets with a search for margin-left, margin-right, padding-left, and padding-right — each occurrence is a candidate for conversion to its logical equivalent.
Problem: WordPress themes using physical CSS direction properties (margin-left, padding-right, text-align: left) require a separate rtl.css file to mirror every rule for right-to-left languages, duplicating maintenance effort and introducing synchronisation bugs.
Solution: Replace physical direction properties with CSS logical properties (margin-inline-start, padding-inline, text-align: start) so the browser automatically adapts layout direction from the document's dir attribute without a separate RTL stylesheet.
/* Before: physical properties that break in RTL layouts */
.entry-meta {
margin-left: 1.5rem;
padding-left: 1rem;
border-left: 3px solid var(--wp--preset--color--primary);
text-align: left;
float: left;
}
.entry-meta .icon {
margin-right: 0.25rem;
}
/* After: logical properties — work in LTR and RTL without rtl.css */
.entry-meta {
margin-inline-start: 1.5rem;
padding-inline-start: 1rem;
border-inline-start: 3px solid var(--wp--preset--color--primary);
text-align: start;
float: inline-start;
}
.entry-meta .icon {
margin-inline-end: 0.25rem;
}
/* Shorthand: inline (left+right) and block (top+bottom) at once */
.card {
padding-inline: 1.5rem; /* replaces padding-left + padding-right */
padding-block: 1rem; /* replaces padding-top + padding-bottom */
margin-block-end: 2rem; /* replaces margin-bottom */
}
/* Positioning: replaces top/right/bottom/left */
.tooltip {
inset-inline-end: 0; /* replaces right: 0 */
inset-block-start: 100%; /* replaces top: 100% */
}
/* Sizing: logical width/height */
.sidebar {
inline-size: 280px; /* replaces width in horizontal writing mode */
max-block-size: 100vh; /* replaces max-height */
}NOTE: text-align: start resolves to left in LTR and right in RTL — but text-align: left ignores writing direction. For centred text, center is already direction-agnostic, so no change is needed for centred headings or captions.