我们必须在Page中显示一些可能是英语或阿拉伯语的文本。我们面临着文本方向的问题。
对于英语，方向将从左到右，对于阿拉伯语，方向将是从右到左。我们在中添加了"dir=auto"来动态地执行此操作。[表示将根据内容语言改变方向]
Exp :
<table>
<tr>
<th>english text</th>
<th>arabic text</th>
</tr>
<tr>
<td dir=auto><span>love</span></td>
<td dir=auto><span >حبحبحب</span></td>
</tr>
</table>
这些变化与Firefox和Chrome完美配合。但IE不支持这个属性，它正在挑战我们找到一些替代方法
因此，我们的问题是，如何根据内容（IE）更改文本方向"从左到右"/"从右到左"？
我们感谢你的帮助。
因为至少IE 11不正确支持dir="auto"，所以我编写了以下助手方法：
/**
* Helper to determine if text is LTR text.
* We assume that any left-to-right text contains at least one character from a to z,
* or ONLY the following characters: # _ [any alphanumeric character, including digits]
*
* @param {string} string
*
* @returns {boolean}
*/
function isLtr(string) {
return string.match(/[a-z]+|^['#'w]+$/gi) !== null;
}
使用这个助手，我检查每个元素的文本，并手动设置dir="rtl"，正如您在这个简化的示例中所看到的：
var element = document.querySelector('.element-with-dir-auto');
var text = '#حبحبحب';
if (!isLtr(text)) {
element.setAttribute('dir', 'rtl');
}
您可能需要调整helper方法的正则表达式，以便更好地涵盖相关情况。
您可以尝试根据charcode猜测文本方向。
如果至少50%的字符串填充了RTL符号，则该字符串处于RTL文本方向。
// Some helper function
function isNumberInRanges(number, ranges) {
for (var i = 0; i < ranges.length; ++i)
if (number >= +ranges[i][0] && number <= +ranges[i][1])
return true;
return false;
}
function guessTextDirection(text) {
/*
* https://www.w3schools.com/charsets/ref_html_utf8.asp
* [?] Non-letter symbolic ranges: 0..64, 91..96, 123..126, 127, 128..159, 160..191, 247, 8592..8703, 8704..8959, ...
* [LTR] Cyrillic, latin, greek, etc letters: 65..90, 97..122, 256..383, 384..591, 768..879, 880..1023, 1024..1279, 1280..1327
* [RTL] Arabic, Hebrew, etc letters: 1470..1920 (in facebook's humble opinion)
*/
text = text.trim();
var symbolsCounter = {
ltr: 0,
rtl: 0
};
for (var i = 0; i < text.length; ++i) {
var keyCode = text.charCodeAt(i);
switch (true) {
case (isNumberInRanges(keyCode, [[1470, 1920]])):
// this is rtl symbol
symbolsCounter.rtl++;
break;
case (isNumberInRanges(keyCode, [[65, 90], [97, 122], [256, 591], [768, 1327]])):
// this is ltr symbol
symbolsCounter.ltr++;
break;
// otherwise, this is non-letter symbol, omitting it
}
}
if (symbolsCounter.ltr > symbolsCounter.rtl) {
return 'ltr';
} else if (symbolsCounter.ltr < symbolsCounter.rtl) {
return 'rtl';
}
return '';
}
用法：
var label = document.querySelector('.some-label');
label.setAttribute('dir', guessTextDirection(label.textContent));
p.S.方法是可以优化的，而且，我认为，需要某种基准测试；）
开始吧。将此css用于元素；但你需要先识别郎。
.rtl {
direction: rtl;
unicode-bidi: bidi-override;
}
.ltr {
direction: ltr;
unicode-bidi: bidi-override;
}
JSFIDDLE