Question

我在我的网站https://developers.google.com/transliterate/v1/getting_started上使用Google语言API来支持多语言。到目前为止工作正常。

当用户选择阿拉伯语时，我希望网站从左到右方向。

所以我需要检查用户是否从谷歌下拉列表中选择了阿拉伯语，然后触发css事件以从左到右更改页面方向。

Answer 1

如果您在项目中使用jquery，这可能有所帮助，请在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>

修改

此插件已在HTML上添加了translated-rtl和translated-ltr类，您可以使用这些类来设置路线。

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

<强> Working Demo

Answer 2

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

请参阅链接yocan get ...

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

从左到右，从右到左设计

2 个答案: