javascript - 巧妙地使用文本对齐(英语 dir=ltr 在阿拉伯语 dir=rtl)

Question

我有一个社区网站，我希望用户写信

• 方向为 LTR/text-align: left) and 的英文帖子
• 方向为 RTL/text-align: right 的阿拉伯文帖子。

例如Google+ 和 twitter 提供了这样的 POST 解决方案。

我想在 rtl 或 ltr 中从数据库中读取后加载时自动添加方向属性以进行发布!但我不知道怎么办？!

Answer 1

您需要创建一个函数，其中包含您知道的所有 RTL 字母并在加载时进行检查。要显示 RTL，您需要 CSS 属性、direction、text-align 和 unicode-bidi。

演示:

脚本

function checkRtl( character ) {
    var RTL = ['ا','ب','پ','ت','س','ج','چ','ح','خ','د','ذ','ر','ز','ژ','س','ش','ص','ض','ط','ظ','ع','غ','ف','ق','ک','گ','ل','م','ن','و','ه','ی'];
    return RTL.indexOf( character ) > -1;
};

var divs = document.getElementsByTagName( 'div' );

for ( var index = 0; index < divs.length; index++ ) {
    if( checkRtl( divs[index].textContent[0] ) ) {
        divs[index].className = 'rtl';
    } else {
        divs[index].className = 'ltr';
    };
};

CSS

.rtl {
    direction: rtl; 
    text-align: right;
    unicode-bidi: bidi-override;
}

.ltr {
    direction: ltr; 
    text-align: left;
    unicode-bidi: bidi-override;
}

HTML

<div>hello</div>
<div>ظ</div>