This article aims to show you how to easily setup your XPages application
to support bidirectional (bidi) scripts, e.g. Arabic and Hebrew.
Supporting bidi or right-to-left locales is important for any company as
you reach and cater for a larger audience.
In this article you will learn how to add a theme, stylesheets(css) to
support both left-to-right and right-to-left scripts, and also how to handle
some of the issues you may encounter along the way.
Firstly, I'll briefly describe what a theme is. A theme is used to define
the look and feel of an application. They can be set globally (all applications)
or per application. A theme is handled on the server side and drives the
page creation and HTML generation.
There are two themes shipped with Lotus Domino Server, webstandard and
OneUI, both of which support right-to-left locales. To use one of these
themes, you can either change the server default by modifying the xsp.theme
value in the xsp.properties file (<
to webstandard or oneui) or specify one of the themes in the application
properties, Figure 1.
1 - Setting one of Domino Servers shipped themes, webstandard
and OneUI, to be the Default theme
add a theme to your application:
- Open/Create an XPages
- Expand the Resources node in the Applications
- Right-click on Themes and select New Theme...
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:
XPages Sample Code 1
– Adding a resource
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
which checks the value of the
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.
XPages Sample Code 2
– Adding support for bidirectional locales
2 shows an example of a bidirectional XPage application. Create a new XPage,
add a panel including some text.
2 - Bidirectional XPage Application
Sample Code 3 shows the classes which have been added to the stylesheets:
no-repeat scroll left top;
Sample Code 3 - Sample CSS for left-to-right script
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 3 and
the rendered XPage source code below.
3 - Rendered left-to-right XPage
Figure 3 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
returned true and
Sample Code 4 - Source code from Figure 3
to add support for right-to-left locales, in bidiRTL.css add the following
no-repeat scroll right top;
Set the browser to a right-to-left
locale, e.g. Arabic or Hebrew, by changing the browsers language then preview
the XPage, Figure 4.
4 - Rendered right-to-left XPage with display errors
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,
and bidiRTL.css will have a new declaration for the right padding,
The right-to-left bidiPanel class should be the opposite to what is in
bidiLTR.css. so where you have a text-align: left change it to a right,
a float:right change it to a left, a padding-left swap it to padding-right,
and where you have an image that distinctive to one side you should flip
it, and so on, this can be seen in the three stylesheets discussed in this
articles, XPages Sample Code 5.
Sample Code 5 – Full CSS from the three stylesheets used in
5 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
5 - Right-to-left XPage rendered correctly
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 5.
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, "webstandard"
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 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
Best Practices: Handling Right-to-left Scripts in XHTML and HTML Content
How to use the localization options
gets automatically added to an XPages property file for translation?
Zone and Locale use in XPages