巧妙地使用文本对齐（如果英语目录=ltr，如果阿拉伯语目录=rtl）

Question

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

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

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

当我从 rtl 或 ltr 中的数据库后加载读取它时，我想自动添加方向属性以发布！但我不知道怎么办？！

原文由 Drstreet 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>

原文由 ThinkingStiff 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

有一个纯 CSS 解决方案：

 div {
    text-align: start;
    unicode-bidi: plaintext;
}

jsFiddle

不幸的是，此解决方案不适用于 Microsoft Edge。

原文由 Nasser Sadraee 发布，翻译遵循 CC BY-SA 4.0 许可协议