How to set proper text direction for right-to-left languages

Problem:

By default, each newly created signature supports left-to-right text direction. You would like to be able to use it with right-to-left languages like Arabic or Hebrew instead.

Solution:

If you want to ensure proper text direction (right-to-left) in your signature, you will have to modify its HTML code a little bit. Here’s how to do it, depending on what’s the scope of right-to-left language usage in your signature template:

• If a right-to-left language is used in the entire signature
• If a right-to-left language is used in a single section of the signature
• If a right-to-left language is used in individual text(s) in the signature

Signature is in a right-to-left language

This is the most typical scenario. Mixing languages in a single email signature is not a very common practice. Instead companies tend to prepare separate signatures for different language versions, as shown here.

1. Go to the signature management app and choose the signature which you want to modify.
2. Open the signature for editing by going to the Design step and clicking Edit signature.
3. Once the editor opens, click the HTML source button on the ribbon (Fig. 1.).

Fig. 1. Accessing signature’s source HTML code view.

4. In the HTML source code view window, locate the opening <table tag. It’s usually somewhere at the beginning of the code.
5. Add dir="rtl" to the tag, as shown in Fig. 2. Place it somewhere before the closing angle bracket that ends the tag (>). Remember to put a space before the code you’re adding and after it (unless it's right before the closing angle bracket).

Fig. 2. Changing text direction globally for the entire signature.

6. The global change of text direction might result in numbers being incorrectly displayed from right to left. To prevent it, locate all the numeric values and placeholders storing numeric values, e.g. {Phone} or {Mobile} in the code and add <span dir="ltr"> directly before and </span> directly after each value or placeholder (Fig. 3.).

Fig. 3. Preventing numeric values from being displayed in the incorrect direction.

7. Once you’ve finished modifying the code, click Apply & Close to close the HTML source code view window.
8. Finally, close the editor by clicking Apply & Close and save your rule in the signature management app.

Now, your signature in Arabic, Hebrew, etc. should be displayed correctly. The numeric values will be shown in the left-to-right direction as they would normally do.

Signature section is in a right-to-left language

The layout of an HTML signature is usually based on a table. If only one of the table's cells (a section) has contents in a right-to-left language, like in this use case, follow the instructions below:

1. Go to the signature management app and choose the signature which you want to modify.
2. Open the signature for editing by going to the Design step and clicking Edit signature.
3. Once the editor opens, click the HTML source button on the ribbon (see Fig. 1.).
4. Locate the <td opening tag that begins the section with texts in a right-to-left language.
5. Add dir="rtl" to the tag, as shown in Fig. 4. Place it somewhere before the closing angle bracket that ends the tag (>). Remember to put a space before the code you’re adding and after it (unless it's right before the closing angle bracket).

Fig. 4. Changing text direction for a single signature section.

6. The change of text direction in the section might result in numbers being incorrectly displayed from right to left. To prevent it, locate all the numeric values and placeholders storing numeric values, e.g. {Phone} or {Mobile} in the section and add <span dir="ltr"> directly before and </span> directly after each value or placeholder (Fig. 5.).

   Tip

   A section or a table cell in a signature begins with the <td> tag and ends with the </td> tag, so you must locate all numeric values contained in between these tags. If you look at Fig. 5., you can see the code of a sample table cell highlighted in light yellow.

Fig. 5. Preventing numeric values in a section from being displayed in the incorrect direction.

7. Once you’ve finished modifying the code, click Apply & Close to close the HTML source code view window.
8. Finally, close the editor by clicking Apply & Close and save your rule in the signature management app. 

Now, the entire section contents should be displayed correctly in a right-to-left fashion, except for the numbers that should run from left to right.

Individual text is in a right-to-left language

If your signature includes just a single text, e.g. a paragraph, or a few isolated texts in a right-to-left language, follow these instructions:

1. Go to the signature management app and choose the signature which you want to modify.
2. Open the signature for editing by going to the Design step and clicking Edit signature.
3. Once the editor opens, click the HTML source button on the ribbon (see Fig. 1.).
4. Locate your text in Arabic, Hebrew, etc. It will be preceded by an opening tag (for example <p> or <span>) and followed by a closing tag (for example </p> or </span>).
5. Now, add dir="rtl" to the opening tag of your misaligned text, as shown in Fig. 6. Place it somewhere before the closing angle bracket that ends the tag (>). Remember to put a space before the code you’re adding and after it (unless it's right before the closing angle bracket like in Fig. 6.).

Fig. 6. In this example, you need to add dir="rtl" to the opening <span> tag.

6. If your signature contains more isolated texts in a right-to-left language, repeat steps 4-5 for all of them.
7. If your signature includes a placeholder like for example {Title}, which is going to be replaced with a text in a right-to-left language, add <span dir="rtl"> directly before and </span> directly after the placeholder, as shown in Fig. 7.

Fig. 7. Ensuring that the text stored in the {Title} placeholder is displayed in the correct direction.

8. If there are more isolated placeholders with a text in Arabic, Hebrew, etc. in your signature, repeat the procedure from step 7 for each of them.
9. Once you’ve finished modifying the code, click Apply & Close to close the HTML source code view window.
10. Finally, close the editor by clicking Apply & Close and save your rule in the signature management app. 

Now, your text(s) in Arabic, Hebrew, etc. should no longer be misaligned, but should run in the correct right-to-left direction.