CODEWITHSUNDEEP
htmlcss
Aviel Fedida
Aviel Fedida

Reputation: 4102

HTML, CSS, Text Direction

I had a problem with css direction, Now after i fixed it i am trying to understand why the fix is working, So this was the problem:

I got on my css html{direction:rtl;}, I wanted to present numbers from ltr, So i decide using span tag and style this span tag with css span{direction:ltr;}, But i don't know why it didn't work i even tried span{text-align:left;}, Used !important on Both, direction and text-align, Finally i found 2 solutions:

  1. The first is using the attribute dir='ltr'
  2. The second is span{direction: ltr;display:inline-block}

I am using the second solution, But if anyone can explain both i will be very thankful, Thank you all and have a nice day.

Upvotes: 2

Views: 715

Answers (1)

stackErr
stackErr

Reputation: 4170

After digging into w3c specs I think I found an answer to your problem

From w3c:

HTML or XHTML served as text/html

Use markup only. The CSS2 recommendation recommends the use of markup for bidi text in HTML. In fact it goes as far as to say that conforming HTML user agents may ignore CSS bidi properties. This is because the HTML specification clearly defines the expected behaviour of user agents with respect to the bidi markup.

Emphasis added

So I am guessing that when you had direction: rtl; set in your css, it was completely ignored by the browser.

The spec clearly says that you should use the dir attribute in your markup for rtl layouts.

Although you have the CSS working for the browsers you have checked, it is not a solution for all browsers. Read the CSS spec for bidi/direction here

Upvotes: 3

Related Questions