/** * ARABIC TOOLS — RTL AND ARABIC TYPE * * Loaded only on /ar/ routes, by arabtools_ar_assets(). * * Deliberately short. Most of the .at-* CSS already uses logical * properties (margin-inline, border-inline-start), so it flips on its * own once dir="rtl" is on . What is here is the two things that * do not flip by themselves: * * 1. Type. The theme's Latin stack has no Arabic glyphs at all, so * without a stack of our own the browser substitutes whatever it * finds — usually Tahoma on Windows and Geeza on macOS, at a * different optical size from the Latin around it and sitting off * the baseline. Arabic also needs more line-height than Latin at * the same size, because the descenders are longer and the * diacritics sit above. * * 2. The handful of physical properties still in the codebase, plus * anything that must NOT flip — code, URLs, prices, version * numbers and Latin-script tool slugs are still left-to-right * inside an Arabic sentence, and a bare `direction: rtl` on a * container reverses them. * * The house rule applies: !important on the visual properties Astra * reliably hijacks (background, color, text-transform, list-style, * ::marker), and nowhere else. * * Changelog * 2026-08-12 Created. */ :root { --at-font-ar: "Noto Sans Arabic", "Geeza Pro", "Segoe UI", Tahoma, "Arial Unicode MS", sans-serif; } /* ── Type ─────────────────────────────────────────────────────── */ .arabtools-ar body, .arabtools-ar .at-page, .arabtools-ar .at-prose, .arabtools-ar .at-card, .arabtools-ar .at-hero, .arabtools-ar .at-footer, .arabtools-ar .at-pricing { font-family: var(--at-font-ar); } .arabtools-ar .at-prose, .arabtools-ar .at-card__text, .arabtools-ar .at-faq__item { line-height: 1.9; } .arabtools-ar h1, .arabtools-ar h2, .arabtools-ar h3, .arabtools-ar .at-card__title, .arabtools-ar .at-hero h1 { font-family: var(--at-font-ar); line-height: 1.45; /* Arabic has no case, so a Latin type scale's tight tracking on headings does nothing useful and closes up the joins. */ letter-spacing: 0; } /* ── Things that must stay left-to-right ──────────────────────── */ /* A tool slug, a price, a version, an email, a code sample and a URL are Latin-script objects inside an Arabic sentence. `isolate` keeps each one whole and stops it reordering the run around it — which is what a bare direction change on the parent would do. */ .arabtools-ar code, .arabtools-ar kbd, .arabtools-ar samp, .arabtools-ar pre, .arabtools-ar .at-pricing__amount, .arabtools-ar .at-pricing__period, .arabtools-ar .at-badge, .arabtools-ar .at-card__mark, .arabtools-ar [class*="__url"], .arabtools-ar [class*="__price"] { direction: ltr; unicode-bidi: isolate; } /* Numbers line up in columns whichever script surrounds them. */ .arabtools-ar .at-pricing__table td, .arabtools-ar .at-pricing__amount { font-variant-numeric: tabular-nums; } /* ── Physical properties still in the codebase ────────────────── */ .arabtools-ar .at-pricing__table th[scope="row"] { text-align: right; /* The bullet and indent added for the comparison table are set in physical left-hand properties in monetisation.css. Mirror them rather than editing that file, so the English page keeps exactly the layout that was reviewed. */ padding-left: .9rem; padding-right: 2.2rem; } .arabtools-ar .at-pricing__table tbody tr:not(.at-pricing__group) th[scope="row"]::before { left: auto; right: 1.1rem; } .arabtools-ar .at-pricing__table tbody tr.at-pricing__group th, .arabtools-ar .at-pricing__grouplede, .arabtools-ar .at-pricing__rownote { text-align: right; } .arabtools-ar .at-aff, .arabtools-ar .at-note { border-inline-start-width: 4px; border-inline-end-width: 1px; } .arabtools-ar ul.at-list, .arabtools-ar .at-prose ul, .arabtools-ar .at-prose ol { padding-left: 0; padding-right: 1.3rem; } /* ── The language switcher ────────────────────────────────────── */ /* Moved to site-chrome.css, which loads on every page. Living here was the bug: the switcher is drawn on English pages too, and ar.css is enqueued only on /ar/ — so the one link out of the English site was an unstyled 41px word at the very bottom of the page, which is not findable and was reported as "I can't see how to switch language". Nothing language-specific about a pill; it belongs with the rest of the site chrome. */ /* ── An app tool keeps its own direction ──────────────────────── */ /* A `layout: app` tool is a whole document in a srcdoc iframe and sets its own dir — the behaviour log is already RTL, the timetabler is LTR by design. Neither should be flipped from out here, and the frame itself is a box, not text. */ .arabtools-ar .at-appframe, .arabtools-ar .at-appframe__frame { direction: ltr; } @media print { .at-langbar { display: none; } }