RTL Website Design: Best Practices for Dari and Pashto

RTL website design means building a site so that Dari and Pashto read naturally from right to left: the layout mirrors, text aligns to the right, and menus, icons and forms follow the reader's eye. Doing it well takes more than adding dir="rtl" to a page. It needs logical CSS, fonts that render the Persian-Arabic script cleanly, and careful handling of mixed English words, numbers and phone numbers.

Key Takeaways

• Set lang and dir on the html element for every language version, not with scattered CSS overrides.
• Use CSS logical properties (start and end instead of left and right) so one stylesheet serves both directions.
• Choose fonts that support every Pashto letter, and give Dari and Pashto text more line height than English.
• Mirror directional icons and layouts, but leave logos, media controls, numbers and Latin text alone.
• Test with real content on real phones before launch, not with English placeholder text.

What Does RTL Website Design Actually Involve?

RTL website design is the practice of making the whole interface, not just the paragraphs, behave correctly for right-to-left languages. In Afghanistan that means Dari and Pashto, and often both alongside English on the same site.

A properly built RTL page flips the reading order of the layout. The logo usually moves to the top right, the main navigation starts from the right, the sidebar swaps sides, breadcrumbs run right to left, and "next" arrows point left. Form labels sit to the right of their fields, and error messages appear where a right-to-left reader expects them.

What it is not: translating the English text and right-aligning it. A site that does only that looks broken to native readers. Punctuation lands on the wrong side, phone numbers scramble, and icons point the wrong way. Visitors notice immediately, and many will assume the business is careless. For businesses serving customers in Kabul, Herat, Mazar-i-Sharif or Kandahar, a clean Dari and Pashto experience is often the first signal of trust.

How Should You Set Direction and Language in the Code?

Set the language and direction once, at the top of the document, for each language version. On the Dari version the html element should carry lang="fa-AF" and dir="rtl"; on the Pashto version lang="ps" and dir="rtl"; on English, lang="en" and dir="ltr". Browsers, screen readers and search engines all read these attributes.

In a Next.js project this is usually done in the root layout, which reads the current locale from the URL and sets both attributes. Avoid the common shortcut of keeping dir="ltr" on the page and right-aligning text with CSS. It breaks table column order, flexbox order, scrollbars and form behaviour.

Each language should also live at its own URL, such as /fa/ and /ps/ or a subdomain, so search engines can index it. That connects directly to hreflang tags, which we cover in our guide to hreflang for RTL websites, and to the wider strategy in multilingual SEO for Dari, Pashto and English.

Why Use CSS Logical Properties?

Logical properties let one stylesheet work in both directions because they describe start and end rather than left and right. Instead of margin-left you write margin-inline-start; instead of text-align: left you write text-align: start. When dir changes, the browser flips everything for you.

Practical rules we follow on every multilingual build:

• Replace left and right in margins, padding, borders and positioning with inline-start and inline-end equivalents.
• In Tailwind CSS, use the ms-, me-, ps- and pe- utilities, and the rtl: variant only for genuine exceptions.
• Let flexbox and grid follow the document direction rather than reversing them by hand.
• Check transforms and animations, such as slide-in menus and carousels, because translateX values do not flip automatically.
• Keep a short list of components that need RTL-specific tweaks and review them each time the design changes.

This approach is cheaper to maintain. Teams that hard-code left and right end up with two diverging stylesheets and bugs that only appear in one language.

Which Fonts Work Best for Dari and Pashto?

The best fonts for Dari and Pashto are those that cover the full character set, render cleanly on low-end Android phones, and stay light enough to load on slow mobile data. Open-source families such as Vazirmatn, Noto Naskh Arabic and Noto Sans Arabic are common starting points, but you must check them against your own content.

Pashto is the usual weak point. It uses letters that Persian-focused fonts sometimes miss or draw poorly, including ټ، ډ، ړ، ښ، ږ، ځ، څ، ڼ، ګ and ۍ. Before committing to a font, render a page of real Pashto text and look for empty boxes, fallback glyphs or uneven joins.

Typography rules that help the Persian-Arabic script:

• Give body text more line height than English, typically around 1.7 to 1.9, because the script has tall ascenders and deep descenders.
• Increase font size slightly; text that is readable at 16px in English often feels small in Dari and Pashto.
• Never add letter-spacing to Dari or Pashto text. It breaks the joins between letters.
• Avoid fake italics and all-caps styles, which have no meaning in this script.
• Subset fonts and load only the weights you use, so a page does not wait on several hundred kilobytes of font files.

What Should Mirror in an RTL Layout, and What Should Not?

Mirror anything that shows direction or sequence, and leave anything that represents a real-world object or a fixed convention unchanged. Getting this wrong is one of the most visible RTL mistakes.

Mirror: back and forward arrows, chevrons in breadcrumbs and accordions, progress steps, sliders, the side a drawer menu opens from, and the order of columns in a layout.

Do not mirror: logos, photos, video play and pause buttons, checkmarks, clocks, charts with a time axis that your audience reads left to right, and any embedded English text. A search magnifying glass or a phone icon also stays as it is.

How Do You Handle Mixed English, Numbers and Dates?

Wrap any run of Latin text, numbers, phone numbers, email addresses and codes so the browser treats it as left-to-right, and let the surrounding sentence stay right-to-left. The HTML bdi element, or a span with dir="ltr", does this reliably. Without it, a number such as +93 784 966 018 can display with its plus sign at the wrong end.

Other details that matter:

• Decide whether to show Western digits or Eastern Arabic-Indic digits, and be consistent. Many Afghan users type both, so forms should accept both and normalise them before saving.
• Normalise the Arabic and Persian forms of the letters ی and ک in search, or users will not find products they can see on the page.
• Show dates in the format your audience expects. Solar Hijri dates are common in Afghanistan, while diaspora visitors may prefer Gregorian; showing both on bookings and invoices avoids confusion.
• Keep brand and product names like WhatsApp or Google in Latin script where that is how people recognise them.

RTL Testing Checklist Before Launch

Run this checklist on every language version before going live:

1. Open each page with real Dari and Pashto content, not translated placeholder text.
2. Check that the header, menu, footer and breadcrumbs start from the right.
3. Fill in every form in Dari and Pashto, including error states.
4. Type phone numbers and email addresses into forms and confirm they display correctly.
5. Confirm directional icons are mirrored and logos and media controls are not.
6. Test on a low-cost Android phone over mobile data, not only on office Wi-Fi.
7. Switch languages from every page and confirm you land on the equivalent page.
8. Check page titles, meta descriptions and social sharing previews in each language.
9. Test with a screen reader to confirm the language is announced correctly.

On projects like the Etrat Elm Educational Center website, admissions forms and course pages had to work equally well in all three languages, and this kind of checklist is what catches the small bugs before parents and students do.

Work With Sheen

Sheen designs and builds multilingual Next.js websites with English, Dari and Pashto treated as equals from day one, not bolted on later. If you need a new site or want your current RTL version fixed, see our web design service or contact us at info@sheen.af or +93 784 966 018.