
Targeting website visitors who speak right-to-left (RTL) languages?
Then you’ll not only need to translate your website to these languages, but also adjust its design to accommodate the RTL format. And needless to say, this endeavor will pose a larger challenge than the standard left-to-right (LTR) translation project.
That’s because there are nuances to proper RTL formatting. For one, you can’t just highlight all your text, select the right-align icon to right-align such text, then call it a day. Some elements will also need to be flipped (or “mirrored”), while others don’t. Get things wrong, and any native RTL-language speaker will be able to spot the error immediately. Not the best way to make a good impression.
Apart from that, you’ll want to help search engines serve your RTL web pages to RTL-language speakers so you get quality organic traffic (and conversions).
Keep reading as we share seven expert tips to help you optimize your website for an RTL language-speaking audience in the most efficient way possible.
RTL is short for “right-to-left,” and refers to languages with script written from the right side of the page toward the left. RTL languages include:
Mainstream web design practices largely cater to LTR languages. So if you’re designing a website with RTL language content, you’d need to use RTL web design – in other words, web design practices that help provide a pleasant viewing experience for RTL language content.
For example, you might need to mirror your headings, buttons, and other page elements to display them from right to left. “Mirroring” can involve:
(More on mirroring later!)
When you have an RTL website, you cater to the needs of website visitors who communicate in RTL languages. This is no small segment of global website visitors, and it is only increasing over time.
Just take the United Arab Emirates (UAE), for example, where online platform merchants surveyed by Statista reported experiencing an average of 26% increase in e-commerce activity in 2020. With Arabic being the official language of the UAE, and an RTL language, you’ll want to display your website in RTL format if you’re eyeing a slice of the UAE market.
Then, by designing your website with RTL support in mind, you stand to:
To undertake RTL web development and design, you’ll want to know a few expert tips for getting it right. Well, we’ll be sharing not one, or two, but seven of them here!
Then, pair these tips with Weglot. Our website translation solution not only takes care of the translation side of things but will also help you get the best results as you implement RTL web design for your website.
As mentioned earlier, mirroring is an essential aspect of converting an LTR website into RTL format. It involves taking page elements, such as words, headings, icons, and buttons, and flipping them horizontally to be read from right to left.
Elements that you’ll want to mirror include:
That said, not all LTR language elements must be mirrored to RTL. Examples of elements that don’t need to be mirrored include:
There’s more to accurate RTL web design than simply flipping icons and text. For one, certain concepts present in Western cultures don’t translate well to the culture of societies that use RTL languages. If your website text or graphics include such concepts or imagery, try to replace them with more culturally appropriate alternatives.
For instance, if you’re making your website available in Arabic, which is predominantly used in Muslim-majority countries, displaying images of a piggy bank may look out of place. That’s because pigs are seen as unclean animals in Islam. So instead of displaying an image of a piggy bank to communicate the idea of storing money in a container, for example, you could replace the image with a more culturally neutral one of a jar of coins.
In addition, bear in mind that Arabic isn’t written or displayed in the same way in all Arab countries. Numerals are a good example of this: some countries use Western Arabic numerals (which are the 0 to 9 numerals typically used in the Western world). Meanwhile, others use Eastern Arabic numerals. So as you’re designing your RTL website, be sure to localize your content to match the culture of the specific target country, and not just according to the RTL language in general!
Not all fonts are RTL language-compatible and may display vertical white rectangles known as “tofu” if they cannot render a certain RTL-language character. To prevent such a situation, use multilingual fonts designed to support multiple languages (including RTL ones). Google Noto is one such commonly used multilingual font.
Alternatively, set up your website to display languages in different fonts. You could display English-language content in one font, and RTL-language content in another font that specially caters to that writing system.
Also, be aware that other languages may not bold or italicize text the same way that English does. Neither may they use abbreviations. So after you’ve picked a suitable font for your RTL content, check that your content is displayed and formatted appropriately. You should also test the readability of your RTL website text and adjust your font sizes and line heights as needed.
Hreflang tags are HTML code snippets that tell search engines which language version of a web page should be shown to users with certain language and regional settings. You’ll want to implement them on your website if you have separate language versions of your web pages for different geographical audiences. Then, you'll have to check your hreflang tags to see if they're implemented correctly, too.
For example, if you have a web page with the URL “http://www.example.com/us/” for English speakers from the United States, that page should contain this hreflang tag:
<link rel=“alternate” hreflang=“en-us” href=“http://www.example.com/us/” />
And if you have an Arabic version of the same web page with the URL “http://www.example.com/ar/” for Arabic speakers from Egypt, that page should include this hreflang tag:
<link rel=“alternate” hreflang=“ar-eg” href=“http://www.example.com/eg/” />
Hreflang tags can be tedious to implement manually, but Weglot automatically adds hreflang tags to your web pages if you’re using it to translate your website content.
With Arabic script featuring dots below certain letters, underlining hyperlinks – like what you’d normally do for English-language hyperlinks – can reduce the visibility of these dots. This, in turn, affects your text’s readability, so you’ll want to distinguish hyperlinks from regular text in a different way.
For example, write custom Cascading Style Sheets (CSS) rules to display a semi-transparent box shadow under hyperlinked text. You can also use CSS to have your browser skip the underlining of Arabic alphabets that contain dots below their central parts.
As you convert your LTR website to RTL format, you’ll probably have to translate your (LTR) website content as well. And while translating such content manually is one option, this can get quite time-consuming.
The quicker and more efficient approach is to automate the website translation process using a solution like Weglot. Once you’ve added Weglot to your website, our automatic workflow kicks in to identify all website content. Using machine learning technology, it then instantly translates such content into your specified RTL languages.
Weglot automatically detects – and translates – all new content you add to your website, which is helpful for creating translated versions of your web pages instantly. For consistent LTR to RTL language translation, you can also set glossary rules within Weglot, so you always translate certain words in a certain manner and never translate others.
Like with any other website modification, conduct a thorough test of your RTL website before making it publicly accessible. You can:
If your tests throw up any issues, fix them before making your RTL website live!
As mentioned earlier, Weglot provides a convenient solution for obtaining quick and high-quality RTL translations of text. But we can help with more than translating website content to RTL languages at scale!
With Weglot, you’ll also be able to:
If you’re planning to target website visitors in countries that primarily speak RTL languages, then adding RTL support to your website is a must. Content translation and localization is a large part of the process, but there’s more to successful RTL web design than just that. It also involves mirroring the necessary page elements, displaying localized content in the appropriate fonts, hreflang tag implementation, and more.
Weglot is therefore a valuable tool for undertaking RTL web development and design. It contains the features you’ll need for obtaining high-quality RTL translations of your website content, translating your media, and implementing website hreflang tags, for each target audience. You’ll also be able to add custom CSS rules to fine-tune the look of your RTL website to perfection.
The best way to see Weglot in action is to try it out on your website – and you can do so for free by creating an account here.