5

我们必须在 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）改变文本方向“从左到右”/“从右到左”？

我们感谢您的帮助。

4

3 回答 3

0

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

如果至少 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));

PS 方法可以优化，而且我相信需要某种基准测试；）

于 2019-08-01T16:57:43.370 回答
0

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

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

于 2017-08-21T20:33:27.610 回答
-3

干得好。将此CSS用于元素；但您需要先识别语言。

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

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

JSFIDDLE

于 2013-08-05T14:10:01.583 回答