使用text-align巧妙（如果英语dir = ltr如果arabic dir = rtl） [英] use text-align smartly (if english dir=ltr if arabic dir=rtl)

问题描述

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

• 带有方向LTR / text-align：left的英文帖子


• 方向为RTL / text-align的阿拉伯文帖子：右。

Google+和twitter提供了这样一个POST解决方案。

我想添加自动方向属性，当我阅读它从数据库后加载rtl或ltr！但我不知道如何？

解决方案

你需要创建一个函数， RTL并检查加载时。要显示RTL，您需要CSS属性 direction ， text-align 和 unicode- /jsfiddle.net/ThinkingStiff/Hcx6H/rel =nofollow noreferrer> sub>

脚本

  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> 
  

I have a community web site and I want that users write

• English posts with direction LTR / text-align: left) and
• Arabic posts with direction RTL / text-align: right.

E.g. Google+ and twitter provides such an POST solution.

I want add automatically direction attribute to post when i read it from data base post load in rtl or ltr ! but i don't know how ?!

解决方案

You'll need to create a function that has all the letters you know are RTL and check when loading. To display RTL you need the CSS attributes, direction, text-align, and unicode-bidi.

Demo:

Script

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>

这篇关于使用text-align巧妙（如果英语dir = ltr如果arabic dir = rtl）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！