If you send emails to countries which have a right to left language, such as Arabic or Hebrew, you'll need to make sure your Email Design System is set up to create emails with this layout.

One option is to have a completely separate Design System, one for the more common left to right emails and a second specifically used for right to left emails.

A second option is to have one Design System and use Syntax to give the option to switch between the two directions in Taxi.

Find out more about these two options and which one might be best for you here.


Music: https://www.bensound.com/royalty-free-music

If you want the option to switch between the two directions in one EDS, you'll need to make some slight changes to your HTML to make this work.

Create a module in your Email Deign System at the top of your HTML just inside the opening <body> tag called formatting':

<module name="formatting"></module>

Create a checkbox field in this module and give it a name, label and default value. This checkbox will determine whether you have your email in a right to left or left to right direction.

<module name="formatting">  <editable name="rtl_layout" label="right to left layout">  <field type="checkbox" name="rtl" label="turn on for right to left layout" default="false"> </field>  </editable>  </module>

This field will appear like this in the Taxi editor:

Screenshot-2020-02-05-at-15.24.28.png#asset:1689:url

When it's turned on, the email will have a right to left layout. When it's turned off, the email will have a left to right layout. You can control whether it's on or off by default.

Once you have created this field you need to reference it throughout your Design System so that turning the toggle on or off will control the layout and text direction of your email. There is more information on referencing fields here.

Depending on what you need to change in your email when sending in arabic languages, there are two things that you can do to your HTML to make sure this works in Taxi.

Changing the layout of a certain module

When changing the layout of the module you have two versions of the HTML for that module. For example, in a header module with a logo on the left and a CTA on the right, when this email is set to be right to left, you would have this the other way round, with the logo on the right and CTA on the left.

Around each of version of the HTML for this module you have a <div> tag which has a rule stating to either remove or include that HTML depending on whether you have turned the toggle in the formatting module on or off.

<module label="logo and CTA" name="logo">  
<div rule="{% show_unless modules.formatting.editables.rtl_layout.rtl %}">  
HTML WITH LEFT TO RIGHT LAYOUT  
</div>  
<div rule="{% show_if modules.formatting.editables.rtl_layout.rtl %}">  
HTML WITH RIGHT TO LEFT LAYOUT  
</div>  
</module>

In the first <div> tag there is this rule:

show_unless modules.formatting.editables.rtl_layout.rtl

This means that if the toggle in the formatting module is turned off then show the left to right HTML in this <div> and remove the HTML in the second <div>.

In the second <div> tag there is this rule:

show_if modules.formatting.editables.rtl_layout.rtl

This means that if the toggle in the formatting module is turned on then show the right to left HTML in this <div> and remove the HTML in the first <div>.

Changing the direction of individual pieces of text

With right to left emails you might just need to change the direction of the text, not necessarily the whole layout of a module. You can use similar rules to the above to achieve this.

In the <td> surrounding the piece of text you want to change the direction of, add a replace-dir attribute. This will contain a rule that will determine the text direction.

This rule means if the toggle in the formatting module is turned on, the direction is set to rtl' and if it's turned off then the attribute will be removed. This means the text will have the default direction of ltr'.

Also in the <td> you will need to include a replace-lang' attribute with a similar rule.

<td replace-dir="{% if modules.formatting.editables.rtl_layout.rtl %}rtl{%else%}{%endif%}"  replace-lang="{% if modules.formatting.editables.rtl_layout.rtl %}ar{%else%}{%endif%}"> </td>

This rule means if the toggle in the formatting module is turned on, the language is set to ar' (arabic) and if it's turned off then the attribute will be removed. This example uses the ar' (arabic) language code, however you can use any right to left language code you need.

Using Brands

Brands in Taxi are children of your Email Design System which enable you to control default content and branding for different Projects, mailings and versions in Taxi. Any of your emails in Taxi using a specific brand will inherit the defaults from this brand.

For example, if you have a right to left 'brand' with the layout and text direction set to rtl', all emails that you create using this brand will automatically be right to left without having to do this manually each time you create an email.

Back to Advanced Syntax