/* ============================================================================ @primealpha/sove-i18n — vanilla styles RTL-safe helpers, a drop-in language switcher, and font stacks that cover all nine languages. Pair with sove-i18n.js. Uses CSS Logical Properties so a single rule works in both LTR and RTL — the runtime flips [dir] on for you. ========================================================================== */ /* ---- font coverage: Latin + CJK + Arabic --------------------------------- */ /* Load the weights you need from Google Fonts (or self-host). These families cover ko/ja/zh (Noto Sans CJK) and ar (Noto Sans Arabic). Example : */ :root { --sove-font-latin: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --sove-font-ko: "Noto Sans KR", var(--sove-font-latin); --sove-font-ja: "Noto Sans JP", var(--sove-font-latin); --sove-font-zh: "Noto Sans SC", var(--sove-font-latin); --sove-font-ar: "Noto Sans Arabic", var(--sove-font-latin); } /* the runtime sets data-sove-lang on ; swap the base family per language */ html[data-sove-lang="ko"] body { font-family: var(--sove-font-ko); } html[data-sove-lang="ja"] body { font-family: var(--sove-font-ja); } html[data-sove-lang="zh"] body { font-family: var(--sove-font-zh); } html[data-sove-lang="ar"] body { font-family: var(--sove-font-ar); } /* Arabic renders better slightly larger; German compounds need tighter tracking */ html[data-sove-lang="ar"] body { font-size: 1.03em; line-height: 1.75; } html[data-sove-lang="de"] body { letter-spacing: -0.01em; } /* ---- RTL: prefer logical properties everywhere --------------------------- */ /* If your own CSS uses margin-left/right or text-align:left/right, switch to the logical forms below and RTL becomes automatic — no per-language overrides. */ .sove-start { text-align: start; } .sove-end { text-align: end; } .sove-mis { margin-inline-start: 1rem; } .sove-mie { margin-inline-end: 1rem; } .sove-pis { padding-inline-start: 1rem; } .sove-pie { padding-inline-end: 1rem; } /* mirror directional glyphs (chevrons, arrows) in RTL */ [dir="rtl"] .sove-mirror { transform: scaleX(-1); } /* keep numbers, code and money LTR even inside an RTL paragraph */ .sove-ltr, [dir="rtl"] .sove-num, [dir="rtl"] code, [dir="rtl"] .mono { direction: ltr; unicode-bidi: isolate; } /* ---- language switcher --------------------------------------------------- */ .sove-lang { font: inherit; font-size: 0.85rem; color: inherit; background: rgba(127, 127, 127, 0.08); border: 1px solid rgba(127, 127, 127, 0.25); border-radius: 4px; padding: 0.4rem 2rem 0.4rem 0.7rem; cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%238A96AB' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.6rem center; } [dir="rtl"] .sove-lang { padding: 0.4rem 0.7rem 0.4rem 2rem; background-position: left 0.6rem center; } .sove-lang:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } .sove-lang option { color: #111; } /* button-group variant */ .sove-lang-group { display: inline-flex; gap: 0.2rem; flex-wrap: wrap; } .sove-lang-group button { font: inherit; font-size: 0.78rem; padding: 0.3rem 0.55rem; cursor: pointer; background: transparent; color: inherit; border: 1px solid rgba(127, 127, 127, 0.25); border-radius: 3px; } .sove-lang-group button[aria-current="true"] { border-color: currentColor; font-weight: 600; } /* ---- loading guard: hide untranslated flash ------------------------------ */ /* Add class "sove-cloak" to elements that must not show their fallback text before init resolves; the runtime removes it via [data-sove-lang] on . */ html:not([data-sove-lang]) .sove-cloak { visibility: hidden; }