Arabic clinic website checklist: RTL layout, bilingual pages and patient essentials
What to get right on an Arabic-first clinic website, from page direction and mixed Arabic and English text to bilingual pages, booking, privacy and launch tests.
Patients in Arabic-speaking markets expect a clinic website that reads naturally from right to left, not an English site with translated text dropped in. This checklist covers what to get right, with links to the standards behind each point.
Who this is for
This is for clinic owners, practice managers and designers building a website for a dental, family or specialist clinic whose patients read Arabic first. Folistead sells an Arabic RTL clinic template for Framer, named at the end of this article, so we have a commercial interest. The checklist applies whichever tool you use. For a deeper technical walk-through of direction, fonts, mirrored layouts and numerals, see our Arabic RTL clinic website checklist guide.
1. Set the direction for the whole page
The W3C's advice is simple: if the overall document direction is right-to-left, add dir="rtl" to the html tag, and below that use dir only on the rare occasions when the base direction changes (W3C, "Structural markup and right-to-left text in HTML"). With that one setting, text flows right to left, punctuation appears in the correct place, and table columns run from right to left.
Checklist:
The Arabic page declares Arabic as its language and right-to-left as its direction.
Navigation, cards and columns run right to left: the logo and first menu item start on the right.
Arrows that mean "next" or "back" point the right way for Arabic readers.
If your website builder cannot set the page direction, every row and text block has to be mirrored by hand. Check each layout: desktop, tablet and phone.
2. Handle mixed Arabic and English text
Clinic pages are full of opposite-direction content: phone numbers, prices, email addresses, doctors' names in Latin script, drug and device brand names. The W3C names formatted numbers such as phone numbers, email addresses and brand names among the common examples that need care (W3C, "Inline markup and bidirectional text in HTML"). Its advice is to isolate such phrases, for example with the bdi element or dir="auto", so they do not scramble the surrounding sentence.
Test these cases on the live page:
a phone number inside an Arabic sentence;
an Arabic sentence that ends with an English word, followed by a full stop;
opening hours such as 9:00–17:00 next to Arabic day names;
a price with a currency code.
If punctuation jumps to the wrong end of a line, the paragraph's direction is being worked out incorrectly. The CSS value unicode-bidi: plaintext makes the browser calculate an element's direction from its own text, without considering the parent's direction (MDN, "unicode-bidi"). That helps when editors type mixed text.
3. Choose Arabic fonts and spacing deliberately
Use a typeface designed for Arabic, with a matching Latin set for English words. IBM Plex Sans Arabic and Readex Pro are two examples on Google Fonts, both in its open-font-licence folder (IBM Plex Sans Arabic, Readex Pro).
Give Arabic body text generous line height, because of its tall letters and the dots above and below the line.
Keep letter-spacing at zero for Arabic text styles. Arabic letters join, and the W3C's Arabic & Persian Layout Requirements explain that Arabic text is stretched by extending the baseline between characters, which does not correspond to letter-spacing in non-cursive scripts.
Do not carry all-caps or italic styles from a Latin design system over to Arabic headings.
4. Build bilingual pages properly
Many clinics need both Arabic and English. Two complete pages work better than one page with both languages mixed together.
Mark each page with its language. WCAG 2.2 requires that the default human language of each page can be programmatically determined (Success Criterion 3.1.1), and that changes of language within a page are marked too (3.1.2).
Put a visible language switch in the header and footer, labelled in the target language ("English" on the Arabic page, «العربية» on the English page).
Tell search engines the pages are versions of each other. Google documents
hreflangannotations for this, including anx-defaultfallback (Google Search Central, "Localized versions of your pages"). Google also says it does not usehreflangor the HTMLlangattribute to detect a page's language; it uses algorithms on the content. So the Arabic page needs real Arabic text, not images of text.Write each page's title and meta description in its own language.
5. Put the patient's practical questions first
A clinic website is mostly used to answer a few questions quickly:
Which services do you offer, and is there a doctor for my problem?
Where are you, and when are you open, including evening and weekend hours?
How do I book: by phone, WhatsApp, an online form or a booking system?
Which insurance providers do you accept, if any?
What should I do in an emergency? State plainly that the website is not for emergencies and show the local emergency number.
Make phone numbers tappable links and show the clinic's location on a map.
6. Doctors, claims, privacy and advertising rules
Show each doctor's real name, specialty and qualifications. Never invent credentials, reviews or patient stories.
Use patient testimonials and before-and-after photos only with documented consent, and only where your health regulator allows them in advertising. Check the rules of the authority that licenses your clinic before you publish.
Booking and contact forms collect personal data. In Saudi Arabia, read the Personal Data Protection Law and its Implementing Regulation, published by SDAIA (SDAIA, "Policies & Regulations"). Ask only for what you need to book the appointment, and publish a privacy notice in Arabic.
7. Speed and phone layout
Many patients will open the site on a phone, often from a map or a messaging link. Aim for Google's "good" Core Web Vitals: Largest Contentful Paint within 2.5 seconds, Interaction to Next Paint of 200 milliseconds or less, and Cumulative Layout Shift of 0.1 or less (web.dev). Compress images, avoid autoplay video at the top of the page, and make text, not an image, the first thing a phone visitor sees.
Final test before launch
Read every Arabic page on a phone, top to bottom, as a patient would.
Check punctuation, numbers and English words inside Arabic sentences.
Tap every phone, WhatsApp, map and booking link.
Switch languages from every page and confirm you land on the matching page.
Check page titles and descriptions in both languages.
Remove all placeholder names, numbers and addresses.
A template that starts from these points
Zabarjad is our Framer website template for dental and family clinics, written Arabic-first. The Arabic home page reads right to left, with a matching English page and a language switch. It has desktop, tablet and phone layouts, Services and FAQ collections with Arabic and English fields, text styles in Readex Pro and IBM Plex Sans Arabic, and a small CSS fix (unicode-bidi: plaintext) so Arabic punctuation stays on the correct side. It costs $59 one-time for one website. You can preview it live before you buy.
It is a template: setup, content writing and a booking system are not included. Publishing on your own domain needs a paid Framer site plan; Zabarjad uses 2 CMS collections, which Framer's Basic plan currently allows. Our accounting-firm template and its licences are on the pricing page, and more about us is on the Folistead home page.