Are the radio buttons and text in proper order within a Right-To-Left (rtl) HTML area?

I noticed an issue when using right-to-left-based radio buttons on the same line in HTML. The radio "button" does not line up with the associated text as I would expect; the radio for group 1 is next to the label for group 4, but the other buttons seem to line up as I would expect. This happens on multiple browsers.

Is this expected behavior? Would a right-to-left based language person understand this?

You can play with the code here: http://jsfiddle.net/6U9fw/

<div dir="rtl">
<input name="group" id="group1" type="radio" value="group1" />
<label for="group1">group1</label>
<input name="group" id="group2" type="radio" value="group2" />
<label for="group2">group2</label>
<input name="group" id="group3" type="radio" value="group3" />
<label for="group3">group3</label>
<input name="group" id="group4" type="radio" value="group4" />
<label for="group4">group4</label>
</div>
<input type="button" onclick="alert($('input[type=radio]:checked').val())" value="click" />

Solution

I do not believe your code is functioning as expected for proper rtl.

Check out this jsfiddle. I added &rlm; between each input tag and its associated text. It is a workaround for this bug, and the result produces what I believe is the expected output.

<div dir="rtl">
<input name="group" id="group1" type="radio" value="group1" />&rlm;
<label for="group1">group1</label>
<input name="group" id="group2" type="radio" value="group2" />&rlm;
<label for="group2">group2</label>
<input name="group" id="group3" type="radio" value="group3" />&rlm;
<label for="group3">group3</label>
<input name="group" id="group4" type="radio" value="group4" />&rlm;
<label for="group4">group4</label>
</div>
<input type="button" onclick="alert($('input[type=radio]:checked').val())" value="click" />