/* ========================================================================== Right-to-left / Arabic support Every rule is gated on or , so LTR locales render exactly as before. ========================================================================== */ /* -------------------------------------------------------------------------- Arabic glyph coverage The UI faces (Inter, Outfit, Rethink Sans, Roboto, Rubik, Open Sans) carry no Arabic glyphs, so Arabic fell back to whatever the OS happened to pick. The blocks below re-declare each of those family names over the Arabic unicode-range only, pointing at Noto Sans Arabic. Arabic codepoints then resolve to Noto while every Latin codepoint still comes from the real brand face — so no existing font-family declaration has to change, and the 163KB file is fetched only on pages that actually contain Arabic. -------------------------------------------------------------------------- */ @font-face { font-family: "Noto Sans Arabic"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/NotoSansArabic-Arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/NotoSansArabic-Arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } @font-face { font-family: "Outfit"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/NotoSansArabic-Arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } @font-face { font-family: "Rethink Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/NotoSansArabic-Arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } @font-face { font-family: "Roboto"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/NotoSansArabic-Arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } @font-face { font-family: "Rubik"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/NotoSansArabic-Arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } @font-face { font-family: "Open Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/NotoSansArabic-Arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } /* Anything that resolves to a generic stack still gets Arabic explicitly. */ :root[lang="ar"] body { font-family: "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif; } /* -------------------------------------------------------------------------- Letter-spacing Arabic is cursive — letters within a word join. CSS letter-spacing inserts a gap at every join, fragmenting words; negative tracking (the Latin headline style, e.g. -2.24px on the transcribe hero) overlaps glyphs and collides the tashkeel. Latin tracking values carry no meaning for Arabic in either direction, so clear them — including the inline ones, which is why this needs !important. It also clears tracking from the occasional Latin token on an Arabic page ("PDF", brand names): a deliberate trade, since a stylesheet cannot tell the two apart. -------------------------------------------------------------------------- */ :root[lang="ar"] body, :root[lang="ar"] body * { letter-spacing: normal !important; } /* -------------------------------------------------------------------------- Bidi isolation A runtime value dropped into a sentence forms a neutral run that the algorithm resolves against its neighbours, so a filename or a "45%" readout can migrate across the sentence. is the correct wrapper; these rules make the usual value-bearing containers isolate too. -------------------------------------------------------------------------- */ :root[dir="rtl"] bdi, :root[dir="rtl"] time, :root[dir="rtl"] code, :root[dir="rtl"] kbd, :root[dir="rtl"] samp { unicode-bidi: isolate; } /* Opt-in: a run that is always LTR whatever the paragraph around it — filenames, URLs, emails, version numbers, timecodes, card digits. */ :root[dir="rtl"] .ltr-run { direction: ltr; unicode-bidi: isolate; } /* Fields whose content is inherently LTR still read from the start edge. */ :root[dir="rtl"] input[type="email"], :root[dir="rtl"] input[type="tel"], :root[dir="rtl"] input[type="url"], :root[dir="rtl"] input[type="number"], :root[dir="rtl"] input[type="password"] { direction: ltr; text-align: right; } /* -------------------------------------------------------------------------- Directional glyphs An arrow that means "continue" has to point the way the reader is going. Icons authored for LTR flip here; text arrows inside translated copy are flipped in the translation itself (→ becomes ←). Opt in with .rtl-flip; mark anything directional that must NOT move with .rtl-no-flip. -------------------------------------------------------------------------- */ :root[dir="rtl"] .rtl-flip:not(.rtl-no-flip) { transform: scaleX(-1); }