Introduction

The Forms and Landing Pages in SAP Marketing Cloud are created with a certain language set. Generally this language is just an indicator of which language that object should be written in. Only the Form has one feature which uses the language. If you include input fields with a value help (dropdown elements) then those predefined values are offered in the language of the form.

If you want to prepare a Form or Landing Page for an RTL language such as Arabic or Hebrew then there is no automatic system support. In the Landing Page you can at least manually set the text alignment to ‘Right’ but for Forms there is no such option. In the following sections I show you how you can improve this by using CSS.

Before you read any further please also read the related post ‘Styling Forms – Introduction‘ because it explains a lot of the basics. That post also includes links to other posts of my CSS series. Another recommended post is ‘Styling Landing Pages with CSS‘ which explains all the options to use CSS in a Landing Page.

Important Note: Also please note that all CSS code I present here come without warranty – you need to try out for yourself and test everything thoroughly – especially for multiple screen sizes, devices or browsers! I would also recommend that you ensure you have a good understanding of HTML and CSS.

CSS for RTL Support

Landing Page

In the screenshot below you see the normal standard setting of text alignment. If you work on a Landing Page for an RTL language you need to switch this for every text block.

If you want to change the default text alignment you can do this with the following CSS snippet:

.Text-Content,
.Text-Content p
 {
    text-align: right !important;
}

Please be aware of the fact that you are then not able anymore to change the text alignment manually for the text block. In my experiments I noticed that this CSS will not change any header (H1 to H6) or other special elements. Therefore, if you want to add a centred title like in the example above then you should be fine.

Form

To make it easier to accomplish the goal I have set my form with the layout property ‘Use Indentation’ unchecked. All the next CSS snippets are designed for this setting. If you need to use the other layout then you’ll need to experiment on your own:

To adjust all text alignments also in Forms you need to add the following CSS snippet:

.sapCpContentPage,
.sapCpWidget,
.sapCpLabel,
.sapCpInput
 {
    text-align: right !important;
}

For checkbox elements we need to use another trick to switch the order of the checkbox and label:

.sapCpCheckBox {
    float: right;
    margin-left: 5px;
}
.sapCpCheckBox + .sapCpLabel {
    text-align: right;
}

Still, the dropdown elements will show the options on the left side. To fix this there is the option ‘direction: rtl ‘ which tells the browser to adjust all elements to use rtl. Unfortunately this is nut sufficient which is the reason I had to also add the CSS settings explained above. Therefore I added this setting for the entire form:

.sapCpContentPage {
    direction: rtl;
}

In the Landing Page designer you will se the result as shown below:

After publication of the Landing Page my example looks like this:

Finally I show you my complete CSS coding to copy:

.sapCpContentPage {
    direction: rtl;
}
.sapCpContentPage,
.sapCpWidget,
.sapCpLabel,
.sapCpInput,
.Text-Content,
.Text-Content p
 {
    text-align: right !important;
}

.sapCpCheckBox {
    float: right;
    margin-left: 5px;
}
.sapCpCheckBox + .sapCpLabel {
    text-align: right;
}

Conclusion

After reading this post you should be able to improve the RTL capabilities of your Forms and Landing Pages.

If you are looking for more posts on this topic please check the link list of other posts of my CSS series in my initial post ‘Styling Forms – Introduction‘.