Login Register

Bi-Directional Text

Bi-directional Text (Bi-Di)

Some languages, mostly middle-eastern in origin, have text flow from the right to the left (e.g. Hebrew and Arabic) This affects not just the characters in a sentence, but the entire flow of the user interface. The web browser generally takes care of this "mirroring" for us, provided the DIR attribute is set to "rtl" for right-to-left text direction. Note that text direction and locale are orthogonal concepts as defined by the HTML spec.

Dojo functions, including Dijit, only support a single text direction per document, which must be declared on the HTML or BODY element with the DIR attribute. With some exceptions, the HTML elements comprising the widgets on the page are flipped from right to left by the browser -- browser quirks occasionally require additional workarounds. Still, some other issues remain when mirroring the user interface of complex page fragments, such as those created by widgets. For example, if a graphic indicates a left or right direction, it may also have to be flipped or swapped to follow the new right-to-left logic. Wherever possible, mirroring is achieved using CSS rules. Sometimes the logic of an application or widget must change to accommodate Bi-Di. Keyboard accelerators or other code logic may also have to be modified. For example, in right-to-left mode, menu widgets drop down and to the left and contents are right-justified.

Bi-Di issues are largely related to widgets, and are therefore addressed mostly within the Dijit project. To support right-to-left users, some extra CSS is required. At the present time, these rules reside in a separate stylesheet and must be explicitly loaded to provide Bi-Di support. (e.g. themes/tundra/tundra_rtl.css, which imports themes/tundra/tundra.css for you)

As of the 1.1 release, all Dijits, except for deprecated widgets, are Bi-Di capable. DojoX BiDi support varies.

As of the 1.0 release, the following the widgets have limited Bi-Di support using the Tundra theme:

  • dijit.ColorPalette
  • dijit.Declaration
  • dijit.Dialog
  • dijit.Menu
  • dijit.ProgressBar
  • dijit.TitlePane
  • dijit.ToolBar
  • dijit.Tooltip
  • dijit.Tree
  • dijit.form.Button
  • dijit.form.CheckBox
  • dijit.form.ComboBox
  • dijit.form.CurrencyTextBox
  • dijit.form.DateTextBox
  • dijit.form.FilteringSelect
  • dijit.form.Form
  • dijit.form.InlineEditBox
  • dijit.form.NumberSpinner
  • dijit.form.NumberTextBox
  • dijit.form.Textarea
  • dijit.form.TextBox
  • dijit.form.TimeTextBox
  • dijit.form.ValidationTextBox
  • dijit.layout.ContentPane
  • dijit.layout.LinkPane
  • dijit.layout.StackContainer
  • dijit.layout.AccordionContainer

Islamic and Hebrew Calendars

Hi
Will the Islamic (Hijri) and Hebrew Calendars be supported ?

Not yet

This is something we'd like to see in the future, but currently there is no code in Dojo for this, except for some localized strings in the dojo.cldr package. Code contributions are welcome. This would make an excellent dojox project.

RTL and LTR at the same time

Is it possible to have widgets with different directions in the same page?
I tried the traditional HTML dir attribute on TextBox widgets and it made the widget not to work properly.

Not supported

There were a few reasons why we don't support this. The way the W3C attribute works, it's a bit expensive to do the lookups, since it requires traversing the DOM, so we look for the DIR attribute on the top of the document only. That DIR attribute triggers some conditional logic in the widgets and in Dojo base layout calculations, and we also use it to dynamically change CSS rules. If DIR="rtl" is found on the document, Dijit sets a CSS class "dijitRtl" on the document to trigger changes in CSS rules, which together with the conditional logic make the page render properly. In addition to performance issues, another reason why mixed direction is difficuilt to support is because simple CSS rules do not allow us to define a left-to-right section within a node with the dijitRtl class.

With that said, you might be able to get away with defining only certain portions of your document as DIR="rtl" within a left-to-right page and manually setting CLASS="dijitRtl" if the Dijit code you're using only needs CSS changes.