巧妙地使用text-align(如果arab dir = rtl,则为english dir = ltr)

Question

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

• 方向LTR/text-align:left)和
• 方向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>

Answer 2

有一个仅 CSS 的解决方案：

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

js小提琴

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

Answer 3

这很容易。您可以在 Html 元素中使用 dir='auto' 属性。因此，如果您的文本是阿拉伯语或波斯语文本，请使用 RTL，如果您的文本是英文自动文本，请使用 LTR。

<p dir='auto'>Hello</p>
<p dir='auto'>????</p>