use text-align smartly (if english dir=ltr if arab

2019-01-11 00:12发布

问题:

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

回答1:

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>


回答2:

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



回答3:

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>


回答4:

There is a CSS-only solution:

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

jsFiddle

Unfortunately this solution doesn't work with Microsoft Edge.



回答5:

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