Skip to content
Arabesque for Zola

Native support for RTL content

How the theme lays out Arabic: mirrored layout, joined letters, isolated numbers, and the type to match.

1 min read

A page in Arabic isn’t a page in English turned around. Some things mirror, and some never do; the theme follows the design system’s rules for both.

What mirrors🔗

The layout: the header’s title moves to the right, its tools to the left; “On this page” sits on the right; Previous is on the right and Next on the left. Arrows and chevrons point the way the text reads.

What doesn’t🔗

Numbers, code, the pattern and anything with a fixed direction of its own. A number inside an Arabic sentence is isolated, so its digits stay in order: the theme puts dates, counts and reading times in <bdi>.

The type🔗

RoleLatinArabic
InterfaceJostIBM Plex Sans Arabic
HeadingsJostKufam
ReadingNewsreaderAmiri
CodeIBM Plex Mono(system)

Each script falls through to its own face, character by character. Arabic is set a little larger, with more leading, never tracked, and never in capitals: it has none.

Read the same post in Arabic.

Back to top