从左到右和从右到左设计

Question

我在我的站点 https://developers.google.com/transliterate/v1/getting_started 上使用 Google 语言 API 多语言。目前运行良好。

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

因此我需要检查用户是否已从 google 下拉菜单中选择了阿拉伯语，这将触发 css 事件以将页面方向从左更改为右。

Answer 1

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

参考 link 你可以得到...

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

Answer 2

如果您在项目中使用 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

从左到右和从右到左设计

Left to Right and Right to Left Design

html

css

bidi