To add a theme to your application:

1. Open/Create an XPages application
2. Expand the Resources node in the Applications navigator.
3. Right-click on Themes and select New Theme...
4. Enter a name and click ok.

To use this theme instead of the server default, open the Application properties and select your theme from the Default theme combo box.
In the Source tab of the theme, you will see example XML for defining CSS files in the resources section and adding properties for controls.
Add a resource to define the main CSS file used in the application, set the content-type to “text/css” and the hyperlink(href) to the name of the stylesheet, e.g. style.css. An example of the XML for adding a resource can be seen in XPages Sample Code 1:


Those resource can have a conditional expression, for example based on the bidi mode. A developer can then provide different CSS files depending on the text alignement. So adding support in the theme file for bidirectional locales, involves a simple JavaScript call, context.isDirectionRTL() or context.isDirectionLTR(), which checks the value of the dir property in the XPage.
XPages Sample Code 2 shows the XML for adding the CSS files which will have left-to-right and right-to-left specific styling.


Figure 2 shows an example of a bidirectional XPage application. Create a new XPage, add a panel including some text.


Figure 2 - Bidirectional XPage Application

XPages Sample Code 3 shows the classes which have been added to the stylesheets:

In style.css, add the general properties that aren't affected by the locale, e.g. I have added font attributes. In bidiLTR, where all the left-to-right specific styling will be placed, I have left aligned the text within the panel and specified a background image which has a curved corner on the top left. To apply the bidiPanel class to the panel see Figure 2 above. Also within the application, I have set the left padding of the panel to 15pixels. The rendered left-to-right XPage can be seen in Figure 4 and the rendered XPage source code below.

NOTE: There are some CSS properties and HTML controls that will change depending on the bidi mode, e.g. by default in left-to-right mode text on a page is left aligned. When the page is rendered in a right-to-left mode the text will now be right aligned. A table is an example of a HTML control which is displayed differently depending on which mode it is in. In ltr mode, as to be expected you read the table cells from left-to-right, in RTL mode the table is flipped so you are now reading the table cells from right-to-left, Figure 3.


Figure 3 - HTML table flipped in RTL mode



In Figure 4 we can see that the text within the panel is left aligned and is indented because of the padding-left property being set to 15pixels, also the background image is left positioned.
The source code below, XPages Sample Code 4, shows the two new CSS files included. The bidiLTR.css was added because the locale of the browser is set to English, therefore context.isDirectionLTR() returned true and context.isDirectionRTL() returned false.

Next to add support for right-to-left locales, in bidiRTL.css add the following class:

Set the browser to a right-to-left locale, e.g. Arabic or Hebrew, by changing the browsers language then preview the XPage, Figure 5.



Figure 5 - Rendered right-to-left XPage with display errors

As you can see in Figure 4, this is not the desired display you want to see. The background image is the wrong way around and the text is not indented.
When creating images that are designed to look a certain way, e.g. the background image above, you should think about creating an alternative right-to-left image. This can be easily accomplished by horizontally flipping the image in an image editor. So now I have created a specific right-to-left image called backgroundRTL.jpg that is a mirror image of background.jpg.
For the padding issue it may be a better idea to set those type of properties, e.g. padding, margin, etc., into the relevant CSS files. So remove the padding-left value from the panel properties and set it in bidiLTR.css and bidiRTL.css instead. Now bidiLTR.css will have the added declaration, padding-left:15px, and bidiRTL.css will have a new declaration for the right padding, padding-right:15px.
The right-to-left bidiPanel class should be the opposite to what is in bidiLTR.css. So, for example, where you have a text-align: left change it to a text-align:right, a float:right change it to a float:left, a padding-left replace it with padding-right, and where you have an image that is distinctive to one side you should flip it, and so on, this can be seen in the three stylesheets discussed in this article, XPages Sample Code 5.

Figure 6 shows the correct layout and styling for Bidi.xsp, the padding has now being applied to the right with padding-left value set, the background image for the panel uses the right-to-left image, and the text is right aligned.



Figure 6 - Right-to-left XPage rendered correctly

The source code below, XPages Sample Code 6, shows that the bidiRTL.css file is now used instead of its left-to-right brother. This is a result of the browser being set to a right-to-left locale, the lang=”ar” means the language-code for the page is set to Arabic.

XPages Sample Code 6 – Source code from Figure 6.
The other stylesheets included in the source are from the webstandard theme, which are imported because the theme created in the application extends the Domino Servers webstandard theme, <theme extends="webstandard"

 

.

TIP: In Domino Designer, each individual control and XPage can be given a direction property, overriding the direction of the page. To do this, click on the control or XPage, select the All Properties section under the Properties tab and set the dir property to Left to right or Right to left, Figure 7.



Figure 7 - Setting the direction for an individual control or XPage

Summary

You should now have a good understanding of how to support bidirectional scripts and quickly and easily be able to setup your application to support the numerous locales whose content flows from right-to-left.

Remember to watch out for the properties which may be set, in Domino Designer, in the controls and not in the stylesheet, e.g. padding, margins, etc. Also be careful of images which are designed to look one way, e.g. they may have curved borders on one side, try flipping the image horizontally.

Resources

1. Internationalization Best Practices: Handling Right-to-left Scripts in XHTML and HTML Content
2. XPages: How to use the localization options
3. XPages: JavaScript Internationalization
4. What gets automatically added to an XPages property file for translation?
5. Time Zone and Locale use in XPages