如何根据内部文本（英文/阿拉伯文）设置正确的元素css方向（ltr / rtl）？

Question

我想对阿拉伯语言和文本进行左右对齐。单击按钮时英语反转。我可以通过动态更改每个文本对齐来实现此目的。阿拉伯语是漫长的过程。

因此，任何机构都可以提供简短的做法。任何建议都非常感谢。

Answer 1

您可以使用css轻松设置内容方向。

HTML：

<div class="rtl">اليمين إلى اليسار</div>
<div class="ltr">Left to right</div>

的CSS：

.rtl{direction:rtl;text-align:right;}
.ltr{direction:ltr;text-align:left;}

修改

要在点击按钮时动态发生，请执行以下操作：

javascript＆amp; jQuery （我建议在这种情况下使用jQuery）：

// function that returns true if input is arabic, else false
function is_arabic(str) {
    var arabic = /[\u0600-\u06FF]/;
    return arabic.test(str);
}

// on button click
$(function(){
    $('#buttonID').click(function(){ // assuming 'buttonID' is the button id
        $('div').each(function(){ // iterate all DIV elements 
            if (is_arabic($(this).text())
                $(this).addClass('rtl').removeClass('ltr');
            else
                $(this).removeClass('rtl').addClass('ltr');
        });
    });
});

确保使用上面提到的CSS规则。

希望有所帮助。

Answer 2

在您的正文或div上添加 dir 属性，如下所示

<div dir="rtl"></div>

Answer 3

我用了这个解决方案

在CSS中添加此类

.rtl{direction:rtl;text-align:right;}

然后在您要从右到左的任何项目中使用此代码

<div class="@(Model.RtlEnabled ? "rtl" : "")"> Your right to left text <div>

我在ASP.Net核心中使用它，您可以为您的代码进行更改。