13

Is there a CSS code that changes this text

This is it

to this one

ti si sihT

6 Answers 6

27

Try this

.cssClassName { direction:rtl; unicode-bidi:bidi-override; }

EDIT: apply this class to a paragraph tag and you should get the results your looking for.

0
7

Yes, there is:

.reversed {
   direction: rtl; unicode-bidi: bidi-override;
}
6

Thats not right to left, thats mirroring.

CSS:

direction: rtl;
unicode-bidi:bidi-override;
2
  • You don't have to use Javascript. There's CSS attribute direction:rtl. Apr 1, 2010 at 14:18
  • You're right, but the direction by itself isnt doing the trick, updated my answer.
    – Fabian
    Apr 1, 2010 at 14:19
3

@victor-jalencas gave the answer.

The other thing some people here started talking about is flipping and it is done with replacing the normal text with Unicode flipped equivalents.

Example can be found here: http://www.revfad.com/flip.html

0
2

You can use CSS filter filp (Only supported in IE)

<div style="width: 300; height: 50; font-size: 30pt; font-family: Arial Black; color: red; Filter: FlipH">CSS Tutorials</div>
2

Try this, IE does seem to have a bit of a hard time rendering fonts smoothly, but it works like a charm in all browsers. I have tested IE 7-9, Ff, Chrome and Safari on Win 7

.flipText {
display: block;
-moz-transform: scaleX(-1); /* Gecko */
    -o-transform: scaleX(-1); /* Opera */
    -webkit-transform: scaleX(-1); /* webkit */
    transform: scaleX(-1); /* standard */
    filter: FlipH; /* IE 6/7/8 */
-ms-filter: "FlipH";
}
1
  • you should also remember to add a bg color to your element that contains the text - for IE's benefit of course. Otherwise you may ebd up with VERY jagged fonts rendered in all of IE. Oct 22, 2012 at 19:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.