Tutorial :Text: right to left (CSS)


Is there a CSS code that changes this text

This is it  

to this one

ti si sihT  


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.


Yes, there is:

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


Thats not right to left, thats mirroring.


direction: rtl;  unicode-bidi:bidi-override;  


@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


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>  


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";  }  

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Next Post »