Flip Horizontal CSS and reverse it with JavaScript based on RTL Direction

问题

I'm going to change LTR direction of whole web page to RTL direction, the easiest way it's flip horizontal css and then add class to each element section of page to make it as RTL direction. Here is my CSS code:

.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">

then we need to add rtl class to each element of page to make it as real RTL, for example:

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

now here is my question:

How to reverse whole of body class to RTL direction and flip horizontal using javascript ?

If there's any solution to change direction of body to RTL with JavaScript, then no need to add class of flip horizontal to each section of website. Currently the only way to change direction is that we add class to each texts sections and image sections elements fiv, span, p, and etc

I tried HTML direction RTL and body RTL, but not working, I believe if we will be able to force body direction to RTL and flip horizontal then it can be solved.

I highly appreciate any comment and idea in this question.

回答1:

It works when i force body to show either dir=rtl or dir=ltr. And for flip, i use your css and put * as the selector too select all element. check this out:

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>

More about this: Css Tricks on text direction

in case you want to flip all element can add this:

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

But if you means: from Hello world you want it to appear as dlrow olleH you can try this one:

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>

回答2:

As you are using flipH filter.

$(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>

来源：https://stackoverflow.com/questions/40779933/flip-horizontal-css-and-reverse-it-with-javascript-based-on-rtl-direction

标签

javascript

css

css3

right-to-left