Handling right-to-left languages

The IPS Community Suite has built-in support for languages that use right-to-left text (including Arabic, Persian and others), and if you are creating a theme to share with others, you should ensure it is compatible with right-to-left display. Doing so is easy.

RTL-specific CSS

When RTL display is used, certain CSS properties need to be reversed; for example, if you position something left in LTR languages, when shown in RTL it would need to be positioned right instead.

The global template in IPS4 always has the dir attribute specifying the text direction (the value is either ltr or rtl), and it is this attribute we can use to add direction-specific styles.

Let's imagine you have some CSS in your theme like this:

.yourClass {
	font-weight: bold;
	position: absolute;
	left: 15px;
	top: 15px;
	padding-left: 30px;
}

Some of these styles need to be separated out for RTL or the theme won't look right. So, by using the dir attribute on the html tag, what we instead need to write is:

/* These styles are the same regardless of text-direction */
.yourClass {
	font-weight: bold;
	position: absolute;
	top: 15px;
}

/* LTR styles */
html[dir="ltr"] .yourClass {
	left: 15px;
	padding-left: 30px;
}

/* RTL styles */
html[dir="rtl"] .yourClass {
	right: 15px;
	padding-right: 30px;
}

That's it! RTL languages will now correctly position the element on the right-hand side of the screen, while LTR languages will show it on the left as expected.

Whenever you use styles impacted by text direction, you should split them out in this way.

RTL-specific icons

The IPS Community Suite makes extensive use of FontAwesome icons. Some of the icons need to be flipped for RTL languages (such as arrows) and if you use the standard classnames (e.g. fa-caret-left), we automatically flip these so that they are correct for RTL languages.

If you manually specify icons in your CSS classes using the unicode code, you will need to adjust them for RTL so that their opposite icon is used. For example, if you do this in your CSS:

/* This uses the unicode for FA's 'angle-right' icon */
.nextLink:after {
	font-family: 'FontAwesome';
	content: '\f105';
}

You will need to change it to be:

.nextLink:after {
	font-family: 'FontAwesome';
}
html[dir="ltr"] .nextLink:after {
	content: '\f105';
}
html[dir="rtl"] .nextLink:after {
	content: '\f104';
}

Consider your Javascript

This usually will not require any action. However, if you have any custom JavaScript which adds user interaction, consider if any changes need to be made. For example, if you have a menu which opens from the left, it may need to open from the right. If you are only using the UI widgets already in the IPS Community Suite, these already make all such considerations so no action will be necessary.