Why RTL Design Is Not Just Mirroring

The conventional advice is to design your layout in English, then flip it for Arabic using dir="rtl" and call it done. This advice is repeated confidently by people who have never actually read an Arabic website with a native speaker.

Mirroring solves the direction problem. It does not solve the composition problem. These are different problems.

What changes when you mirror

When you apply dir="rtl" to a Latin layout, the reading direction reverses. Text anchors to the right. Flex rows reverse. Icons that point right now point left. The structural skeleton of your layout has been flipped. This is correct and necessary.

What does not change: the visual weight distribution. In a Latin layout, the left side of the viewport carries most of the compositional gravity — headlines anchor left, the primary image typically sits left, the first element the eye encounters is on the left. When you mirror this layout, you have reversed the direction of the text but you have not rebalanced the composition. The visual hierarchy now works against the reading direction.

What actually needs to be redesigned

Three things must be intentionally reconsidered — not automatically reversed — when designing for RTL.

The anchor points. In Arabic, the eye enters the page from the right. The primary information — the headline, the property name, the brand mark — should anchor to the right, not just be technically right-aligned. This means reconsidering which column the most important content lives in, not just flipping the columns.

The image placement. In a two-column layout with text left and image right, mirroring gives you image left and text right. For an Arabic layout, this is often structurally correct — the text anchors to the reading-start side. But the image needs to be reframed as well. A photograph with a strong subject on its left half will read correctly in LTR and feel off-balance in RTL. The image selection and cropping decision is part of the RTL design process.

The typeface. Most Latin typefaces have Arabic unicode support added as a secondary concern. The Arabic characters in these fonts were drawn to harmonise with the Latin at the technical level — matching x-heights, weight distributions — but not at the cultural level. Arabic type has its own tradition of proportion and rhythm. A font that was chosen for its silence in English will not be silent in Arabic unless it was designed in that tradition from the beginning. We select Arabic typefaces independently, then confirm their compatibility with the Latin typeface used in the same layout.

What this means for Project 07 templates

Arabic-ready templates in this library carry that label because they were designed in both directions from the beginning of the layout process — not because dir="rtl" was added at the end. The grid decisions, the image placement, the type selection — each was made while holding both reading directions in mind simultaneously.

This is slower. It is also the only way to build a template that a native Arabic speaker will not immediately feel is a translated product. In the GCC market, that distinction is the difference between a tool and an object.