use text-align smartly (if english dir=ltr if arabic dir=rtl)

后端未结

关注

 5  1351

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 / tex

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>

0 讨论(0)

北海茫月

2020-12-02 20:10
There is a CSS-only solution:
```
div {
    text-align: start;
    unicode-bidi: plaintext;
}
```
jsFiddle

Unfortunately this solution doesn't work with Microsoft Edge.
0 讨论(0)
发布评论:

提交评论
- 加载中...
不思量自难忘°

2020-12-02 20:15
you can specify dir="rtl" in your html tags for the correct presentation with php

in your CMS or if you aren't using one, when storing the context to the DB you can have a option to store a variable with the direction of text the author used.

So, when fetching the post, you can also fetch the option the author marked.

otherwise, like the fellow programmers have suggested, parse the content and see if its arabic characters or latin characters.

example
```
<body dir="<?php se_11787707_get_post_language(); ?>">
```
without more information on how you are publishing your posts, i can't detail much more. please provide how you are storing your posts and how you are fetching them.

I've built a site using this tecnique and i deal with arabic rtl content everyday. it's very simple:

a working example of dir="rtl"

jsfiddle.net

reference: w3.org
0 讨论(0)
发布评论:

提交评论
- 加载中...

野趣味

2020-12-02 20:15

Actually the Arabic alphabet letters are these

var RTL = ['ا','ء','ب','ت','ث','ج','ح','خ','د','ذ','ر','ز','س','ش','ص','ض','ط','ظ','ع','غ','ف','ق','ک','ل','م','ن','و','ه','ی'];

and Persian (Farsi) alphabet letters are these

var RTL = ['ا','ب','پ','ت','ث','ج','چ','ح','خ','د','ذ','ر','ز','ژ','س','ش','ص','ض','ط','ظ','ع','غ','ف','ق','ک','گ','ل','م','ن','و','ه','ی'];

and it can be useful if check the first and second letter because sometimes it can starts by a bullet or something like that.

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

0 讨论(0)