/* ========================================================================== HOUSE STYLE — arabic.css Loaded ONLY on ``. It contains fonts, size, leading and bidi isolation. It contains NO layout. Layout mirroring is the browser's job, driven by dir="rtl" and the logical properties in base.css. Anything that looks like `float: right` in here is a bug in base.css that somebody papered over on this side. ========================================================================== */ /* -------------------------------------------------------------------------- Faces Noto Naskh Arabic for running text: it is a true Naskh, it has the widest coverage of the three, and it sits comfortably beside Noto Sans for the English strings that appear inside almost every Arabic sentence in this manual (see the note below on why that happens so often). Amiri for headings: a typographically serious Naskh with real presence at display sizes. It is a Debian package (fonts-hosny-amiri), not a webfont — nothing is fetched at render time, which matters because a published page is served from a Pi on a factory LAN with no internet. -------------------------------------------------------------------------- */ html[lang="ar"] body { font-family: "Noto Naskh Arabic", "Amiri", "Noto Sans Arabic", serif; /* Arabic sits smaller than Latin at the same nominal size and its ascenders and descenders need more room. Both numbers are deliberate, not a nudge. */ font-size: 1.06em; line-height: 1.95; } html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] h4 { font-family: "Amiri", "Noto Naskh Arabic", serif; line-height: 1.45; font-weight: 700; } /* -------------------------------------------------------------------------- THE BIDI PROBLEM A PARTLY-TRANSLATED APPLICATION ACTUALLY HAS Most business applications are translated in patches: one screen is localised and the rest is not, and even inside the localised screen the names that come out of the database — jobs, customers, departments, project numbers — stay in whatever language they were typed in. So an Arabic sentence in a manual for one nearly always contains a run of Latin: اضغط على Complete لإنهاء المهمة Left to itself the bidi algorithm resolves the neutral characters around that run — spaces, brackets, full stops — against the paragraph direction, and a trailing punctuation mark or a bracketed pair jumps to the wrong end of the phrase. `unicode-bidi: isolate` on .ui (in base.css) fences each control name off so its neighbours cannot be dragged into it. `bdi` below is the same guarantee for anything else Latin that lands in Arabic prose — a project number, a file name, a URL. -------------------------------------------------------------------------- */ html[lang="ar"] bdi, html[lang="ar"] code, html[lang="ar"] .num { unicode-bidi: isolate; font-family: "Noto Sans Mono", ui-monospace, monospace; } /* Latin inside Arabic keeps a Latin face; inheriting Amiri would render it in a serif that was never drawn for it. */ html[lang="ar"] .ui { font-family: "Noto Sans", system-ui, sans-serif; font-size: 0.94em; } /* -------------------------------------------------------------------------- Numerals Western digits, deliberately, throughout the Arabic edition. The application prints Western digits everywhere — project numbers, task counts, timers, dates on the kiosk cards. A manual that renders Eastern Arabic numerals would show ٥ in the text beside a screenshot showing 5, and the reader has to translate between them on every step. Matching the screen beats matching the typographic convention. -------------------------------------------------------------------------- */ html[lang="ar"] { font-variant-numeric: lining; } /* The step number chip carries a digit and must stay upright and unmirrored inside a mirrored line. */ html[lang="ar"] .step__n, html[lang="ar"] .shot__pin { unicode-bidi: isolate; direction: ltr; } /* -------------------------------------------------------------------------- NOTHING INSIDE A SCREENSHOT MIRRORS — not the image, and not the markers drawn on it. The screenshot is a photograph of a left-to-right interface. Mirroring it would show the reader a screen that does not exist, and mirroring the pins over an unmirrored image would point them at the wrong control. The pins are positioned with physical `left`/`top` in base.css so that they do not move here. This block exists to say so — a future editor who "fixes" those to logical properties will silently break every callout in the Arabic edition and nothing will fail. -------------------------------------------------------------------------- */ html[lang="ar"] .shot { direction: ltr; } html[lang="ar"] .shot__cap { direction: rtl; text-align: start; }