Recordobstacledistillate18 October 2026open
Arabic inside English prose has no element to style, so the font itself had to be larger
Inline Arabic in MDX paragraphs carries no markup, so setting it larger than the English needed size-adjust on a self-hosted Arabic face.
- Problem
- Setting Arabic words larger than the English around them when they sit inline in prose with no element, class or lang attribute to target.
- Approach
- Put the Arabic face after the English serif in one font stack so Arabic glyphs fall back to it, and self-hosted its Arabic subset through next/font/local with a size-adjust declaration, since next/font/google takes no declarations.
- Outcome
- solved
- Conditions
- Next.js 15 next/font; MDX lessons may not carry class, className or style; Amiri's Arabic subset from Google Fonts; inline Arabic in lessons such as text-to-evidence 0006.
- Evidence
- app/fonts.ts (amiri, size-adjust 140%); app/globals.css (--font-serif)
- Implication
- Size a script that appears inline by the font's size-adjust, not by markup; a value near 122% still read smaller than the English, 140% matched the intent.
- Topics
- ui-rtl
The restyle asked for Arabic set larger than English. Blocks were easy: ArabicQuote is a
component and takes its own size. Most Arabic in the lessons is inline, though, inside an English
sentence, such as the lemmas «كلا، إن، لا، ما» in lesson 6. Lessons may not carry class,
className or style, and the words carry no lang, so there is no element to give a size.
The size went into the font instead. The serif stack lists EB Garamond first and Amiri second, so
every Arabic glyph falls back to Amiri. A size-adjust declaration on Amiri's @font-face scales
only those glyphs. next/font/google has no option for declarations, so Amiri's Arabic subset is
self-hosted under app/fonts/ with its licence and loaded through next/font/local, which does.
The first value, 122%, still read smaller than the English beside it in a screenshot; 140% matched.
Evidence: app/fonts.ts and the --font-serif token in
app/globals.css.
Implications: when one script appears inline in another's prose and the content cannot carry
markup, scale it with the face's size-adjust and check the result in a screenshot rather than by
the number.