CODEWITHSUNDEEP
htmlcss
user1110666
user1110666

Reputation: 171

How to produce true rtl text with CSS

Using HTML markup, not CSS, the following code:

<bdo dir="rtl">Here is some Hebrew text!</bdo>

Produces this rtl text:

!txet werbeH emos si ereH

Using CSS, instead, the following code:

<p style="color:red; direction:rtl">Here is some Hebrew text!</p>

Produces this non-rtl text (but it does right-align it): 

!Here is some Hebrew text

Can I use CSS to achieve the same result I did with HTML markup?

Upvotes: 2

Views: 1303

Answers (2)

Alex Ivasyuv
Alex Ivasyuv

Reputation: 8814

Just set, 

<html dir="rtl">

and text and direction will work.

Upvotes: 0

ThinkingStiff
ThinkingStiff

Reputation: 65341

You need direction: rtl;, text-align: left;, and unicode-bidi: bidi-override;.

Demo: http://jsfiddle.net/ThinkingStiff/4NtD3/

HTML:

<bdo dir="rtl">Here is some Hebrew text!</bdo>
<p>Here is some Hebrew text!</p>

CSS:

p {
    direction: rtl; 
    text-align: left;
    unicode-bidi: bidi-override;
}

Output:

enter image description here

Upvotes: 3

Related Questions