Compatibility:

WebSite X5 Evo and Pro from v.2025.2

When creating a website in multiple languages, it's important to consider not only the translations but also the specific characteristics of each language. Some languages, such as Italian or English, are written and read from left to right—this is the so-called LTR (Left-To-Right) format.

Other languages, such as Arabic, Hebrew, Urdu, or Persian, follow the opposite direction: they are written and read from right to left, and are defined as RTL (Right-To-Left).


To ensure good readability and a consistent user experience, the site's layout—not just the text—must follow this direction. With WebSite X5, you can create websites that fully support the RTL format, adapting both content and page structure.


In this guide, we'll go through the steps needed to correctly set up a project developed in an RTL language.


How to set the writing direction of a project

Let’s assume you need to create a new website in an RTL language, such as Arabic. To set the writing direction, follow these steps:

  • Launch WebSite X5 and start a new project, choosing the template you prefer.
  • At Step 1 - Settings, click on General Settings and fill in the required information, such as the Website Title or associated Icon.
  • If WebSite X5 is already installed in Arabic, this will automatically be set as the content language. In any case, you can use the Content Language option to specify that your website will be in Arabic.
  • For the Writing Direction option, leave the default setting Automatic based on language: since Arabic is the selected content language, RTL mode will be automatically enabled.


If, instead of creating a new website, your goal is to modify an existing website to adapt it to an RTL language, the procedure is similar but has some specific aspects. For example, you might have duplicated a project in English (an LTR language) and want to use it to create a version in Arabic (an RTL language).

  • Launch WebSite X5 and open the project you want to work on—in our example, the copy of the original.
  • At Step 1 - General Settings, click on General Settings and check that all required information is correct: the Title and Description must be localized.
  • Set Arabic as the Content Language and, for the Writing Direction option, leave the default setting Automatic based on language: this will automatically enable RTL mode.
  • Switching from an LTR language (English in the original project) to an RTL language (Arabic) triggers a dialog box asking how the content should be handled.You can choose between:
    • Automatically mirror all content: in this case, the program will not only change the text direction but will also automatically rearrange the content on the page, mirroring it along a vertical axis down the center of the page. Select this option if the content is still laid out as in the original LTR design intended for left-to-right reading.
    • Leave content unchanged: in this case, the program changes the text direction but leaves the content in its original layout. Select this option if you have already manually adapted the layout for RTL design.
  • Once you’ve made your choice, preview the project locally. You’ll see that the text now flows from right to left and, if you selected to mirror the content, the layout has also adapted: for example, a logo that was on the left in the header is now on the right; the navigation menu items are ordered in reverse; form labels are positioned to the right of the fields; if you had a text with an image aligned to the right, the image is now on the left and the text on the right.


#tip - When content is mirrored, the program automatically updates the placement of the objects in the Step 3 Grid. This ensures consistent alignment between what is shown in the workspace, in the local preview, and in the browser once the site is published.


How to proceed with building the website

Once the content language and writing direction are set, you can proceed with creating the website using all the features WebSite X5 offers.


If, as we assumed earlier, you are building a new website, you’ll need to go through key steps such as customizing the template, organizing the sitemap, adding content to the various pages, and finally publishing the completed site online. Starting from scratch, you can position the content right away according to an RTL design.


If, on the other hand, you started from an LTR website (in our example, in English) to create a localized copy in an RTL language (in this case, Arabic), then the content is already inserted and mirrored, but you still need to complete the localization. Here too, you will need to work on the template, sitemap, and pages to replace the content with the Arabic version and make any necessary adjustments.


#tip – If your goal is to create a multilingual website and allow users to choose which language to view your pages in (for example, English or Arabic), see also: How to create a website accessible in different languages? 

 

Tips for creating RTL websites

As you’ve seen, creating a web page in RTL format is not as simple as selecting all text and applying right alignment: that would be merely a visual and partial solution.

Fortunately, WebSite X5 automatically handles the necessary technical settings and, with just a few steps, lets you set up a website fully suited for right-to-left reading.


Here are some practical tips to further improve the final result and offer an optimal user experience for RTL language speakers:

  • Choose appropriate fonts

Not all fonts support all languages. When a font cannot display a particular character, it is replaced by a white box symbol, commonly referred to as “tofu.” To avoid this issue, it’s recommended to use a multilingual font designed to handle RTL scripts.

One of the most reliable options is Google Noto, a free and license-free font family that supports over 800 languages.

  • Consider cultural differences

Some symbols or references common in Western contexts may not be understood or may even be inappropriate in other cultures. Consider using visual and linguistic alternatives that are more neutral and inclusive.

For example, in Arab culture, pigs are considered impure animals: instead of a piggy bank icon, an image of a jar filled with coins might be a more suitable way to convey the idea of saving.

  • Consider automatic translation tools and artificial intelligence

If you don’t have access to a professional translator, you can consider using automatic tools like Google Translate or rely on solutions based on artificial intelligence, which can provide more natural and context-aware translations.

In both cases, it is essential to manually review the texts, especially to ensure they are culturally appropriate and consistent with the tone of the website.

  • Thoroughly test your website

Before publishing your website online, use the local preview to check that texts and layout are correctly adapted for right-to-left reading. Involving a native speaker in the review phase can make a big difference in the quality and credibility of your site.


Technical note

When you set up a project in RTL mode, WebSite X5 automatically applies the “right-to-left” reading direction to the HTML code of the pages.

This is done using the dir="rtl" attribute, which is added to the most appropriate elements of the page to tell the browser how to display the content.


In addition, the page layout is adjusted using specific CSS styles so that:

  • texts are correctly aligned to the right;
  • page elements (such as menus, images, buttons) follow a flow consistent with the RTL direction;
  • the margins of page elements match the new layout;
  • any animations or transition effects move in the correct direction.


All of this happens automatically: you just need to remember to select the correct text direction when setting up your project.