Question

我们必须在页面中显示一些可能是英文或阿拉伯文的文字。我们正面临文字方向的问题。

对于英语，方向将是从左到右，对于阿拉伯语，方向将是从右到左。我们已经添加'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）改变文本方向“从左到右”/“从右到左”？

感谢您的帮助。

Answer 1

因为至少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');
}

您可能需要调整辅助方法的正则表达式，以更好地覆盖相关案例。

Answer 2

您可以尝试根据字符代码猜测文本方向。

如果至少有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。该方法可以优化，并且我认为需要某种基准测试；）

Answer 3

你走了。将此css用于元素;但你需要先识别它。

.rtl {
    direction: rtl; 
    unicode-bidi: bidi-override;
}

.ltr {
    direction: ltr; 
    unicode-bidi: bidi-override;    
}

JSFIDDLE

在IE中是否有dir = auto的替代属性

3 个答案: