Setting 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

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

Use a locale-specific Cascading Style Sheet (CSS file) in which you 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 VirtualPages.xml file from:
  - WC_eardir/Stores.war/WEB-INF/xml/tools/stores/ConsumerDirect/devtools/flow/repository
  - workspace_dir\Stores\Web Content\WEB-INF\xml\tools\stores\ConsumerDirect\devtools\flow\repository
5. At the end of the <virtual-file id="vfile.stylesheet"/> line, add the following lines for every style sheet that you want 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.
7. Restart the WebSphere Commerce Server instance or refresh the Store Registry for the change to take effect.