/* Fitalthy — internationalisation stylesheet. * * Loaded AFTER public/styles.css, on every page: * * * * Three jobs, in order: * 1. Replace the physical properties in styles.css with logical ones, so the * layout mirrors itself in RTL instead of needing a second stylesheet. * 2. Keep everything numeric — lab values, units, reference ranges, the * sparkline — reading left-to-right even inside Arabic or Urdu text. * A mirrored "5.4 – 7.2" is a clinical hazard, not a cosmetic bug. * 3. Give each script a font stack that actually renders it. * * There is deliberately no mirrored copy of styles.css and no `.rtl-*` classes: * one stylesheet, logical properties, and a handful of [dir=rtl] exceptions for * the things that must NOT mirror. */ /* ========================================================================== 1 · Script-aware typography Browsers fall back per-glyph, so a stack that names the script's font first and ends at the system UI font is enough. We link no webfonts: this app runs on 2G and its pages must render offline from cache. If you later want guaranteed rendering, self-host subsetted Noto files under /public/fonts and add @font-face blocks here — do NOT add a Google Fonts , it is a third-party request on every medical page view. ========================================================================== */ :root { --font-latin: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-arabic: "Noto Naskh Arabic", "Geeza Pro", "Segoe UI", "Arabic Typesetting", "Traditional Arabic", "Droid Arabic Naskh", system-ui, sans-serif; --font-urdu: "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", "Awami Nastaliq", "Noto Naskh Arabic", "Geeza Pro", system-ui, sans-serif; --font-devanagari: "Noto Sans Devanagari", "Nirmala UI", "Kohinoor Devanagari", "Mangal", system-ui, sans-serif; --font-bengali: "Noto Sans Bengali", "Nirmala UI", "Bangla Sangam MN", "Vrinda", system-ui, sans-serif; --font-tamil: "Noto Sans Tamil", "Nirmala UI", "Tamil Sangam MN", "Latha", system-ui, sans-serif; --font-telugu: "Noto Sans Telugu", "Nirmala UI", "Telugu Sangam MN", "Gautami", system-ui, sans-serif; --font-gujarati: "Noto Sans Gujarati", "Nirmala UI", "Gujarati Sangam MN", "Shruti", system-ui, sans-serif; --font-malayalam: "Noto Sans Malayalam", "Nirmala UI", "Malayalam Sangam MN", "Kartika", system-ui, sans-serif; --font-sinhala: "Noto Sans Sinhala", "Nirmala UI", "Sinhala Sangam MN", "Iskoola Pota", system-ui, sans-serif; --font-thai: "Noto Sans Thai", "Thonburi", "Leelawadee UI", "Tahoma", system-ui, sans-serif; --font-hebrew: "Noto Sans Hebrew", "Arial Hebrew", "Segoe UI", system-ui, sans-serif; --font-ethiopic: "Noto Sans Ethiopic", "Kefa", "Nyala", system-ui, sans-serif; --font-sc: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif; --font-tc: "Noto Sans TC", "PingFang TC", "Heiti TC", "Microsoft JhengHei", system-ui, sans-serif; --font-jp: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Meiryo", system-ui, sans-serif; --font-kr: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif; /* Latin digits, always available for lab values whatever the UI language. */ --font-numeric: ui-monospace, "SF Mono", "Segoe UI Mono", "Roboto Mono", "DejaVu Sans Mono", monospace; } /* Matched on the attribute that i18n's htmlAttrs() emits, with [lang] fallbacks so the stack still works if the attribute is missing. */ [data-script="Arab"], [lang|="ar"], [lang|="fa"], [lang|="ps"], [lang|="sd"], [lang|="skr"], [lang|="bal"], [lang|="ckb"], [lang="pa-Arab"] { font-family: var(--font-arabic); } /* Urdu is set in Nastaliq, which is a steeply sloping script: it needs far more line box than Naskh or Latin or the descenders collide with the next line. */ [lang|="ur"] { font-family: var(--font-urdu); line-height: 2.05; } [lang|="ur"] h1, [lang|="ur"] h2, [lang|="ur"] h3 { line-height: 1.7; } [lang|="ur"] .btn, [lang|="ur"] .chip, [lang|="ur"] input, [lang|="ur"] select { line-height: 1.9; } [data-script="Deva"], [lang|="hi"], [lang|="mr"], [lang|="ne"] { font-family: var(--font-devanagari); } [data-script="Beng"], [lang|="bn"] { font-family: var(--font-bengali); } [data-script="Taml"], [lang|="ta"] { font-family: var(--font-tamil); } [data-script="Telu"], [lang|="te"] { font-family: var(--font-telugu); } [data-script="Gujr"], [lang|="gu"] { font-family: var(--font-gujarati); } [data-script="Mlym"], [lang|="ml"] { font-family: var(--font-malayalam); } [data-script="Sinh"], [lang|="si"] { font-family: var(--font-sinhala); } [data-script="Thai"], [lang|="th"] { font-family: var(--font-thai); } [data-script="Hebr"], [lang|="he"] { font-family: var(--font-hebrew); } [data-script="Ethi"], [lang|="am"] { font-family: var(--font-ethiopic); } [data-script="Hans"], [lang="zh-Hans"], [lang|="zh-CN"] { font-family: var(--font-sc); } [data-script="Hant"], [lang="zh-Hant"], [lang|="zh-TW"] { font-family: var(--font-tc); } [data-script="Jpan"], [lang|="ja"] { font-family: var(--font-jp); } [data-script="Kore"], [lang|="ko"] { font-family: var(--font-kr); } /* Indic and Arabic scripts have taller glyphs than Latin at the same px size; 16px Latin reads as ~14px Devanagari. Nudge the base up so the two feel equal. */ [data-script="Deva"], [data-script="Beng"], [data-script="Taml"], [data-script="Telu"], [data-script="Gujr"], [data-script="Mlym"], [data-script="Sinh"], [data-script="Ethi"], [data-script="Arab"] { font-size: 17px; } /* CJK does not break on spaces; let it wrap anywhere sensible instead of overflowing the card. */ [data-script="Hans"], [data-script="Hant"], [data-script="Jpan"], [data-script="Kore"] { line-height: 1.75; word-break: normal; overflow-wrap: anywhere; line-break: strict; } /* ========================================================================== 2 · Logical properties — the actual mirroring These re-declare rules from styles.css using inline-axis properties. Because this file loads second, the logical version wins in both directions. ========================================================================== */ html { --dir-sign: 1; } [dir="rtl"] { --dir-sign: -1; } body { text-align: start; } .wrap { padding-block: 20px 64px; padding-inline: 16px; } .nav { padding-block: 12px; padding-inline: 16px; } .banner { padding-block: 10px; padding-inline: 16px; } .foot { padding-block: 18px 40px; padding-inline: 16px; } .row { padding-block: 13px; padding-inline: 15px; } .btn { padding-block: 12px; padding-inline: 20px; } .btn.small { padding-block: 8px; padding-inline: 14px; } .err { padding-block: 10px; padding-inline: 12px; } .chip { padding-block: 2px; padding-inline: 8px; } .urgent { padding-block: 14px; padding-inline: 16px; } input, select, textarea { padding-block: 11px; padding-inline: 12px; text-align: start; } label { text-align: start; } /* Tables: styles.css uses `padding: 8px 8px 6px 0` and `text-align:left`, which puts the gutter on the wrong side in RTL. */ table.vals th { text-align: start; padding-block: 8px 6px; padding-inline-start: 0; padding-inline-end: 8px; } table.vals td { padding-block: 9px; padding-inline-start: 0; padding-inline-end: 8px; } table.vals th:last-child, table.vals td:last-child { padding-inline-end: 0; } .hero p.lede { margin-inline: auto; } .disclaim { border-block-start: 1px solid var(--rule); margin-block-start: 14px; padding-block-start: 10px; } /* ========================================================================== 3 · Things that must NOT mirror ========================================================================== */ /* --- numbers, units, ranges --------------------------------------------- Every numeric cell is an isolated LTR run. Without `unicode-bidi: isolate` the bidi algorithm reorders a run like "3.5 - 5.1 mmol/L" inside an Arabic paragraph and the reader sees the range backwards. `isolate` also stops a value bleeding into the neighbouring Arabic word. Applies to , and inline . */ .num, .vals td.num, .vals th.num, .plan-price, .price, time, code, kbd, samp { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; } .num { text-align: left; } [dir="rtl"] .num { text-align: right; } [dir="rtl"] .plan-price, [dir="rtl"] .price { text-align: center; } /* Lab values, doses and reference ranges get Latin digits even when the locale normally writes Arabic-Indic ones. Paired with formatLabNumber() in src/i18n/index.js — do not "fix" one without the other. */ .vals .num, .vals td, .drift, .trend .sub .num { font-feature-settings: "tnum" 1; font-variant-numeric: tabular-nums lining-nums; } .vals .num { font-family: var(--font-numeric); } /* Email addresses, URLs, invite links and file names are LTR everywhere. */ input[type="email"], input[type="url"], input[type="password"], input[name="_csrf"], .invite-link, .mono { direction: ltr; unicode-bidi: isolate; text-align: start; } [dir="rtl"] input[type="email"], [dir="rtl"] input[type="url"], [dir="rtl"] input[type="password"] { text-align: right; } /* --- the sparkline ------------------------------------------------------- The SVG plots time on the x axis. Time does not run right-to-left because the text does: an Urdu reader still expects the oldest reading on the left, the same way they read a printed ECG. Force the SVG's own box LTR and leave the path untouched. The card AROUND it does mirror — only the chart holds still. */ .spark, svg.spark { direction: ltr; unicode-bidi: isolate; } [dir="rtl"] .spark { transform: none; } /* explicit: never scaleX(-1) */ .trend { gap: 12px; } [dir="rtl"] .trend > .spark { margin-inline-start: 0; } /* Brand wordmark stays as-is; it is a logo, not a sentence. */ .brand { unicode-bidi: isolate; } /* Original-document image: never mirror a photograph of a report. */ .orig { transform: none; } /* --- directional glyphs -------------------------------------------------- The chevrons in the row lists ("›") and the back links ("‹") are Bidi_Mirrored characters: the Unicode bidi algorithm already flips them in an RTL paragraph, so we must NOT flip them again. Trend arrows (↗ ↘) are not mirrored and must not be — they mean "rising"/"falling", not "forward"/"back". Both behaviours are correct by default; these rules exist to stop a future contributor "fixing" them. */ .row > .sub, .drift { unicode-bidi: isolate; } [dir="rtl"] .drift { transform: none; } /* ========================================================================== 4 · The language switcher (rendered by localeSwitcher() in src/i18n) ========================================================================== */ .lang-switcher { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-block: 8px; } .lang-switcher-label { margin: 0; font-size: 13px; font-weight: 600; color: var(--ink-faint); white-space: nowrap; } .lang-switcher select { width: auto; min-width: 12ch; max-width: 100%; padding-block: 7px; padding-inline: 10px; font-size: 14px; } /* Each