/* The Arabic-script landing pages: Urdu (/ur/) and Arabic (/ar/). * * Both are right to left and both are set in the same naskh face, so they * share one stylesheet rather than keeping two copies that drift. Loaded on * top of site.css and home.css. Three jobs. * * 1. An Arabic face that covers the whole script. site.css already declares * 'Noto Sans Arabic', but the file behind it is a subset cut to the few * dozen characters in the language chips, while its unicode-range claims * the entire block. Any other Arabic character matches that range, finds no * glyph and renders as a blank box rather than falling back to a system * font. A page written in the script needs the whole block, so it gets its * own file under its own family name. * * Urdu shipped first in Noto Nastaliq Urdu, the traditional face for * running Urdu. The owner rejected it on sight, and he was right: nastaliq * slopes down through most of a line's height, so every heading and * paragraph needed close to double leading and the page went soft and * sprawling. This is naskh, which is what Google, Meta and most Urdu and * Arabic software interfaces use, and it sits on the grid the site was * drawn for. * * 2. Room for the script, but not much. Arabic hangs dots below the line and * stacks them above it, so the Latin headline leading of 1.05 still clips. * These are looser than Latin and tighter than the Bangla page. * * 3. The last physical directions. home.css uses logical properties, so the * layout mirrors itself from with no help. What is left is * the handful of things direction cannot infer: which way an arrow points, * which edge an image is cropped to, and which corner a menu drops from. */ @font-face { font-family: 'Noto Sans Arabic Text'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/noto-sans-arabic-text-v1.woff2) format('woff2'); 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; } /* The script comes from the new face; Latin runs (Lipo, Pro Plus, $7.99, AGENTS.md) fall straight through to the brand fonts, so the page keeps its voice. Geeza Pro is on every Mac and covers the swap while the file is in flight. */ body.lp { font-family: 'Noto Sans Arabic Text', 'Instrument Sans', 'Geeza Pro', 'Noto Naskh Arabic', system-ui, sans-serif; } body.lp h1, body.lp h2, body.lp h3, body.lp .btn, body.lp .lp-tier .tn, body.lp .lp-tier .price, body.lp .lp-statline .k, body.lp .lp-saved-cell b { font-family: 'Noto Sans Arabic Text', 'Bricolage Grotesque', 'Geeza Pro', system-ui, sans-serif; letter-spacing: 0; } /* Leading. Latin can sit at 1.05 because nothing reaches far above the cap height; Arabic hangs dots under the line and stacks them over it. */ body.lp .lp-hero h1 { line-height: 1.38; } body.lp .lp-shead h2, body.lp .lp-row h2, body.lp .lp-final h2 { line-height: 1.4; } body.lp .lp-step h3, body.lp .lp-card h3, body.lp .lp-ex-head h3 { line-height: 1.5; } /* Body copy needs the same room, a little more of it. */ body.lp .lp-lead, body.lp .lp-shead p, body.lp .lp-row p, body.lp .lp-step p, body.lp .lp-card p, body.lp .lp-ex-text, body.lp .faq .ans p, body.lp .lp-modelist span, body.lp .foot-brand p { line-height: 1.9; } /* The small mono labels are set in JetBrains Mono, which has no Arabic glyphs, and uppercase and wide tracking mean nothing in a joined script. The three writing-mode names keep the mono treatment, because those stay in English. */ body.lp .eyebrow, body.lp .lp-ex-tag, body.lp .lp-step .n, body.lp .lp-only, body.lp .lp-tag, body.lp .lp-saved-cell span, body.lp .lp-statline .v, body.lp .lang-chip .e, body.lp .foot-col h3 { font-family: 'Noto Sans Arabic Text', 'JetBrains Mono', monospace; letter-spacing: .02em; text-transform: none; } /* ------------------------------------------------------ right to left -- */ /* The hero screenshot is wider than its column and runs off the outer edge of the page. Mirrored, that outer edge is the left one, and the part of the picture that falls off it is the app's own sidebar: the Lipo name and the list of features, which is the half that tells a first-time reader what they are looking at. So this page keeps the whole screenshot on the page instead. It is the one place where mirroring costs more than it returns, because the picture is itself a left-to-right thing. */ html[dir="rtl"] body.lp .lp-hero-shot { margin-inline-end: 0; } /* The rail arrows are drawn pointing left and right, and no amount of direction on the parent turns a chevron around. Previous now points right. */ html[dir="rtl"] body.lp .lp-ex-btn svg { transform: scaleX(-1); } /* The wide feature image is cropped to the edge the text starts from. */ html[dir="rtl"] body.lp .lp-card.wide img { object-position: right center; } /* The language menu hangs from the nav's own corner, which has moved. */ html[dir="rtl"] .lang-pick ul { right: auto; left: 0; } /* Latin runs inside an Arabic-script sentence: file names, commands, product names. The bidi algorithm gets the order right on its own, but a code span reads better with the space kept on both sides of it. */ html[dir="rtl"] body.lp code { unicode-bidi: isolate; } /* The calculator's two fields sit in a fixed grid with a nowrap label. These labels run longer than their English originals and squeeze the number until it loses a digit, so the label may wrap and the field may not shrink. */ html[dir="rtl"] body.lp .lp-save-inputs label { white-space: normal; } html[dir="rtl"] body.lp .lp-save-inputs input { width: 4.4em; flex: 0 0 auto; }