Bidirectional user interfaces in WebFacing

WebFacing offers the ability to preserve the existing bidirectional (or bi-di) support from a 5250 application when it is Web-enabled.

Computer systems can process text and user interface elements left to right (as is the case in English) or right to left. Software that has support to handle these languages are said to have bi-di support.

Because existing 5250 applications are often already bi-di enabled, converting these applications requires some special steps to ensure that the WebFacing process interprets the direction of the input screens correctly.

Bidirectional considerations

The following are examples of things that can change from left to right or right to left:
  • display of bidirectional text
  • the relative position of HTML elements including table columns
  • tabbing index order for cursor control through the user interface (focus switching from one widget to the next)
  • cursor progression through a field
  • position of a scroll bar or helper buttons in relation to the widget it controls

Web technology like HTML and XHTML support bi-di with the common base direction attribute dir which can have a value of ltr (left-to-right) or rtl (right-to-left). This attribute can be applied to a number of different tags and the effect depends on the type of widget. Child elements inherit from the parent element. For example, to set the base direction of the entire HTML document to right-to-left, you would apply the attribute to the <html> tag: <html dir="rtl">.

In DDS, there are three keywords that control these kinds of behavior:
  • DSPRL for reversing the displays of screens symmetrically from left-to-right to right-to-left.
  • CHECK(RLTB) to make field tabbing proceed right-to-left and top-to-bottom.
  • CHECK(RL) to make the cursor progress right-to-left through a field.
The WebFacing Tool applies a unique set of rules to the conversion and enablement of bidirectional user interfaces. Here are some of the fundamental principles:
  • The rarely used DSPRL keyword is not supported and the WebFacing HTML page always has a document direction of left-to-right.
  • If the CHECK(RLTB) keyword is specified, then WebFacing assigns tab index values based on a grid (see below).
  • Any field which had the CHECK(RL) keyword specified on it has the dir="rtl" attribute assigned to its generated HTML.

The tab index layout grid

Tabbable widgets (elements that should be accessible by using the Tab key like fields and hyperlinks) can be assigned a tab index. Most browsers assume a default tab index order that proceeds through all tabbable widgets from left-to-right and top-to-bottom.

On 5250 screens where the CHECK(RLTB) keyword is used, WebFacing uses a grid to correctly implement right-to-left tabbing order on a left-to-right Web page. To accommodate fields which have been moved from their DDS positions, the grid has 250 columns and 131 rows. (The maximum value for the tabindex attribute is 32767.)
The WebFacing tab index grid for bidi applications

You need to understand this tab index grid in the following circumstances:
  • adding your own tabbable widgets through Web settings or direct editing of WebFacing JSP files
  • using CSS-P to move a tabbable widget enough to change its relative position in the tab index order

In the case of new tabbable widgets added through Web settings, you can use the substitution variable &{TABINDEX}. This will calculate the correct tab index order of your widget at conversion time.

Note: The Arabic 420 EBCDIC code page does not have the following characters:
{ }
[ ]
Therefore, the tab index substitution variable is not supported for members using the Arabic 420 code page, nor are other Javascript constructs, like arrays, that rely on these characters.
Related tasks
Setting tab order for bidirectional applications