单选按钮和文本在从右到左 (rtl) HTML 区域内的顺序是否正确？答案

【问题标题】：Are the radio buttons and text in proper order within a Right-To-Left (rtl) HTML area?单选按钮和文本在从右到左 (rtl) HTML 区域内的顺序是否正确？
【发布时间】：2013-02-20 06:04:24
【问题描述】：

在 HTML 的同一行上使用从右到左的单选按钮时，我注意到了一个问题。正如我所料，单选“按钮”与相关文本不一致；第 1 组的收音机在第 4 组的标签旁边，但其他按钮似乎按我的预期排列。这发生在多个浏览器上。

这是预期的行为吗？语言从右到左的人会理解这个吗？

你可以在这里玩代码：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" />

【问题讨论】：

标签： html radio-button right-to-left bidi

【解决方案1】：

我认为您的代码无法正常运行 rtl。

查看this jsfiddle。我在每个 input 标签及其相关文本之间添加了 &rlm;。这是this bug 的一种解决方法，结果产生了我认为是预期的输出。

<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" />

【讨论】：

【解决方案2】：

它的行为不正确，因为您的 div 是 rtl，但您的标签是英文的，这是一种 ltr 语言。在诸如希伯来语之类的 RTL 语言中使用标签也可以自然地解决问题，而且在 RTL div 中，您可能无论如何都需要 RTL 语言中的标签。

这是一个例子：

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

如果需要非RTL标签的RTL div，也可以使用bidi隔离：

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

注意样式规范。

这个解决方案比添加 ‏ 更优雅，但不幸的是它在 Microsoft Internet Explorer 中不起作用。

【讨论】：