JavaScript to flip texts horizontally

Question

I want to change direction of web page, I could change it using CSS method like below:

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

and add class flip into body section like this:

    <body class="flip">

As you know, page will flip horizontally completely, the problem is texts in page, that we can't read it, I'm looking for a solution to use JavaScript to UN-FLIP ONLY TEXTS in page. I mean only texts will be back to normal.

Is there anyway to use JavaScript to un-flip only texts in page?

I highly appreciate your help on this issue.

Thanks in advance

Simply unflip (yes, do the inverse) for inner elements like `h1, h2... h6, p etc...` — Roko C. Buljan, Nov 25 '16 at 08:53
Or you can select all text nodes and not flip them, or wrap into .do-not-flip element. Selecting text nodes http://stackoverflow.com/questions/298750/how-do-i-select-text-nodes-with-jquery — vkjgr, Nov 25 '16 at 09:16
How to use JavaScript to detect all texts in page ONLY, and un-flip them ? — farbon Larseige, Nov 25 '16 at 10:43

score 2 · Answer 1 · answered Nov 25 '16 at 08:55

2

You can simply use CSS to unflip the flipped text.

.flip {
  -moz-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  transform: scaleX(-1);
  -ms-filter: fliph;
  /*IE*/
  filter: fliph;
  /*IE*/
  border: 3px dashed red;
}
.flip>p {
  -webkit-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  transform: scaleX(-1);
  -ms-filter: fliph;
  /*IE*/
  filter: fliph;
}

<main class="flip">
  <p>FLIPPING? NO!</p>
</main>

answered Nov 25 '16 at 08:55

Roger Ng

771
11
28

Your code is based on CSS method, which we need to add all classes into CSS, and it will take really long time. I'm looking for easiest way like JavaScript to detect all texts on page ONLY, and un-flip them. – farbon Larseige Nov 25 '16 at 10:42

score 0 · Answer 2 · edited May 23 '17 at 12:30

First you need some class which make elements flip:

.flip {
    transform: scaleX(-1);
}

Then let's add this class to each element with no children (That's a simple way to find elements with only text):

Array.prototype.slice.call(document.querySelectorAll("body *"))
    .filter(ele => ele.children.length === 0)
    .forEach(e => e.className += " flip");

And now we only need to add this class to the body and that's it:

document.body.className += " flip";

Please note that this way does not flip text nodes, as they are not elements and can't have class. If you have text nodes my advice is to wrap them in <span>. See answer for how to get text nodes.

So a js-only solution would be:

document.head.innerHTML += "<style>.flip{transform: scaleX(-1);}</style>";

Array.prototype.slice.call(document.querySelectorAll("body *"))
    .filter(ele => ele.children.length === 0)
    .forEach(e => e.className += " flip");

document.body.className += " flip";

JavaScript to flip texts horizontally

2 Answers2