2.9. RTL (Right To Left) framework

The text orientation depends on the current locale setting. The orientation is a Java 5 enum that provides a set of functionalities:

   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 Orientation for the current request is the UIPortalApplication. However, it should be accessed at runtime using the RequestContext that delegates to the UIPortalApplication.

In case of PortalRequestContext, it directly delegates as the PortalRequestContext that 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.

Groovy templates

Orientation is defined by implicit variables in 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.

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. The -lt suffix is optional.

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

Example:

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:


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

The LT produced output will be:


float: left; /* orientation=lt */
font-weight: bold;
text-align: center;
white-space: nowrap;

The RT produced output will be:


float: right; /* orientation=rt */
font-weight: bold;
text-align: center;
white-space: nowrap;

Example:

In this example, you need to modify the padding according to the orientation:


color: white;
line-height: 24px;
padding: 0px 5px 0px 0px; /* orientation=lt */
padding: 0px 0px 0px 5px; /* >orientation=rt */

The LT produced output will be:


 color: white;
line-height: 24px;
padding: 0px 5px 0px 0px; /* orientation=lt */

The RT produced output will be:


 color: white;
line-height: 24px;
padding: 0px 0px 0px 5px; /* orientation=rt */

Images

Sometimes, it is necessary to create the 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 as the skin service. When an image ends with the -rt suffix, the portal will attempt to locate the original image and create a mirror of it.

For example, when /GateInResources/skin/DefaultSkin/webui/component/UITabSystem/UITabs/background/NormalTabStyle-rt.gif is requested, a mirror of /GateInResources/skin/DefaultSkin/webui/component/UITabSystem/UITabs/background/NormalTabStyle.gif is returned.

Note

It is important to consider whether the image to be mirrored is symmetrical as this will impact its final appearance.

Here is an example combining stylesheet and images:


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 */

Client side JavaScript

The eXo.core.I18n object provides the following parameters for orientation:

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.

See also

Copyright ©. All rights reserved. eXo Platform SAS
blog comments powered byDisqus