<?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>
	<para xml:id="sect-Reference_Guide-RTL_Right_To_Left_Framework-Groovy_templates">
		<citetitle><emphasis role="bold">Groovy templates</emphasis></citetitle>
    </para>
		<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>
	
	<para xml:id="sect-Reference_Guide-RTL_Right_To_Left_Framework-Stylesheet">
		<citetitle><emphasis role="bold">Stylesheet</emphasis></citetitle>
    </para>
		<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: <filename>/web/skin/portal/webui/component/UIFooterPortlet/DefaultStylesheet-rt.css</filename> will return the same stylesheet as <filename>/web/skin/portal/webui/component/UIFooterPortlet/DefaultStylesheet.css</filename> 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>
	
	<para xml:id="sect-Reference_Guide-RTL_Right_To_Left_Framework-Images" role="NotInToc">
		<citetitle><emphasis role="bold">Images</emphasis></citetitle>
    </para>
		<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 <filename>/GateInResources/skin/DefaultSkin/webui/component/UITabSystem/UITabs/background/NormalTabStyle-rt.gif</filename> returns a mirror of the image <filename>/GateInResources/skin/DefaultSkin/webui/component/UITabSystem/UITabs/background/NormalTabStyle.gif</filename>.
		</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>
	
	<para xml:id="sect-Reference_Guide-RTL_Right_To_Left_Framework-Client_side_JavaScript">
		<citetitle><emphasis role="bold">Client side JavaScript</emphasis></citetitle>
    </para>
		<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>
<para>
	<prompt>
		<emphasis role="bold">See also</emphasis>
	</prompt>
</para>
		<itemizedlist>
		    <listitem>
               <para><link linkend="sect-Reference_Guide-Internationalization_Configuration">Internationalization Configuration</link></para>
           </listitem>
           <listitem>
               <para><link linkend="sect-Reference_Guide-XML_Resources_Bundles">XML Resources Bundles</link></para>
           </listitem>
		   <listitem>
               <para><link linkend="sect-Reference_Guide-Navigation_Controller">Navigation Controller</link></para>
           </listitem>
       </itemizedlist>
</section>