labels on wrong side of CheckBox/RadioButton/TextBox (RTL mode)

[bill]

Labels (or plain text) that come after a CheckBox/RadioButton/TextBox is appearing on the right side of the widget on an RTL page, even though it should appear on the left side.

Expected result (how native checkboxes work):

Actual result:

[bill]

native checkbox

[bill]

dijit checkbox

[Douglas Hays]

This seems to be a Firefox specific rendering problem.

[Douglas Hays]

Surrounding both the label and checkbox with a block element seems to fix the problem. I don't see a way to fix this in the widget itself.

<div class="dijitInline">
        <input id="cb" dojoType="dijit.form.CheckBox">
        <label for="cb">label</label>
</div>

[bill]

failure on safari

[bill]

failure on FF

[bill]

failure on IE7

[bill]

failure on IE8

[bill]

failure on IE6

[bill]

This problem is definitely not limited to FF. It happens on every single browser. See attached test_flow.html test case, which has three widgets with three labels:

It seems though to just be a general thing when labels are in an LTR script, as I'm getting the same problem with native controls.

Note that it's much worse than the labels being on the wrong side; they are completely disconnected from their associated form control.

[bill]

Oops, above image should be:

[bill]

test case w/many settings, for dijits and native controls

[bill]

different runs for english vs. arabic characters

[bill]

I've found that for BIDI purposes, browsers treat our inline widgets (CheckBox, RadioButton, TextBox, etc.) like neutral characters so their flow is affected by the surrounding strongly typed characters. (see ​http://www.w3.org/International/articles/inline-bidi-markup/)

You can see this in test_CheckBox.html. Duplicating the cb1 example and changing the English label into Arabic affects the position of the CheckBox? relative to it's label:

So it seems like our test files aren't broken, they are just confusing for testers, since the so-called RTL mode is still "half LTR", so to speak.

[bill]

(In [22739]) In dir=rtl mode, mark all labels as dir=rtl, even though they are English, so that the text flow of inline widgets (CheckBox, TextBox etc.) works correctly. Fixes #11041.

[bill]

(In [22748]) Put all of the label text inside of the <label>, so that it appears correctly in RTL mode. Fixes #5381, refs #11041.