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. Commented Apr 1, 2010 at 14:18
  • You're right, but the direction by itself isnt doing the trick, updated my answer.
    – Fabian
    Commented 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. Commented Oct 22, 2012 at 19:11

Your Answer

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

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