The Most Common RTL HTML and CSS Mistakes

The single most common pattern in this dataset: across 220 sites' analyzable CSS, only 5% use more logical directional properties (`margin-inline-start`, `inset-inline-end`, `text-align: start`) than physical ones (`margin-left`, `right`, `text-align: left`) — meaning 92%+ lean predominantly on physical properties, even on pages that correctly set dir="rtl".

This is the mistake with the largest long-term cost. Physical properties don't flip with direction — they require a maintained, parallel set of RTL overrides (either a separate stylesheet or [dir="rtl"] selector blocks) that has to be kept in sync with every future layout change. Logical properties flip automatically, eliminating that entire maintenance category.

Fix: replace margin-left/margin-right with margin-inline-start/margin-inline-end, replace left/right positioning with inset-inline-start/inset-inline-end, and replace text-align: left/right with text-align: start/end. All are supported in every current browser.

Among the 117 sites in this sample that reference a known Arabic-supporting web font family by name, 66% don't declare a generic fallback (sans-serif, serif, system-ui) after it in the same font-family value list.

If the custom font fails to load — a CDN hiccup, a blocked third-party request, a slow connection — a font-family declaration with no generic fallback leaves the browser to pick its own default, which is inconsistent across browsers and platforms and may not render Arabic well at all.

Fix: every font-family declaration referencing a custom Arabic font should end with a generic keyword: font-family: "Cairo", sans-serif; not font-family: "Cairo";.

45% of sites in this sample (99 of 220) don't include a canonical <link> in their initial HTML response. This isn't RTL-specific, but it's disproportionately relevant for Arabic sites that often serve both Arabic-script and transliterated URL variants of the same content, or Arabic/English versions of the same page — exactly the situation a canonical link exists to disambiguate for search engines.

Fix: add <link rel="canonical" href="..."> pointing to the authoritative URL for each page, especially anywhere multiple URL variants can reach the same content.

Across all 220 sites, only 56% of images (7,180 of 12,864 found) carry non-empty alt text. This is a baseline accessibility and SEO gap that applies to any site, but it compounds on Arabic pages where alt text is one of the few reliably-indexed text signals search engines get from image-heavy hero sections and product galleries common in the region's e-commerce and media sites.

Fix: treat missing alt text as a content gap, not just a technical one — every meaningful image needs a real, Arabic-language description, not a filename or an empty string.

16% of sites (35 of 220) declare an Arabic lang value on the root element without also setting dir="rtl" there. As covered in lang="ar" vs dir="rtl": What Each Attribute Does, these are independent declarations — language metadata being correct doesn't mean layout direction is.

Fix: whenever lang is set to an Arabic value on the root element, set dir="rtl" there too, unless there's a deliberate reason for the page's primary direction to differ from its primary language (rare, and worth a code comment explaining why if it happens).

For the full ranked breakdown and underlying data, see the [Arabic & RTL Web Adoption dataset](/arabic-web-stats/rtl-adoption), or run your own page through the [RTL Website Checker](/tools/arabic/rtl-website-checker).