<?xml version='1.0' encoding='utf-8' ?>
<!DOCTYPE section PUBLIC "-//OASIS//DTD DocBook XML V4.5//EN" "http://www.oasis-open.org/docbook/xml/4.5/docbookx.dtd" [
<!ENTITY % BOOK_ENTITIES SYSTEM "../../Reference_Guide.ent">
%BOOK_ENTITIES;
]>
<section id="sect-Reference_Guide-RTL_Right_To_Left_Framework">
	<title>RTL (Right To Left) Framework</title>
	<para>
		The text orientation depends on the current locale setting. The orientation is a Java 5 enum that provides a set of functionalities:
	</para>
	
<programlisting language="javascript">
   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() { ... }
</programlisting>
	<para>
		The object defining the Orientation for the current request is the <emphasis>UIPortalApplication</emphasis>. However, it should be accessed at runtime using the <emphasis>RequestContext</emphasis> that delegates to the <emphasis>UIPortalApplication</emphasis>.
	</para>
	<para>
		In case of <emphasis>PortalRequestContext</emphasis>, it directly delegates as the <emphasis>PortalRequestContext</emphasis> has a reference to the current <emphasis>UIPortalApplication</emphasis>.
	</para>
	<para>
		In case of a different context, such as the <emphasis>PortletRequestContext</emphasis>, it delegates to the parent context given the fact that the root <emphasis>RequestContext</emphasis> is always a <emphasis>PortalRequestContext</emphasis>.
	</para>
	<section id="sect-Reference_Guide-RTL_Right_To_Left_Framework-Groovy_templates">
		<title>Groovy templates</title>
		<para>
			Orientation is defined by implicit variables in the Groovy binding context:
		</para>
		<variablelist>
			<varlistentry>
				<term>Orientation</term>
				<listitem>
					<para>
						The current orientation as an Orientation
					</para>
				</listitem>
			</varlistentry>
			<varlistentry>
				<term>isLT</term>
				<listitem>
					<para>
						The value of orientation.isLT()
					</para>
				</listitem>
			</varlistentry>
			<varlistentry>
				<term>isRT</term>
				<listitem>
					<para>
						The value of orientation.isRT()
					</para>
				</listitem>
			</varlistentry>
			<varlistentry>
				<term>dir</term>
				<listitem>
					<para>
						The string &#39;ltr&#39; if the orientation is LT or the string &#39;rtl&#39; if the orientation is RT.
					</para>
				</listitem>
			</varlistentry>
		</variablelist>
	</section>
	
	<section id="sect-Reference_Guide-RTL_Right_To_Left_Framework-Stylesheet">
		<title>Stylesheet</title>
		<para>
			The skin service handles stylesheet rewriting to accommodate the orientation. It works by appending -lt or -rt to the stylesheet name.
		</para>
		<para>
			For instance: <emphasis>/web/skin/portal/webui/component/UIFooterPortlet/DefaultStylesheet-rt.css</emphasis> will return the same stylesheet as <emphasis>/web/skin/portal/webui/component/UIFooterPortlet/DefaultStylesheet.css</emphasis> but processed for the RT orientation. The <parameter>-lt</parameter> suffix is optional.
		</para>
		<para>
			Stylesheet authors can annotate their stylesheet to create content that depends on the orientation.
		</para>
    
		<example>
			<para>
				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:</para>
        
<programlisting language="css">
float: left; /* orientation=lt */
float: right; /* orientation=rt */
font-weight: bold;
text-align: center;
white-space: nowrap;
</programlisting>

				 <para>The LT produced output will be:</para>
         
<programlisting language="css">
float: left; /* orientation=lt */
font-weight: bold;
text-align: center;
white-space: nowrap;
</programlisting>
				 
         <para>The RT produced output will be:</para>
         
<programlisting language="css"> 
float: right; /* orientation=rt */
font-weight: bold;
text-align: center;
white-space: nowrap;
</programlisting>
			</example>
		
		<example>
			<para>
				In this example, you need to modify the padding according to the orientation:</para>
        
<programlisting language="css">
color: white;
line-height: 24px;
padding: 0px 5px 0px 0px; /* orientation=lt */
padding: 0px 0px 0px 5px; /* &#62;orientation=rt */
</programlisting>

				 <para>The LT produced output will be:</para>
         
<programlisting language="css"> 
color: white;
line-height: 24px;
padding: 0px 5px 0px 0px; /* orientation=lt */
</programlisting>

				 <para>The RT produced output will be:</para>
         
<programlisting language="css"> 
color: white;
line-height: 24px;
padding: 0px 0px 0px 5px; /* orientation=rt */
</programlisting>
			
		</example>
	</section>
	
	<section id="sect-Reference_Guide-RTL_Right_To_Left_Framework-Images">
		<title>Images</title>
		<para>
			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.
		</para>
		<para>
			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.
		</para>
		<para>
			For instance: requesting the image <emphasis>/GateInResources/skin/DefaultSkin/webui/component/UITabSystem/UITabs/background/NormalTabStyle-rt.gif</emphasis> returns a mirror of the image <emphasis>/GateInResources/skin/DefaultSkin/webui/component/UITabSystem/UITabs/background/NormalTabStyle.gif</emphasis>.
		</para>
		<note>
			<para>
				It is important to consider whether the image to be mirrored is symmetrical as this will impact its final appearance.
			</para>
		</note>
		<para>
			Here is an example combining stylesheet and images:
		</para>
		
<programlisting language="css">
line-height: 24px; 
background: url(&#39;background/NavigationTab.gif&#39;) no-repeat right top; /* orientation=lt */
background: url(&#39;background/NavigationTab-rt.gif&#39;) no-repeat left top; /* orientation=rt */
padding-right: 2px; /* orientation=lt */
padding-left: 2px; /* orientation=rt */
</programlisting>
	
  </section>
	
	<section id="sect-Reference_Guide-RTL_Right_To_Left_Framework-Client_side_JavaScript">
		<title>Client side JavaScript</title>
		<para>
			The <emphasis>eXo.core.I18n</emphasis> object provides the following parameters for orientation:
		</para>
		<variablelist>
			<varlistentry>
				<term>getOrientation()</term>
				<listitem>
					<para>
						Return either the string lt or rt
					</para>
				</listitem>
			</varlistentry>
			<varlistentry>
				<term>getDir()</term>
				<listitem>
					<para>
						Return either the string ltr or rtl
					</para>
				</listitem>
			</varlistentry>
			<varlistentry>
				<term>isLT()</term>
				<listitem>
					<para>
						Return true for LT
					</para>
				</listitem>
			</varlistentry>
			<varlistentry>
				<term>isRT()</term>
				<listitem>
					<para>
						Return true of RT
					</para>
				</listitem>
			</varlistentry>
		</variablelist>
	</section>

</section>


