基于RTL方向，使用JavaScript实现CSS水平翻转并反转

Question

基于RTL方向，使用JavaScript实现CSS水平翻转并反转

3

我想要将整个网页的文字方向从左向右(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

现在我有一个问题：

如何使用JavaScript将整个页面的class翻转至RTL方向并水平翻转？

如果有一种解决方案可以使用JavaScript改变页面方向为RTL，则无需在每个文本和图片部分元素（如div、span、p等）中添加水平翻转的类。目前唯一的改变方向的方式是我们需要为每个文本和图片部分元素添加翻转类。

我尝试了使用HTML direction RTL和body RTL，但它们不起作用。我相信如果我们能够强制页面的方向为RTL并进行水平翻转，那么这个问题就可以解决。

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

- Moban Roban

我有些困惑，你能否分享一张图片来说明你的意图？请注意，“方向”和“水平翻转”是不同的概念... - kukkuz

很明显，如果我们使用CSS来翻转，则就像镜子一样，但您无法阅读文本，因为它被翻转了，这不是RTL，您需要根据类再次翻转它。 - Moban Roban

2个回答

0

由于您正在使用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>

- Veiko Jääger

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- RizkiDPrast · Accepted Answer

当我强制将body显示为dir=rtl或dir=ltr时，它可以正常工作。对于flip，我使用了您的CSS，并将*作为选择器选择所有元素。请看这个：

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

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

关于此问题更多信息请参考：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 你可以尝试这个：

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('')
  }
})

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