All geek questions in one place

Use text-align smartly (if English dir = ltr, if arabic dir = rtl)

I have a community website and I want users to write

  • Messages in English with LTR / text-align direction: left) and
  • Arabic messages with the direction RTL / text-align: right.

eg. Google+ and Twitter provide such a POST solution.

I want to add an auto-direction attribute for publishing when I read it from the database after loading in rtl or ltr! but I dont know how?!

+6
source share
4 answers

You need to create a function that has all the letters that you know RTL and check at boot. To display RTL, you need the CSS, direction , text-align and unicode-bidi .

Demo: jsFiddle sub>

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>
+15
source

you can specify dir="rtl" in html tags for proper presentation with php

in your CMS or if you do not use it, when storing context in the database, you may be able to store a variable with the direction of the text that the author used.

So, when retrieving the message, you can also select the option marked by the author.

otherwise, as programmers suggested, analyze the contents and see if there are Arabic characters or Latin characters.

Example

 <body dir="<?php se_11787707_get_post_language(); ?>">

without further information on how you post your posts, I cannot drill down much more. indicate how you store your messages and how to retrieve them.

I created a website using this tecnique and do Arabic rtl content daily. it is very simple:

working example dir = "rtl"

jsfiddle.net

link: w3.org

+1
source

In fact, the letters of the Arabic alphabet are these

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

and Persian (Farsi) letters of the alphabet - these

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

and it can be useful if you check the first and second letter, because sometimes it can start with 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
source

It is very simple. You can use dir = 'auto' Attribiute in the HTML Element. Therefore, if your text in Arabic or Persian text uses RTL, and if your text is an automatic text in English, use LTR.

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

Source: https://habr.com/ru/post/922002/

More articles:


All Articles