Set the dir attribute for bidi specifications

There are two ways to dynamically set the dir attribute and other HTML bidi specifications.


About this task

In WebSphere Commerce, there are two ways to dynamically set the dir attribute and other HTML bidi specifications, to the correct value in the JSP template:


Procedure

  1. The following example shows the directional HTML elements: 

      <% if(languageId.compareTo("<Bidi_Language_ID")==0)
{
%>
<%
}
else
{
%>
<%
}
%>

    The Bidi_language_id is the language_id of the bidi language that needs the dir attribute to be set to "RTL". For example: 

      <!-- *******************bidi start*********************** -->
<% if(languageId.compareTo("-11")==0)
{
%>
<body dir=RTL marginheight="0" marginwidth="0">
<%
}
else
{
%>
<body marginheight="0" marginwidth="0">
<%
}
%>
<!-- ******************bidi end************************** -->
<table cellpadding="0" cellspacing="0" border="0"
width="600">
<tr>
<!-- ******************bidi start************************ -->
<% if(languageId.compareTo("-11")==0)
{
%>
<td class="banner" valign="right" width="180">
<%
}
else
{
%>
<td class="banner" valign="left" width="180">
<%
}
%>
<!-- *************bidi end******************************* -->

  2. Use a locale-specific Cascading Style Sheet (CSS file) in which we can specify the directionality attribute.

    1. From the store css directory, make a copy of the Master1_1.css file and name it Master1_1ar_EG.css

    2. Open Master1_1ar_EG.css in a text editor and change the following line: 

        html {direction: ltl; unicode-bidi: embed;}

      to: 

        html {direction: rtl; unicode-bidi: embed;}

      Note: Change all the align= statements in the CSS file to point to RTL.

    3. Save and close the file.

    4. Open the file workspace_dir\Stores\Web Content\WEB-INF\xml\tools\stores\ConsumerDirect\devtools\flow\repository\VirtualPages.xml

    5. At the end of the <virtual-file id="vfile.stylesheet"/> line, add the following lines for every style sheet to use: 

        <virtual-file-implementation virtual-file-id="vfile.stylesheet" 
url="css/Master1_1$locale$.css" id="vfile.style1.css" 
locale-specific="yes" locales="ar_EG,ar"/>

    6. Save and close the VirtualPages.xml file.


Related concepts
WebSphere Commerce configuration file (wc-server.xml)
Outbound messaging system
Globalized catalog content
Cultural considerations
Localized store assets
Globalization in the messaging system
Programming models for globalized stores
Globalized store design
Supporting globalization
Globalized tools framework


Related tasks
Creating a globalized store
Use resource bundles in store pages


Related reference
Globalization tips