Source: The United Arab Emirates Jaguar
page in English
Obviously, you need to put a lot of thought into the formatting of your body
text and other critical information. Rather than just mirroring the page, keep
in mind that the typography and visuals may need to change as details such as
the length of words or the visibility of your imagery might change. We’ll cover
more detail on this topic later.
Many websites use a horizontal scrollable bar that displays products or related
content in order to maximise engagement with users. But as with the header and
core content, you’ll need to ensure that the functionality of this element
reflects the overall direction of your pages. So, on an RTL web page, your
horizontal sidebar should move from right to left, with new options entering
from the left-hand side following a user’s click.
Thankfully, the bottom of your page should represent a simpler change. While you
need to consider the changes to typography just like with your primary content,
you should only need to mirror the footer after formatting the text
Adjusting your layout for a RTL website
That brings us to the practical ways that RTL web design differs from LTR
layouts. Remember that localisation doesn’t just mean translation and flipping
the page. You have to keep in mind how the transition will affect typography,
numbers, icons, and images.
Right-to-left script is not a one-to-one match for its LTR counterparts. For
example, if you’re setting up an Arabic website, many words will be shorter once
translated from English, meaning that you’ll need to carefully consider your
choice of font style and size in order to maintain readability. Additionally,
you should almost always avoid bolded text while italics are simply not used in
some languages, as is the case with Arabic. Finally, although the abbreviation
of dates is a common trend in English, the same cannot be said for RTL
Numbers experience a number of regional differences in RTL language-speaking
countries. Many use Western Arabic numerals, which are then read and formatted
in the same way as LTR websites and applications. Other nations predominately
utilise Eastern Arabic numerals while others even use a mixture. So, when
localising your digital experience, take the local numeric customs of your
target audience into consideration.
Typically, numbers are not mirrored and instead are still written left to right.
However, there are more complex cases. For example, in the automotive industry,
many car models include digits in their names. This means that while the text is
mirrored, the numbers are still read in the original direction. Handling both of
these elements on the same line presents a unique challenge.
Like with numbers, icons follow unique rules. Unlike numbers, these are
determined more by the intended purpose of the specific element rather than
Remember how certain legacy UI designs remain consistent regardless of the local
language? This applies to symmetrical icons, which have universally accepted
positions and should remain where expected rather than flipping them in line
with the text.
However, icons that provide directional details or depict either movement or
text direction should undergo mirroring to make sense on your new page. And make
sure to consider the regional messaging of certain icons. For example, while a
piggy bank might appropriately signify wealth generation on an English website,
it might not suit RTL digital design in the same way.
Similar to the text of a localised web page, it might seem that you can just
maintain or mirror the images of the LTR version. However, visuals offer their
As the length of your text changes during the translation process, it will
naturally alter the positioning and visibility of the desired images. Moreover,
some visuals that work for LTR language-speaking countries will not achieve the
same effect when applied on an RTL website or application. As a result, choosing
unique imagery for your RTL-localised version of a website or application almost
always represents the best course of action.
What should and should not be mirrored on an RTL website
As we’ve pointed out multiple times, you shouldn’t mirror every part of your
website or application when providing RTL language support. Knowing what needs
to be aligned with a RTL design is essential to localising correctly and often
changes from one element to the next.
Let’s start with your brand logo. While this frequently appears in the upper
left-hand corner of an LTR website, you need to place it on the opposite side to
match the layout of your RTL format. The same goes for any menu or navigation
buttons that enable your audience to navigate through the site as well as any
headings or icons related to specific fields in a form.