CODEWITHSUNDEEP
htmlcssbidi
user3597236
user3597236

Reputation: 115

Left to Right and Right to Left Design

I am using the Google language API for multi language on my site https://developers.google.com/transliterate/v1/getting_started. Which is working fine so far.

I want the website orientation from left to right when the user selects the Arabic language.

So I need to check that the user has selected Arabic from the google dropdown which will then trigger a css event to change the page orientation from left to right.

Upvotes: 3

Views: 1974

Answers (2)

Abhishek Pandey
Abhishek Pandey

Reputation: 13568

If you are using jquery in your project, this may help, add language value in lagArray.

var lagArray = ['ar', 'fa', 'ur']
$('#languageDropDown').on('change', function() {
  var $this = $(this);
  for (var i = 0; i < lagArray.length; i++) {
    if ($this.val() === lagArray[i]) {
      $('html').attr('dir','rtl');
      return false
    } else {
      $('html').attr('dir', 'ltr');
    }
  }
})
.rtl{
  direction: rtl;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="languageDropDown">
  <option value="am">AMHARIC</option>
  <option value="ar">ARABIC</option>
  <option value="bn">BENGALI</option>
  <option value="zh">CHINESE</option>
  <option value="el">GREEK</option>
  <option value="mr">MARATHI</option>
  <option value="ne">NEPALI</option>
  <option value="or">ORIYA</option>
  <option value="fa">PERSIAN</option>
  <option value="ur">URDU</option>
</select>

<div class="textbox">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, consequuntur eaque eos aliquid dolor natus dolores, commodi cum, reiciendis mollitia autem ex reprehenderit quos fugiat molestias corporis neque tempore aliquam.
</div>

Edit

This plugin is already adding classes translated-rtl and translated-ltr on HTML, you can use these classes to set directions.

.translated-rtl{
 direction: rtl;
}

.translated-ltr{
 direction: ltr;
}

Working Demo

Upvotes: 2

user7584647
user7584647

Reputation: 

use like this  
<!DOCTYPE html>
<html dir="rtl" lang="ar">
<head>
<meta charset="utf-8">

refer the link yocan get...

https://www.w3.org/International/questions/qa-html-dir

Upvotes: 3

Related Questions