How to automatically change the site direction LTR\RTL?

Question

I am looking to make my site bilingual (Arabic\English) that's mean 2 different directions

English => LTR "Left To Right" Arabic => RTL "Right To Left"

so, I need a script "Like Facebook" that when the user chooses the Arabic Language the site will change the whole template+Text to RTL, and the exact opposite when choosing the English language.

Thanks & Best Regards,

P.S I've searched on this forum for this case, but i didn't find a useful info, so if there is a post talking about the same issue and it's [Resolved] kindly put the link below.

This is something you handle server-side, by checking the HTTP header `Accept-Language`, then responding with the appropriate locale, which might include locale-specific CSS directives like `direction: rtl` — Patrick Roberts, Jun 02 '17 at 05:00
**Check this** => https://stackoverflow.com/questions/11787351/use-text-align-smartly-if-english-dir-ltr-if-arabic-dir-rtl and **Here is a working demo** => http://jsfiddle.net/ThinkingStiff/Hcx6H/ — David R, Jun 02 '17 at 05:03
Hii bro here is my sample page www.geofrey.texpoldev.com I want this page to support LTR and RTL , and the user can switch between rtl and ltr using one of menu item eg change to rtl , how can I achieve this? — Jefferson X Masonic, Jun 02 '17 at 05:12

Manoj · Answer 1 · 2017-06-02T06:37:54.237

1

You need to load content by language from server. And If you want change direction in that case simply you can do this

If you need RTL than put this css

direction: rtl;

and when you need LTR then

direction: ltr;

Update

If you want to change direction on button click than try this

css

.rtl-direction {
   direction: rtl; 
}
.ltr-direction {
   direction: ltr; 
}

script

$('button').click(function(){
   $('body').toggleClass(function(){
      return $(this).is('.rtl-direction, .ltr-direction') ? 'rtl-direction ltr-direction' : 'rtl-direction';
  })
})

edited Jun 02 '17 at 06:37

answered Jun 02 '17 at 05:16

Manoj

4,951
2
30
56

I would like to have Buttons with RTL and LTR so that the user can switch if needed how can achieve that? – Jefferson X Masonic Jun 02 '17 at 05:37
Write a class in css for your buttons with the above suggestion – David R Jun 02 '17 at 05:57
can you please provide me example am newbie though – Jefferson X Masonic Jun 02 '17 at 06:36

score 0 · Answer 2 · answered Dec 31 '18 at 09:37

I used this solution

Add this class in CSS

.rtl{direction:rtl;text-align:right;}

then use this code in any items you want to be right to left

<div class="@(Model.RtlEnabled ? "rtl" : "")"> Your right to left text <div>

I use this in ASP.Net core you can change it for your code.

How to automatically change the site direction LTR\RTL?

2 Answers2