CODEWITHSUNDEEP
javascripthtmlcssangularjs
FDavidov
FDavidov

Reputation: 3675

html changing horizontal align of elements depending on the DIRECTION setting

I have a site that is due to support all languages, including RTL (Hebrew, Arabic, Persian, etc.). The applications is developed using AngularJS, Bootstrap and JavaScript.

By setting dir="auto" I get the text properly displayed (LTR for ENGLISH, RTL for ARABIC). My problem is with the alignment of elements.

Suppose you need to display a list. When the language is, say, English, the list would look:

- Entry 1; this is with a short tail,
- Entry 2; no tail,
- Entry 3; this is with a tail that is longer than the one of the 1st entry

If this list would be in, say, Arabic, it would look as follows:

دخول 1؛ هذا هو الحال مع ذيل قصير -
دخول 2؛ بلا ذيل، -
دخول 3؛ هذا هو الحال مع ذيل أطول من واحد من دخول 1ST -

which obviously should be right align like:

                         دخول 1؛ هذا هو الحال مع ذيل قصير -
                                           دخول 2؛ بلا ذيل، -
    دخول 3؛ هذا هو الحال مع ذيل أطول من واحد من دخول 1ST -

(my apologies to all Arab speakers, but I'm not one of you and used Google Translate, so I don't know what the quality of the translation is).

So, is there a way I could test the character set of the contents and set horizontal-align:left or horizontal-align:right?

Hope my question is clear...

Thanks in advance.

Upvotes: 3

Views: 173

Answers (3)

FDavidov
FDavidov

Reputation: 3675

I found a solution. There is an indication on the language of the data being received. I then set the div as:

<div .... style="text-align:{{User_This_Align}}">
...

Within the controller, is set the variable $scope.User_This_Align equal to 'left' or 'right' depending on the language of the data.

(This relies on Angular's data binding feature).

Thanks to those that sent their comments.

Upvotes: 1

S. Divya
S. Divya

Reputation: 91

First try giving direction in class. (Refer CSS direction Property in W3 school) Then depending on the language selected change the direction using ng-class.

Upvotes: 0

zai-turner
zai-turner

Reputation: 83

This is simple. All you have to do is put as follows into a css file:

text-align: right; -------------- To align it to the right

text-align: left; -------------- To align it to the left

text-align: center; -------------- To align it in the center

Upvotes: 0

Related Questions