How do we enable RTL Support?

Enabling RTL support is very simple. In any one of the css,  add the following code

body {
    direction:rtl;
}

This will display any content within the body tag from right to left.

Is this enough to support RTL?

No. There are a few things which needs to be handled. They are

1. Div Elements

     Some of the Div elements would have been floated. i.e the style property float would have been set either to left or right. This has to be reversed in case of RTL. i.e for div's which had float:right should be changed to float:left and vice-versa.

2. Display of Borders

     For some tables / forms we would have added left and right borders for displaying a separator. When the direction changes to RTL this does not be reversed automatically. So similar to float, all the borders that where set as border-right needs to be changed to border-left and vice-versa.

3. Next / Previous or Forward / Backward images

   In our language ">>" means forward/next and  "<<" means backward/previous, but in RTL it is just the opposite where ">>" means backward and "<<" means forward.

4. Positioned Elements

  In some places we would have found the position of a particular element (say a div) and would have displayed a dialog by specifying a target location of some (+ pixels from its offset). For example, say a div's left position is 200. We would have added another 100 pixels to it and would have displayed the dialog whose left is set to 300. This will take a hit when we display the contents in the opposite direction. In such cases, based on the needs / ui instead of adding 100 we would need to reverse it. This does not mean we will be subtracting 100. These cases needs to be handled case by case.

5. Rich Text Formatting

  The form elements will be handled by the browser itself. The Rich text editor which we use for entering texts needs to be handled separately so that the writing is from right to left. In case of SDP, the css class editor_body present in styles/htmlarea.css should be updated with the "direction:rtl" property.
 
  The toolbar will be left aligned by default. This needs to be changed to right aligned by specifyiny "text-align:right" in the ".htmlarea .toolbar" class

6. Alignment in Tables

  In Html tables, the default alignment for table cells is left [ This will take effect only when align attribute is not specified]. In RTL, it is right alignment. So in cases where we have specified 'align=left' we need to change it to 'align=right' or better not to specify the align attribute at all when the required align is default. Also, where ever we have specified 'align=right' needs to be changed to 'align=left'. Also, the value for the property "text-align" has to be reversed

7. Padding in elements

  In many places we would have specified padding attributes so that the text starts after a few pixels. This will not be reversed when the display is set to RTL. So similar to border's and float, we need to switch the left and right paddings.

8. Images

  Images involving straight lines is not a problem. Curved images, slanting images etc.. have to be redone on the opposite direction to work in RTL. CSS curves should not be a problem. Similarly, images used for representing forward and backward have to be changed.

9. Background Image Positioning

  In some parts of the CSS, we have set the background property to display images at the background for any element. In such cases, we either positioned the background fixed at the left/right or repeat them. Repeating the background image displays fine in RTL but fixing the position at the left or right need to be positioned vice versa for RTL.Implementing RTL in SDPA separate css file is required to handle RTL changes. This css file will be named as sdStyle_rtl.css and will contain the css classes that have been changed for rtl alone. The current css  file will remain as it is. When the language is Arabic / Hebrew, then after including the existing set of css files, the rtl css file will be included from the SDPIncludes.jspf file. By this way it is enough that we add the css for new features in one place and if needed we change it in the rtl  file.

Things not to DO during development

• Do not use align='left' in tables / table cells
• Do not hard code padding / border / float property in inline styles. Always move them to a css class and use it.