Build Design Systems With Penpot Components
Penpot's new component system for building scalable design systems, emphasizing designer-developer collaboration.

medium bookmark / Raindrop.io |
Localization, the process of adapting a website to a particular locale, is essential for any interface, even if only a small amount of content is there. As different locales and different language groups have various features, developers must take into account these differences when creating a website. Some of these features may be difficult to understand, especially without the help of a native speaker. These features are particularly evident when it comes to designing and developing websites for the Middle Eastern market.
Demand for the creation of right-to-left (RTL) websites has grown over the years due to the fact that Arabic is the 4th most popular language globally. According to Arab Media Outlook, 60% of Arabic speakers prefer browsing internet content in Arabic. The lack of currently available content in Arabic and the existing need for this content among users is sure to continue this growth.
Left-to-Right direction
Right-to-Left direction
We’ve already taken a closer look at the peculiarities of developing RTL websites for the Arabic market in a recent blog post. In this post, we’ll be focusing our attention on some distinguishing features of RTL design.
The creation of web services and localization of already existing products for the Middle Eastern market is stipulated by certain features that can differ vastly from English (left-to-right) websites. The set of rules and design solutions used for LTR websites are of little value when developing websites for an Arabic RTL audience. This is because RTL websites require a different structure, typography, and imagery. At first glance, it might seem like an Arabic website is just a mirrored copy of an English one. However, it can involve a lot of effort to make a page with mirrored content appear properly on a screen.
SteelKiwi has already developed a number of RTL projects and we will be sharing our experience, including potential problems and solutions, below.
The main and most obvious difference between LTR and RTL languages is seen in the direction of writing. In RTL languages, writing and reading is done from right to left. This directional change affects the structure of the website, as well as typography, icons, and images.
To design an RTL project, we use a principle that seems simple at first. We flip or mirror every piece of content, with a few key exceptions. To understand what to mirror and what to change entirely, it’s important to imagine the motion of time which flows from right to left in Arabic. For example, a list of icons that displays a specific sequence should start from the right side on an RTL website.
With the help of some basic rules, designing an Arabic website can be fairly straightforward. However, when multilingual platforms are involved, it’s crucial to plan out the architecture of the projects properly in order to avoid language conflicts when switching from LTR to RTL languages.
When beginning work on this type of project, developers should spend time designing both LTR and RTL versions since each of these is equally important for a successful end result.
Proper attention should be given to Arabic typography. For the projects we’ve worked on, we’ve preferred to use Noto font which is recommended by Google Guidelines. To maintain easy readability, bold typeface should be avoided. Italicized font is also not used in Arabic.
Other typographic features to take into consideration include:
There are further distinctions with Arabic when it comes to numbers. Most Arab countries use the more traditional Western Arabic numerals. However, some countries like Iran and Afghanistan, use Eastern Arabic numerals more prevalently. Both numerical systems are used in Egypt and Sudan. Western Arabic numerals are slowly becoming increasingly popular, even in more conservative Arab countries like Saudi Arabia. Currently, Western Arabic numerals are used in North Africa.
As the use of numerals can differ based on the region, this feature is important to consider when localizing dates and icons and should match what is most commonly used by the locale.
Mirroring icons in an Arabic interface should be done with proper caution. Sometimes mirroring or flipping isn’t necessary and sometimes it is. Basic guidelines are as follows:
Not only do images make a website visually attractive, but they also convey a certain idea. Choosing an image requires appropriate selection, taking into account cultural peculiarities when it comes to perception.
Banners for the Arabic version of a website can be mirrored, but best practices recommend selecting individual images for each version of a website instead. Simply reflecting a horizontal image may result in distorted display when switching between LTR and RTL versions of the website.
Not all interface elements need to be mirrored. Below is a comprehensive overview of elements that may be found in a website’s layout and whether or not these should be mirrored in RTL projects.
When designing and developing an RTL website, the decisions that need to be made can oftentimes be confusing for those used to designing LTR projects. Applying a mirrored structure should help those starting out ease into the transition and, by following some of the tips we’ve outlined above, we hope designers and developers will be able to succeed when creating an RTL project.
Find some useful tips and tricks for RTL development in our previous article.
If you have any questions about RTL development or design or if you’d like to get started on an RTL project, get in touch and we will be happy to help!
AI-driven updates, curated by humans and hand-edited for the Prototypr community