Question

我要将整个网页的LTR方向改为RTL方向，最简单的方法是翻转水平css，然后将类添加到页面的每个元素部分，使其成为RTL方向。这是我的CSS代码：

.rtl {
-moz-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
-o-transform: scaleX(-1);
transform: scaleX(-1);
-ms-filter: fliph; /*IE*/
filter: fliph; /*IE*/
}

<body class="rtl">

然后我们需要将rtl类添加到页面的每个元素以使其成为真正的RTL，例如：

<div class="rtl">Text Here</div>  => Real RTL Direction

现在这是我的问题：

如何将整个体类反转为RTL方向并使用javascript翻转水平？

如果有任何解决方案可以使用JavaScript将正文方向更改为RTL，则无需在网站的每个部分添加水平翻转类。目前改变方向的唯一方法是我们为每个文本部分和图像部分元素fiv，span，p等添加类

我尝试了HTML方向RTL和身体RTL，但没有工作，我相信如果我们能够强制身体方向到RTL并翻转水平然后它可以解决。

我非常感谢这个问题中的任何评论和想法。

Answer 1

当我强制身体显示dir=rtl或dir=ltr时，它会起作用。对于flip，我使用你的css并将*作为选择器选择所有元素。看看这个：

＆＃13;

var b = document.getElementsByTagName("body")[0];
b.setAttribute("dir", "rtl");
/* b.setAttribute("dir", "ltr"); */
console.log(b);

＆＃13;

<h1> Hello world </h1>
<div> Text Here</div>
<p>lorem ipsum lorem ipsum lorem ipsum</p>

＆＃13;

有关此内容的更多信息：Css Tricks on text direction

如果你想翻转所有元素可以添加这个：

* {
-moz-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
-o-transform: scaleX(-1);
transform: scaleX(-1);
-ms-filter: fliph; /*IE*/
filter: fliph; /*IE*/
}

但如果你的意思是：来自 Hello world ，你希望它显示为 dlrow olleH 你可以尝试这个：

＆＃13;

var ns = document.body.childNodes;
ns.forEach(function(elm) {
  if (elm.innerText && elm.nodeName !== "SCRIPT") {
    //set array of char then re-arrange char
    var arr = elm.innerText.split(''),
      temp = [];
    for (var i = 0, l = x = arr.length - 1; i <= l; i++, x--) {
      temp[i] = arr[x];
    }
    elm.innerText = temp.join('')
  }
})

＆＃13;

<h1> Hello world </h1>
<div>Text Here</div>
<p>lorem ipsum<span> span </span>lorem ipsum lorem ipsum</p>

＆＃13;

Answer 2

正在使用flipH过滤器。

$(document).on("click","html",function(){
  $(this).toggleClass("flipX");
})

body {
  background-image: linear-gradient(to left, rebeccapurple, skyblue);
  color: white;
}

.flipX {
  -webkit-transform: scaleX(-1);
          transform: scaleX(-1);
  -ms-filter: "FlipH";
  -webkit-filter: FlipH;
          filter: FlipH;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h1>Page Title</h1>
<p>Click to flip...</p>

翻转水平CSS并根据RTL方向使用JavaScript反转

2 个答案: