/* ===== Urdu (اردو) typography + RTL overrides for az.kngx.ca ===================================== Append AFTER style.css (or paste at the end of it). Copy fonts/*.woff2 next to the existing fonts/NotoSansGurmukhi*.ttf so the relative url("fonts/…") paths below resolve. Requires i18n.js to set (see i18n.ur.patch). Font: Noto Nastaliq Urdu 3.x (Arabic-script subset from @fontsource/noto-nastaliq-urdu@5.3.0), SIL Open Font License 1.1 (fonts/OFL.txt). Latin letters and 0-9 digits deliberately stay in the site's normal font (unicode-range), so "90–100 PSI", "13 mm", emails, hashes look the same as in English. */ @font-face { font-family: "Noto Nastaliq Urdu"; src: url("fonts/NotoNastaliqUrdu-arabic-400.woff2") format("woff2"); font-weight: 400 500; font-style: normal; font-display: swap; 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: "Noto Nastaliq Urdu"; src: url("fonts/NotoNastaliqUrdu-arabic-700.woff2") format("woff2"); font-weight: 600 800; font-style: normal; font-display: swap; 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; } /* --- Typography: Nastaliq is visually small and very tall (deep descenders, stacked letters) --- */ html.lang-ur, html.lang-ur body { font-family: "Noto Nastaliq Urdu", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 17px; /* base was 16px */ line-height: 2.1; /* base 1.45 clips Nastaliq descenders */ } html.lang-ur { --fs-s: 14px; --fs-m: 15px; --fs-b: 17px; --fs-l: 22px; --fs-xl: 30px; } html.lang-ur h1, html.lang-ur h2, html.lang-ur h3, html.lang-ur .t { line-height: 1.9; } html.lang-ur button, html.lang-ur .seg > a, html.lang-ur a.primary, html.lang-ur a.secondary, html.lang-ur .choice, html.lang-ur .rb-next { line-height: 1.8; padding-top: 6px; padding-bottom: 6px; } html.lang-ur .rc { line-height: 1.6; } /* robot control buttons: base line-height 1 */ html.lang-ur .rb-text { line-height: 2; max-height: calc(2em * 5); } html.lang-ur #bottomnav { line-height: 1.6; } html.lang-ur .small, html.lang-ur .muted.small, html.lang-ur .tiny { line-height: 1.9; } /* Never synthesize italics or letter-spacing on Nastaliq (breaks joining). */ html.lang-ur em, html.lang-ur i:not([class]) { font-style: normal; font-weight: 700; } html.lang-ur * { letter-spacing: normal !important; } /* --- RTL layout: flexbox/grid mirror automatically with dir="rtl"; these fix the hard-coded left/right --- */ html[dir="rtl"] .tile, html[dir="rtl"] th, html[dir="rtl"] td, html[dir="rtl"] .choice, html[dir="rtl"] .coin { text-align: start; } html[dir="rtl"] .banner { border-left: 0; border-right: 4px solid var(--warn); } html[dir="rtl"] .ok-banner { border-right-color: var(--ok); } html[dir="rtl"] .login-nudge { border-left: 0; border-right: 4px solid var(--btn); } html[dir="rtl"] .bar > i { transform-origin: right center; } /* progress fills from the right */ html[dir="rtl"] .ml4 { margin-left: 0; margin-right: 4px; } html[dir="rtl"] .brands { margin-left: 0; margin-right: 4px; } html[dir="rtl"] #backBtn { margin-left: 0; margin-right: 4px; } html[dir="rtl"] .person .tiny + .tiny { margin-left: 0; margin-right: 6px; } html[dir="rtl"] .ledger li.new { padding-left: 0; padding-right: 6px; } html[dir="rtl"] .dm-menu .menu { right: auto; left: 0; } /* bottom nav: grid columns run right→left, so the sliding indicator must move the other way */ html[dir="rtl"] .nav-ind { left: auto; right: 0; transform: translateX(calc(var(--i, 0) * -100%)); } html[dir="rtl"] .nav-badge { left: auto; right: calc(50% + 6px); } html[dir="rtl"] .toplink .nav-badge { right: auto; left: -4px; } /* robot: figure sits on the right in RTL, so the speech-bubble tail points right */ html[dir="rtl"] .robot-bubble { transform-origin: right center; } html[dir="rtl"] .robot-bubble::before { left: auto; right: -8px; border-right: 0; border-left: 8px solid var(--bg2); border-top-color: transparent; border-bottom-color: transparent; } html[dir="rtl"] body.focus .rb-side { right: auto; left: 12px; } @media (min-width: 900px) { /* desktop: robot panel docks on the left instead of the right (match the base breakpoint if it differs) */ html[dir="rtl"] body.robot-on main { padding-right: 0; padding-left: 440px; } html[dir="rtl"] #robot { right: auto; left: 20px; } } /* --- Things that must stay left-to-right inside an RTL page --- */ html[dir="rtl"] input[type="email"], html[dir="rtl"] input[type="password"], html[dir="rtl"] input[type="url"], html[dir="rtl"] input[type="number"], html[dir="rtl"] .copy-row code, html[dir="rtl"] code, html[dir="rtl"] .addr, html[dir="rtl"] #txh { direction: ltr; text-align: left; unicode-bidi: isolate; } /* Free-text written by people (chat, names, search) may be English or Urdu: let each paragraph pick its own direction. */ html[dir="rtl"] .msg, html[dir="rtl"] .msg-form textarea, html[dir="rtl"] #searchInput, html[dir="rtl"] .person .grow { unicode-bidi: plaintext; text-align: start; } /* Quiz choices and table cells are often pure Latin/number text ("1 3/8\" (35 mm)", "90–100 PSI"). In an RTL paragraph the bidi algorithm would show them as "(mm 35) \"3/8 1". plaintext = direction from the first strong letter. */ html[dir="rtl"] .choice, html[dir="rtl"] td, html[dir="rtl"] th { unicode-bidi: plaintext; text-align: right; }