Mirroring in Web Pages | Developing International Software

Applying right-to-left layout to Web content is much easier than it is for Win32 applications. Microsoft Internet Explorer supports RTL rendering of HTML content natively. Toggling between LTR and RTL display in the browser is as simple as adding one attribute-direction (DIR)-to the HTML element. <HTML DIR=RTL> will cause the entire page to display from right to left. This means that the page is rendered as if the upper-right corner were the origin, with the x- axis increasing from right to left, as described earlier. A well constructed page will flow correctly with the DIR attribute set to either RTL or LTR. (If you do not use the DIR attribute, the layout will default to LTR.) There are important differences between placing the DIR attribute in the <HTML> tag and placing it in the <BODY> tag. DIR in the <BODY> tag will affect all visible elements in the document, but will not affect ambient properties (stationary elements). Placing DIR in the HTML tag will set the ambient property of the document to AMBIENT_RIGHTTOLEFT for ActiveX controls. Also, if RTL reading order is set in the HTML tag, the reading order of the document can be changed at run time by setting the DIR property of the document object by scripting.

Note

The RTL layout of Web content is not a Microsoft-specific technology, but rather is part of the HTML and cascading style sheets (CSS) standards. Therefore, it might be considered inappropriate to use the term "mirroring" when talking about enabling HTML pages for RTL layout.

To experiment with RTL rendering, try running the following page in Internet Explorer:

 <HTML DIR=RTL> <HEAD> <TITLE>Playing with document.dir</TITLE> <SCRIPT LANGUAGE=javascript> <!-- function myfunction() {  if (document.dir = "rtl")  document.dir = "ltr";  else document.dir = "rtl"; } //--> </SCRIPT> </HEAD> <BODY> <P>This is some text...</P> <P>  <INPUT type="button" value="Switch" onclick=myfunction()> </P> <Table border=1>  <TBODY>  <TR>  <TD width=100>Cell 1</TD>  <TD width=100>Cell 2</TD>  </TR>  <TR>  <TD width=100>Cell 1</TD>  <TD width=100>Cell 2</TD>  </TR>  </TBODY> </Table> </BODY> </HTML>

Clicking the Switch button toggles the display from RTL to LTR and back again. Compare the nonmirrored document in Figure 8-8 with the mirrored version in Figure 8-9. Notice how the text in the mirrored document does not change direction, but does change alignment and flow. For this same document, notice also how the punctuation moves from the right side of the text to the left side, and how the scroll bar on the page does the same. Similarly, the cells in the table become reversed when you toggle directions.

figure 8.8 a nonmirrored version of the document.

Figure 8.8 - A nonmirrored version of the document.

figure 8.9 a mirrored version of the document. the text is right-aligned, punctuation and the scroll bar appear to the left of the text, and the previous order of the cells is reversed.

Figure 8.9 - A mirrored version of the document. The text is right-aligned, punctuation and the scroll bar appear to the left of the text, and the previous order of the cells is reversed.

The DIR attribute of an HTML file can also be modified first by right-clicking the content of the page and then choosing the resulting context-sensitive menu's Encoding subitem (such as Right-To-Left Document). (See Figure 8-10.)

figure 8.10 the http://www.microsoft.com/globaldev page with the rtl directional attribute set.

Figure 8.10 - The http://www.microsoft.com/globaldev page with the RTL directional attribute set.

The DIR attribute can be used in the following ways:

When direction is specified as RTL in the <HTML> tag, the page will be set with the correct extended styles so it displays the page as RTL on a bidirectional-enabled system, and so a vertical scroll bar appears on the left side.
When direction is specified as RTL in the <BODY> tag, frames and captions will not inherit the RTL direction.

The following HTML code sets the DIR attribute to RTL:

  <HTML dir="rtl">  <!-- Or -->  <body dir="rtl" ...>

Despite the relative simplicity of mirroring Web content (when compared with mirroring Win32 applications), the complex positioning that is applied to HTML elements brings up several issues that you will need to be aware of whenever you are designing Web pages for RTL languages. One of the considerations that you should take into account includes how to properly handle directional images. You should also be aware of the problems associated with forced left alignment of text and with CSS absolute positioning. Finally, you should take advantage of the capabilities that tables offer for rendering RTL text.

Directional Images

Internet Explorer's rendering engine-Mshtml.dll-is enabled to handle RTL layout of Web content. Applying the DIR=RTL attribute does several things. It sets the reading order of the text to RTL, aligns the text to the right, and mirrors Web content such as dynamic elements, tables, and cells. However, applying the DIR=RTL attribute leaves the orientation of stationary elements, such as images, unchanged. This is mainly to prevent flipping of all the images that should not be flipped. Directional images, in contrast, need to be flipped and should follow the same layout as the text and content.

For example, Figure 8-11 shows sample text preceded by an arrow in the LTR document. Once the text is set to RTL, the arrow's original orientation remains the same, whereas it should be reversed.

figure 8.11 the arrow to the left of the text in the ltr document needs to be reversed in the rtl document.

Figure 8.11 - The arrow to the left of the text in the LTR document needs to be reversed in the RTL document.

In order to supply a single code base that renders correctly in either direction, it is not enough to simply provide alternate images for the bidirectional versions of the site. You must also include script in the Web page that dynamically changes the image depending on the rendering mode being used. To effect this change, you can use a CSS filter for the images on the site. The filter that is installed with Microsoft Internet Explorer 4 and later-known as "flipH"-flips any element horizontally, so that the element displays as a mirrored image. The following is the inline script that determines the direction of the images:

 <Script Language=VBScript> Option Explicit Dim strFilter If document.dir = "RTL" Then  strFilter = "filter:flipH;" Else  strFilter = "" End If document.write "<IMG src='/books/2/895/1/html/2/images/arrow.gif' Style='" &   _strFilter & "'>" </Script>

Alternatively, in an HTML file, the code would be as follows:

 <IMG Style=filter:flipH  SRC=C'images/arrow.gif'>

Forced Left Alignment of the Text

By default all tables, cells, and text in Latin-based script are aligned to the left. Explicitly adding the tag marked ALIGN=LEFT would overwrite the DIR attribute and would prevent the RTL text from being properly set to the right. Thus the ALIGN parameter in this case is superfluous. Because the default alignment for LTR display is left in any case, and because the default alignment for RTL display is right (since the DIR=RTL attribute has been applied), removing the ALIGN attribute completely will cause the page to display as intended. That is, it will be left-aligned for LTR languages, and right-aligned for RTL languages. As a general rule, less is more. If you put into your code only those elements and attributes necessary to produce the effect you need, you will avoid unnecessary headaches later on.

Absolute CSS Positioning

Absolute CSS positioning presents special problems for bidirectional Web sites. Figure 8-12 shows a dialog box after translation to Arabic and application of the RTL attribute. The buttons on the dialog box were placed using absolute CSS positioning. Not only do the buttons overlap the text, but the order of the buttons is fixed; the Yes button is fixed on the left side, and the No button is fixed to its right.

figure 8.12 a dialog box in which the buttons, which were placed using absolute css positioning, both overlap the text and have a fixed order.

Figure 8.12 - A dialog box in which the buttons, which were placed using absolute CSS positioning, both overlap the text and have a fixed order.

The following is the code that used absolute positioning:

 <BUTTON ACCESSKEY="Y"   style="font-family: Arabic Transparent, arial;   font-size: 10pt; position:absolute;  width: 58pt;   height: 19pt; left: 146pt; top: 230pt "   onclick="doOK()" > <u>Y</u>es</BUTTON>

In this case, absolute positioning was superfluous. Had the position attributes been left off the buttons, the buttons would have aligned themselves naturally. Removing the position, left, and top attributes (shown in bold in the previous code sample) from the style on the button causes the button to align more naturally below the text. In addition, allowing Internet Explorer to control the flow allows the button positions to be reversed, which is how they should be in this instance.

Reversibility Offered by Tables

Tables are the best and most reliable way to ensure that your content is correctly reversed when moving from LTR to RTL reading order, provided you do not specify alignment on the table cells. For example, take a look at the following HTML code:

 <Table width=100% border=0> <TR>  <TD bgcolor="#C0F000"><NOBR>Item 1 </NOBR></TD>  <TD width=30 bgcolor="#C0F000"></TD>  <TD bgcolor="#C0F000"><NOBR>Item 2 </NOBR></TD>  <TD width=30 bgcolor="#C0F000"></TD>  <TD bgcolor="#C0F000"><NOBR>Item 3 </NOBR></TD>  <TD width=700 bgcolor="#C0F000"></TD>  <TD bgcolor="#C0F000"><NOBR>Item 4 </NOBR></TD> </TR> </Table>

To summarize, here is a list of general rules for site design abstracted from the information presented in the previous sections that can help ease the process of translation and text reversal:

Avoid specifying ALIGN=LEFT unnecessarily.
Avoid CSS absolute positioning.
Use tables for robust reversibility.

Though not discussed in this chapter, you should also avoid inline styles. This rule is one of the coding standards of the HTML AutoLayout (HAL) documentation, which Microsoft uses internally. (To view the HAL documentation, see the Extras subdirectory on the companion CD, or go to http://www.microsoft.com/technet.) You have seen how to handle mirroring in Win32 applications and in Web pages. The final focus of this chapter is on the best ways to perform mirroring within the .NET Framework.