/* RTL overrides for ar and he. Loaded only when . site.css was written left-to-right with physical properties in a few places; rather than rewrite it (and risk the 45 live English pages), those specific physical rules are mirrored here. Anything already using logical properties flips on its own and is deliberately not repeated below. */ /* Breadcrumb and related-link arrows point the wrong way when mirrored. */ [dir="rtl"] .crumb, [dir="rtl"] .related a { direction: rtl; } [dir="rtl"] .related a::after { content: ""; } [dir="rtl"] .related a { unicode-bidi: isolate; } /* Footer columns and the nav read right-aligned. */ [dir="rtl"] footer .fcols { text-align: right; } [dir="rtl"] nav .navlinks { flex-direction: row-reverse; } /* Lists: bullets/numbers belong on the right. */ [dir="rtl"] ul, [dir="rtl"] ol { padding-right: 22px; padding-left: 0; } /* Tables mirror wholesale. */ [dir="rtl"] table { direction: rtl; } [dir="rtl"] th, [dir="rtl"] td { text-align: right; } /* The facts strip and CTA stay centred, but their internal text must flip. */ [dir="rtl"] .facts, [dir="rtl"] .ctabox { direction: rtl; } /* Latin fragments inside RTL text — "macOS 13", "$39.99", "⌘V", "Lesskeys" — must be isolated or the bidi algorithm reorders the surrounding punctuation. Writers wrap these in . */ /* `display: inline-block` was wrong here: it stops the fragment wrapping with the sentence around it and pushed "macOS 13+" onto its own line inside a narrow card. Isolation alone is what actually fixes the bidi reordering. */ [dir="rtl"] .ltr, [dir="rtl"] [dir="ltr"] { unicode-bidi: isolate; direction: ltr; } /* The eyebrow and breadcrumb are styled for Latin: uppercase + wide tracking. Arabic is a CURSIVE script — letter-spacing pulls the joined letterforms apart and reads as broken text, and text-transform does nothing useful in either Arabic or Hebrew. Reset both. (Same class of bug as the CJK eyebrow in i18n.css; caught here by rendering an RTL page before shipping one.) The load-bearing part is font-family: site.css sets these to var(--mono), and a MONOSPACE font forces every Arabic glyph into a fixed-width cell, which breaks the cursive joining outright. Resetting letter-spacing alone looked like it fixed nothing, because the font was the real cause. */ [dir="rtl"] .eyebrow, [dir="rtl"] .crumb { font-family: 'SF Arabic', 'Geeza Pro', 'Arial Hebrew', 'Noto Sans Arabic', 'Noto Sans Hebrew', var(--sans); letter-spacing: 0; text-transform: none; line-height: 1.8; } /* Arabic and Hebrew need more leading than the Latin default. */ [dir="rtl"] p { line-height: 1.95; } [dir="rtl"] h1 { line-height: 1.35; letter-spacing: 0; } [dir="rtl"] h2 { line-height: 1.45; letter-spacing: 0; } /* Fraunces has no Arabic/Hebrew coverage — name the system faces explicitly. */ [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { font-family: 'SF Arabic', 'Geeza Pro', 'Arial Hebrew', 'Noto Sans Arabic', 'Noto Sans Hebrew', var(--sans); font-weight: 700; }