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

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>

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

it's very easy. You can use dir='auto' Attribiute in Html Element. So if your text is Arabic or Persian Text use RTL and if your text is English automatic text use LTR.

<p dir='auto'>Hello</p>
<p dir='auto'>سلام</p>

There is a CSS-only solution:

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

jsFiddle

Unfortunately this solution doesn't work with Microsoft Edge.

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';
    };
};

来源：https://stackoverflow.com/questions/11787351/use-text-align-smartly-if-english-dir-ltr-if-arabic-dir-rtl

标签

javascript

html

css

internationalization

right-to-left