/* ========================================================================= i18n.css — script-aware typography and RTL corrections. Loaded AFTER site.css in templates/base.html. Source order is the whole mechanism: almost every rule here overrides a site.css declaration at the SAME specificity, so moving this link above site.css silently disables most of the file without producing a single error. Bootstrap's own directional utilities are NOT handled here — base.html swaps in bootstrap-5.3.3.rtl.min.css under an RTL locale, which flips `.ms-*`, `.text-start`, `.float-start`, dropdowns and offcanvas wholesale. What remains, and what this file covers, is: 1. Fonts. Inter and Poppins carry no CJK, Thai, Khmer or Arabic glyphs. 2. This product's OWN physical left/right rules in site.css. 3. Per-script metrics — leading, weight and size that differ by script. ========================================================================= */ /* ------------------------------------------------------------------------- 1. SCRIPT-AWARE FONT STACKS WHY SYSTEM FONTS AND NOT WEBFONTS Loading Noto Sans JP + SC + TC + KR + Thai + Khmer + Arabic would add several megabytes to cover markets most visitors never see, and the swap-in flash lands on the exact text those users came to read. Every OS these locales run on already ships a well-hinted face for its own script. WHY :lang() AND NOT A CLASS `:lang()` matches the the middleware set AND any element with its own lang attribute — so a Japanese employee name inside an otherwise English page gets Japanese glyphs on that element alone. THE HAN UNIFICATION PROBLEM THIS FIXES Japanese, Simplified Chinese and Traditional Chinese share Unicode codepoints for many characters but draw them differently — 直, 骨 and 今 are visibly wrong to a native reader in the other language's face. With no per-language stack the browser picks whichever CJK font it finds first, so a Japanese user commonly gets Chinese glyph forms. Naming each language's own faces first is the only fix; `lang` alone does not do it. ------------------------------------------------------------------------- */ :root { /* The Latin stack site.css already uses, restated so the per-script stacks below can append it as a fallback for digits and Latin text embedded in non-Latin runs (employee IDs, currency codes, URLs). */ --font-latin: "Inter", "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* Japanese — Hiragino on macOS, Yu Gothic/Meiryo on Windows, Noto on Linux/Android. */ :lang(ja) { font-family: var(--font-latin), "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", Meiryo, "Noto Sans JP", "MS PGothic", sans-serif; } /* Simplified Chinese — PingFang SC on macOS, Microsoft YaHei on Windows. */ :lang(zh-Hans), :lang(zh-CN) { font-family: var(--font-latin), "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", "SimSun", sans-serif; } /* Traditional Chinese — PingFang TC, Microsoft JhengHei. Deliberately does NOT fall through to the Simplified stack: PingFang SC would render Simplified forms to a Taiwanese reader. */ :lang(zh-Hant), :lang(zh-TW) { font-family: var(--font-latin), "PingFang TC", "Hiragino Sans CNS", "Microsoft JhengHei UI", "Microsoft JhengHei", "Noto Sans TC", "Source Han Sans TC", "PMingLiU", sans-serif; } /* Korean — Apple SD Gothic on macOS, Malgun Gothic on Windows. */ :lang(ko) { font-family: var(--font-latin), "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", "Source Han Sans KR", "Nanum Gothic", Dotum, sans-serif; } /* Thai — Thonburi on macOS, Leelawadee UI on Windows. Tahoma is the long-standing fallback because it carries a complete Thai set. */ :lang(th) { font-family: var(--font-latin), "Thonburi", "Leelawadee UI", "Leelawadee", "Noto Sans Thai", "Sarabun", Tahoma, sans-serif; } /* Khmer — Khmer Sangam MN on macOS, Leelawadee/Khmer UI on Windows. Khmer stacks diacritics above AND below the baseline, which is what the line-height override further down is for. */ :lang(km) { font-family: var(--font-latin), "Khmer Sangam MN", "Leelawadee UI", "Khmer UI", "Noto Sans Khmer", "Hanuman", sans-serif; } /* Arabic — Geeza Pro on macOS, Segoe UI carries Arabic on Windows. */ :lang(ar) { font-family: "Geeza Pro", "Segoe UI", "Noto Sans Arabic", "Dubai", "Tahoma", "Traditional Arabic", var(--font-latin), sans-serif; } /* Vietnamese uses Latin script but with stacked diacritics that Poppins renders poorly at small sizes; Inter's coverage is complete, so it is named first rather than relying on the shared stack's order. */ :lang(vi) { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* ------------------------------------------------------------------------- 2. PER-SCRIPT METRICS These are not aesthetic preferences. Latin type is designed around an x-height that CJK, Thai and Khmer do not share, so the same px size and leading produce genuinely harder-to-read text in those scripts. ------------------------------------------------------------------------- */ /* CJK glyphs are dense and square; at Inter's 14px body size the strokes of a complex kanji collapse. A small bump plus extra leading is the standard correction. */ :lang(ja), :lang(ko), :lang(zh-Hans), :lang(zh-Hant) { line-height: 1.75; letter-spacing: 0.01em; } /* Thai and Khmer stack vowel and tone marks above and below the base character. At Latin leading those marks collide with the lines above and below — this is a legibility fix, not spacing taste. */ :lang(th), :lang(km) { line-height: 2; } /* CJK has no bold-weight tradition in UI faces and synthesised bold turns dense glyphs into blobs. Stepping 700/800 down to 600 keeps the hierarchy without the smearing. */ :lang(ja) :is(h1, h2, h3, h4, h5, h6, .fw-bold, strong, b), :lang(ko) :is(h1, h2, h3, h4, h5, h6, .fw-bold, strong, b), :lang(zh-Hans) :is(h1, h2, h3, h4, h5, h6, .fw-bold, strong, b), :lang(zh-Hant) :is(h1, h2, h3, h4, h5, h6, .fw-bold, strong, b) { font-weight: 600; } /* Arabic's ascenders and descenders are long, and its glyphs read small at a Latin size. */ :lang(ar) { font-size: 1.05em; line-height: 1.9; } /* CJK, Thai and Khmer have no spaces between words, so the browser cannot find a break and a long run overflows its container instead of wrapping. `anywhere` is correct for these scripts specifically — applying it globally would break Latin words mid-syllable. */ :lang(ja), :lang(ko), :lang(zh-Hans), :lang(zh-Hant), :lang(th), :lang(km) { overflow-wrap: anywhere; word-break: normal; /* Never leave a closing bracket or a punctuation mark alone at the start of a line — the CJK typesetting rule browsers apply only when asked. */ line-break: strict; } /* German, Finnish, Estonian, Latvian, Lithuanian, Dutch and Turkish build very long compounds ("Mitarbeiterbeurteilung", "työntekijätunnus") that overflow buttons and table headers sized for English. Hyphenation lets the browser break them at legal points using its own dictionary. */ :lang(de), :lang(fi), :lang(et), :lang(lv), :lang(lt), :lang(nl), :lang(tr) { hyphens: auto; overflow-wrap: break-word; } /* ------------------------------------------------------------------------- 3. RTL CORRECTIONS FOR THIS PRODUCT'S OWN RULES Everything below is scoped to [dir="rtl"] and mirrors a physical left/right declaration in site.css. Line references are to site.css at the time of writing; the SELECTORS are what matter if it moves. ------------------------------------------------------------------------- */ /* --- Sidebar (site.css ~2810–3093) ------------------------------------- */ /* The sidebar's own edge border and its active-item accent both sit on the side facing the content area, which swaps under RTL. */ [dir="rtl"] .sidebar, [dir="rtl"] .hrms-sidebar { border-right: 0; border-left: .45rem solid var(--sidebar-border); } [dir="rtl"] .sidebar .nav-link, [dir="rtl"] .hrms-sidebar .nav-link { border-left-width: 0; border-right: 2px solid transparent; } [dir="rtl"] .sidebar .nav-link.active, [dir="rtl"] .hrms-sidebar .nav-link.active { border-left-color: transparent; border-right-color: var(--sidebar-active-border); } /* Collapsible Settings groups: the group accent rail and its indent. */ [dir="rtl"] .sidebar-group, [dir="rtl"] .hrms-sidebar-group { border-left: 0; border-right: 2px solid var(--sidebar-group-accent); padding-left: 0; padding-right: .5rem; margin-left: 0; margin-right: .25rem; } /* Nav labels align to the reading start, not to physical left. */ [dir="rtl"] .sidebar .nav-link > span, [dir="rtl"] .hrms-nav-panel .navbar-user-btn { text-align: right; } /* A chevron pushed to the far edge by `margin-left:auto` must be pushed to the other far edge under RTL, or it lands on top of its own label. */ [dir="rtl"] .hrms-nav-panel .navbar-user-btn > svg, [dir="rtl"] .rid-foot-valid, [dir="rtl"] .ms-auto-icon { margin-left: 0; margin-right: auto; } /* --- Timeline (site.css ~3855) ----------------------------------------- */ /* The employee career trail hangs its dots off a rail on the start edge. */ [dir="rtl"] .timeline { padding-left: 0; padding-right: 1.5rem; } [dir="rtl"] .timeline::before, [dir="rtl"] .timeline-item::before { left: auto; right: 0; } /* --- KPI cards (site.css ~7306) ---------------------------------------- */ [dir="rtl"] html[data-portal-preset="red"] .kpi-card, [dir="rtl"] .kpi-card { border-left-width: 0; border-right: 4px solid var(--primary); } /* --- Quoted / callout blocks (site.css ~5616, ~5757) ------------------- */ [dir="rtl"] .callout, [dir="rtl"] blockquote, [dir="rtl"] .cms-quote { border-left: 0; border-right: 2px solid var(--border, #cbd5e1); padding-left: 0; padding-right: 1rem; } /* --- Lists inside CMS content (site.css ~2475, ~4202) ------------------ */ [dir="rtl"] body.public-cms-page details.demo-howto ol, [dir="rtl"] .cms-body :is(ul, ol) { padding-left: 0; padding-right: 1.15rem; } /* --- Form check / switch (site.css ~7937–7949) ------------------------- */ /* Bootstrap's RTL build handles .form-check itself; this mirrors the product's own compensating offsets, which the build knows nothing about. */ [dir="rtl"] .form-check:not(.form-switch) { padding-left: 0; padding-right: 1.9em; } [dir="rtl"] .form-check:not(.form-switch) .form-check-input { margin-left: 0; margin-right: -1.9em; } /* --- Button spacing (site.css ~8075) ----------------------------------- */ [dir="rtl"] .cms-btn + .btn { margin-left: 0; margin-right: .375rem; } [dir="rtl"] .btn-group-vertical .btn + .btn { margin-right: 0; } /* --- Cookie banner (site.css ~3690, ~3729) ----------------------------- */ [dir="rtl"] .hrms-cookie-btn-ghost { margin-right: 0; margin-left: auto; } /* ------------------------------------------------------------------------- RTL: things that must NOT flip. Direction mirrors reading order, not physics or identity. Flipping these produces the "translated by a machine" look that undermines trust in a payroll product more than an untranslated string does. ------------------------------------------------------------------------- */ /* Numbers, money, dates, times, durations, IDs and code are written left-to-right in every RTL locale. Without an explicit embedding, a string like "-1,234.50" or "08:30–17:00" is reordered by the bidi algorithm and displays with the sign or the range in the wrong place. */ [dir="rtl"] :is(.font-monospace, code, kbd, samp, pre, time, .tabular-nums, .metric-value, .kpi-value, .payslip-amount, .employee-id, .asset-tag) { direction: ltr; unicode-bidi: isolate; text-align: right; } /* Table cells holding figures keep LTR numerals but stay aligned to the column's reading edge. */ [dir="rtl"] td.numeric, [dir="rtl"] th.numeric, [dir="rtl"] .table .text-end { direction: ltr; unicode-bidi: isolate; text-align: left; } /* Progress bars, charts and media controls represent quantity and time, both of which run left-to-right regardless of script. A mirrored progress bar reads as "emptying". */ [dir="rtl"] :is(.progress, .progress-bar, .chart-container, canvas, .video-controls, .attendance-bar, .capacity-meter) { direction: ltr; } /* Brand marks and the ID-card face are artwork with a fixed composition — the card is printed, and print does not mirror. */ [dir="rtl"] :is(.navbar-brand, .brand-logo, .rid-scene, .idcard-face) { direction: ltr; } /* Directional glyphs that DO carry meaning about reading order should mirror; icon fonts do not do this automatically. Applied only to icons explicitly marked as directional so a "download" or "external link" arrow is left alone. */ [dir="rtl"] .icon-directional { transform: scaleX(-1); } /* ------------------------------------------------------------------------- 4. THE LANGUAGE SWITCHER Thirty options need a scroll container, and the options must be readable in their own scripts — see the `lang` attribute on each row in templates/localization/_switcher.html. ------------------------------------------------------------------------- */ .hrms-lang-switcher { position: relative; } .hrms-lang-menu { /* Tall enough to show a group and short enough to fit above the fold on a laptop. Without the cap the menu runs off the bottom of the viewport and the last locales are unreachable. */ max-height: min(70vh, 32rem); overflow-y: auto; overscroll-behavior: contain; min-width: 15rem; } /* The form is the menu's only child; it must not introduce its own box or the dropdown's padding doubles. */ .hrms-lang-form { margin: 0; padding: 0; } /* Options are