CODEWITHSUNDEEP
javascripthtmlcssinternationalizationright-to-left
Drstreet
Drstreet

Reputation: 227

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

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

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

Upvotes: 17

Views: 18224

Answers (5)

Nasser Sadraee
Nasser Sadraee

Reputation: 1022

There is a CSS-only solution:

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

jsFiddle

Unfortunately this solution doesn't work with Microsoft Edge.

Upvotes: 22

farzad
farzad

Reputation: 654

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>

Upvotes: 10

yottanami
yottanami

Reputation: 377

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

Upvotes: 1

pcarvalho
pcarvalho

Reputation: 290

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

Upvotes: 3

ThinkingStiff
ThinkingStiff

Reputation: 65381

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>

Upvotes: 23

Related Questions