17

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 ?!

j0k
  • 22,600
  • 28
  • 79
  • 90
Drstreet
  • 227
  • 1
  • 2
  • 13

5 Answers5

22

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: jsFiddle

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>
ThinkingStiff
  • 64,767
  • 30
  • 146
  • 239
  • no i don't want use input ! i want load posts from db to show – Drstreet Aug 03 '12 at 00:59
  • 1
    @Drstreet That will work on any display element, like `

    ` or `

    `. And, before your edit, you did say input.
     – ThinkingStiff Aug 03 '12 at 01:00
  • sorry :) but somebody edited my post before that. i test this codes but not work :( – Drstreet Aug 03 '12 at 12:59
  • if i am using both the languages(like english and persian) together then how to handle nuteral characters like /, =, $ blah blah.... – Aqeel Oct 02 '12 at 14:09
  • @AqEeL My sample just checks the first character and decides if it's right or left. If you have more complicated rules, you'll probably have to check every character and decide left or right. Punctuation (`$, /, =` ) shouldn't affect your decision. – ThinkingStiff Oct 02 '12 at 18:00
  • surely but when there is a mixture of texts then how to decide alignment for neutral characters? – Aqeel Oct 03 '12 at 06:55
  • @AqEeL That's entirely up to your use case. I don't know if there is a standard way to display the mix. – ThinkingStiff Oct 03 '12 at 07:08
  • Just in case someone wants to search for all other common tags like h1, h2, h3, etc. The search should be performed like this: `document.querySelectorAll('h1, h2, h3, h4, h5, p, span');` – adelriosantiago Nov 13 '16 at 22:12
  • Iterating all your ``
    `` elements on every page is VERY ugly hack.
     – Kajbo Jul 31 '18 at 15:55
22

There is a CSS-only solution:

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

jsFiddle

Unfortunately this solution doesn't work with Microsoft Edge.

Nasser Sadraee
  • 952
  • 1
  • 8
  • 17
  • This solution deserves more up-votes. I was looking for solution like this all over the internet. All I found was some J query hack which will work only on on load. Thanks man. – Sudhan Nadar Jun 23 '20 at 08:04
  • For the above answer to work as intended, I considered adding a p tag inside that div. I made sure to add dir="auto" to the p tag for proper punctuations. – Ali Oct 14 '21 at 15:20
10

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>
farzad
  • 612
  • 8
  • 24
3

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

pcarvalho
  • 289
  • 6
  • 15
1

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';
    };
};
yottanami
  • 377
  • 2
  • 7