Arabic and RTL

Hasanat projects are Arabic first. Arabic is not a translation added at the end, and the Arabic interface is not the English one mirrored.

Language and direction in HTML

Set lang and dir on the html element: lang="ar" dir="rtl" for Arabic and lang="en" dir="ltr" for English. The starter’s Layout.astro does this from the page’s language.
Direction is semantic HTML, not just CSS.
For user-generated text in an unknown language, use dir="auto", or the <bdi> element for names inside sentences.
URLs, commands, code, and Latin numbers inside Arabic text can be reordered. Wrap them in an element with dir="ltr" or in <code>, and test with real text.

Translations in the starter

The starter supports Arabic (the default) and English:

Pages live in src/pages/ar/ and src/pages/en/, and the root redirects to /ar/.
Strings live in src/i18n/ar.json and src/i18n/en.json. Add every new string to both files; do not hardcode text in pages.
src/i18n/utils.ts provides useTranslations(locale) for strings, getDirection(locale) and isRTL(locale) for direction, and getTranslatedPath(path, locale) for the same page in the other language.

---
import { useTranslations } from "@/i18n/utils";

const t = useTranslations("en");
---
<h1>{t("hero.title")}</h1>

Logical CSS properties

Use logical properties instead of left and right, so the interface works in both directions without changes:

Don’t use	Use instead
`ml-4`	`ms-4`
`mr-4`	`me-4`
`pl-4`	`ps-4`
`pr-4`	`pe-4`
`left-0`	`start-0`
`right-0`	`end-0`
`text-left`	`text-start`
`text-right`	`text-end`
`border-l`	`border-s`
`border-r`	`border-e`
`rounded-l-lg`	`rounded-s-lg`
`rounded-r-lg`	`rounded-e-lg`

In plain CSS: margin-inline-start instead of margin-left, padding-inline-end instead of padding-right, and inset-inline-start instead of left.

What does not flip by itself

Arrows and directional icons: a “next” arrow points left in Arabic. Flip it, but do not flip icons without a direction.
Reading order: check that the order of elements follows Arabic reading logic instead of being a visual mirror of English.
Numbers and dates: choose one clear format and test it with the surrounding text.
Images and illustrations that contain text or direction.

Type and writing

Use a clear Arabic typeface such as IBM Plex Sans Arabic. See the design system.
Use a generous line height, and never add letter spacing to Arabic.
Write simple Modern Standard Arabic, short sentences, and one idea per paragraph.
Ask a native speaker to review both languages, as in the translation review task.

Before you deploy

Every page has the correct lang and dir.
No left or right properties in styles unless intended.
Pages work at 360px wide and with text zoomed to 200%.
You tested real names, URLs, and numbers inside Arabic text.
Arrows and directional icons are right in both languages.
Every string exists in both translation files.