RTL Framework

RTL (Right To Left) Framework

1 Overview

The RTL framework (Right-To-Left framework) provides a set of tools that can be leveraged by the user interface components to handle directionality gracefully.

eXo Portal: RTL - Arabic support from Benjamin Mestrallet on Vimeo.

2 Direction

The orientation depends on the current locale and during a portal request the current orientation is made available by various means. The orientation is a Java 5 enum that provides a set of functionalities:

public enum Orientation {
   LT, // Western Europe
   RT, // Middle East (Arabic, Hebrew)
   TL, // Japanese, Chinese, Korean
   TR; // Mongolian
   public boolean isLT() { ... }
   public boolean isRT() { ... }
   public boolean isTL() { ... }
   public boolean isTR() { ... }
}

The object defining the current Orientation for the current request is the UIPortalApplication. However it should be accessed at runtime using the RequestContext that delegates to the UIPortalApplication. In the case of a PortalRequestContext it is a direct delegate as the PortalRequestContext has a reference to the current UIPortalApplication. In case of a different context such as the PortletRequestContext, it delegates to the parent context given the fact that the root RequestContext is always a PortalRequestContext.

3 Usage in different layers

3.1 Java

Orientation is obtained from the RequestContext:

Orientation currentOrientation = requestContext.getOrientation();

3.2 Groovy templates

Orientation is obtained from implicit variables defined by the groovy binding context:

• orientation : the current orientation as an Orientation
• isLT : the value of orientation.isLT()
• isRT : the value of orientation.isRT()
• dir : the string ltr if the orientation is LT or the string rtl if the orientation is RT

3.3 Stylesheet

The skin service handles stylesheet rewriting to accommodate the orientation. It works by appending -lt or -rt to the stylesheet name. For instance /web/skin/portal/webui/component/UIFooterPortlet/DefaultStylesheet-rt.css will return the same stylesheet as /web/skin/portal/webui/component/UIFooterPortlet/DefaultStylesheet.css but processed for the RT orientation. Obviously the -lt suffix is optional.

Stylesheet authors can annotate their stylesheet to create content that depends on the orientation.

In the example we need to use the orientation to modify the float attribute that will make the horizontal tabs either float on left or on right:

.UIHorizontalTabs .UITab {
  float: left; /* orientation=lt */
  float: right; /* orientation=rt */
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
}

The LT output will be:

.UIHorizontalTabs .UITab {
  float: left; /* orientation=lt */
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
}

The RT output will be:

.UIHorizontalTabs .UITab {
  float: right; /* orientation=rt */
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
}

In this example we need to modify the padding according to the orientation:

.UIHorizontalTabs .UITab .NormalNavigationTab .TabIcon {
  color: white;
  line-height: 24px;
  padding: 0px 5px 0px 0px; /* orientation=lt */
  padding: 0px 0px 0px 5px; /* orientation=rt */
}

The LT output will be:

.UIHorizontalTabs .UITab .NormalNavigationTab .TabIcon {
  color: white;
  line-height: 24px;
  padding: 0px 5px 0px 0px; /* orientation=lt */
}

The RT output will be:

.UIHorizontalTabs .UITab .NormalNavigationTab .TabIcon {
  color: white;
  line-height: 24px;
  padding: 0px 0px 0px 5px; /* orientation=rt */
}

3.4 Images

Sometime it is necessary to create an RT version of an image that will be used from a template or from a stylesheet. However symmetric images can be automatically generated avoiding the necessity to create a mirrored version of an image and furthermore avoiding maintenance cost.

The web resource filter uses the same naming pattern than the skin service does. When an image ends with the -rt suffix the portal will attempt to locate the original image and create a mirror of it. For instance requesting the image /eXoResources/skin/DefaultSkin/webui/component/UITabSystem/UITabs/background/NormalTabStyle-rt.gif returns a mirror of the image /eXoResources/skin/DefaultSkin/webui/component/UITabSystem/UITabs/background/NormalTabStyle.gif and it works perfectly because the image is symmetric.

Here is an example combining stylesheet and images:

.UIHorizontalTabs .UITab .HighlightNavigationTab .RightTab {
  line-height: 24px; 
  background: url('background/NavigationTab.gif') no-repeat right top; /* orientation=lt */
  background: url('background/NavigationTab-rt.gif') no-repeat left top; /* orientation=rt */
  padding-right: 2px; /* orientation=lt */
  padding-left: 2px; /* orientation=rt */
}

3.5 Client side JavaScript

Just use the eXo.core.I18n object that provides the following methods:

• getOrientation() : returns either the string lt or rt
• getDir() : returns either the string ltr or rtl
• isLT() : returns true for LT
• isRT() : returns true of RT