Login Register

Dijit Widgets

All Dijit Widgets are implemented according to these Globalization guidelines except for right-to-left bi-directional (BiDi) support, which is not complete as of the 0.9 release.

You should not specify both the height and the width of a widget to be translated by numeric units.
You must ensure that all resources used in widgets are localizable.
You should consider BiDi support in development and customization.

Translation Spread

Should not specify both the height and the width of a widget to be translated by numeric units

When the text content in a widget is translated into another language, the translated string might be longer than the original one, i.e., the one in English. If you specify the size of the widget by numeric units, the widget may not render properly in other languages. For example, some text might be truncated or unexpected text wrapping may distort the layout. Therefore, keeping the translation spread in mind at the beginning of development might be a better practice. You can use the following approaches to set the size of a widget:

  • Use percentage rather than numeric units.
  • Set only one of the dimensions (height or width) in numeric and leave the other as auto. You can also use the white-space style to control the text-wrapping style. This can make the widget expand on the right.

Using BiDi Support

Eventually, all Dijit widgets will be consistent with the direction of the HTML document. [TODO: the following text needs to be changed; I think we're only checking for the .dijitRtl class which is based on the document's direction -AP] By default, the display direction is inherited from the parent node, and the direction of the whole page is left-to-right. There are two ways to change the display direction for an HTML node: one is to set the DIR attribute, and the other is to set the direction style. The direction style can override the setting to the DIR attribute, and the computed value of the direction style is the actual way in which the node is displayed. To make the pop-up menu mirrored, for example, you can just set DIR="rtl" on the HTML node to mirror the whole page.

If a page contains a right-to-left layout, you must also import the RTL style sheet of the current Dojo theme and make sure that it is the last one to be imported. The RTL style sheet has no effect on the left-to-right layout.
view plaincopy to clipboardprint?

<style>
@import "../../../dojo/resources/dojo.css";
@import "../../themes/tundra/tundra.css";
@import "../../themes/tundra/tundra_rtl.css";
</style>

If the whole page is in a right-to-left layout, you only need to import the RTL style sheet. To make the whole page right-to-left, you can set DIR="rtl" on either the HTML node or the BODY node.

If you want to mix both left-to-right and right-to-left layouts in a page, you must add a dijitRtl class to each right-to-left layout container besides importing the RTL style sheet.
view plaincopy to clipboardprint?

<div dir="rtl" class="dijitRtl">
<div dojoType="dijit.Tree">
...
</div>
</div>

Using Localized Widgets

Benefited from the CLDR support of the Dojo core library, Dijit provides plenty of localized widgets that are related to date, number, and currency data processing. You can find their introduction and manual in the corresponding chapters in the Dojo Book 0.9. These widgets include:

  • dijit.form.NumberTextBox
  • dijit.form.CurrencyTextBox
  • dijit.form.TimeTextBox
  • dijit.form.DateTextBox

Widgets Development and Customization

You must ensure that all resources used in widgets are localizable.

The resources that are used in widgets include texts, images, audio and video clips, etc. Only HTML code and style names can be hard-coded in the widget code. You can use the resource bundles in Dojo to store localized resources. See "Locale and Resource Bundle" for more information.

Should consider BiDi support in development and customization .

Most browsers and HTML itself support the mirrored display in the BiDi environment, but it does not mean that Dijit widgets can support BiDi by nature. There still are some specific codes in Dijit to handle the mirror feature. For example, when displayed in right-to-left direction, the popup menu should appear from left rather than from right, and the arrow that indicates sub menus should also be flipped.

[TODO: strike this para? I think dir is gone? -AP]
Dijit widgets have a dir attribute that is defined in the dijit._Widget class, the base class of all widgets. The dir attribute can be set to indicate the direction of the widget when it is being created. To know the actual direction in the code, you should use the _Widget.isLeftToRight() function. The returned value of this function is not supposed to be changed after the widget is created. That is, currently, Dijit widgets do not support dynamic change of the display direction.

To develop or customize the Dijit widget with BiDi enabled, you should use different styles for the left-to-right and right-to-left directions. For example, it is always required to change the styles like float: left and background-image: url(images/left-arrow.png) for the right-to-left layout for some portion of a widget. You can write all right-to-left styles in an RTL style sheet, and all style classes should begin with the dijitRtl class:
view plaincopy to clipboardprint?

.dijitRtl .TreeContainer .TreeExpando {
float:right;
}

Better still, try to avoid any gestures or visual cues which imply left or right direction, so that styling and coding for BiDi becomes unnecessary. For example, dijit.Tree uses the space key to open a tree instead of a left or right arrow. A "+" symbol might be used for an indicator for extended data, rather than a left or right arrow.

a couple of confusing statements

"If the whole page is in a right-to-left layout, you only need to import the RTL style sheet. To make the whole page right-to-left, you can set DIR="rtl" on either the HTML node or the BODY node."

This part took me a while to work through. I think the intended meaning of the first sentence was:
"If you only want an RTL layout for the whole page, you only need to import tundra_rtl.css, and don't need to include tundra.css."
But is that really true? tundra_rtl.css in 0.9 is clearly an exception file to tundra.css.

My interpretation for the second sentence:
"If you do want an RTL layout for the whole page, you can set DIR="rtl" or either the HTML tag or the BODY tag."
What I can't figure out from the surrounding documentation and [editor] comments is whether that is enough to force dijitRTL properties to be auto-set.

I think it should say ...to

I think it should say ...to support BIDI you must import the _rtl style sheet in addition to the regular one, that is tundra.css AND tundra_rtl.css, as in the example.

And yes, simply putting the DIR="rtl" at the top of your document is enough. Dijit will inspect that and put a dijitRTL class on the document for you. Alternatively, I think you can also put dijitRTL on sections of the document yourself, but that's neither documented nor supported at this time :-)

see also

Does grid support bidi?

when I add dir="rlt" to html, using IE, the view of grid cannot be shown, and when using firefox, the model data of grid cannot be shown until be clicked.

rtl grid does not work in 1.0

We're shooting for rtl support in 1.1. You may wish to try trunk, as there have been some improvements in this area, and file tickets for any problems you see which aren't already reported here: trac.dojotoolkit.org/report/38