Using <span> to add direction (dir = "rtl")

Question

I am new to html and use Hebrew a lot. I ran into this problem that makes me think that I do not understand something.

As you know, the element does not work, but it allows you to add style.

However, trying to do this:

<span dir="rtl"> some text that should be rtl'ed </span> 

It doesn't seem to work for me (dir has no effect).

Using the <div dir = "rtl"> function, on the other hand, works great.

So why is there no <span> at work? As far as I understand, I use <span> for its purpose: adding style. It works great when I use it to add color ... why not?

Thanks for any ideas! Eden

PS After some testing, I also found that if I surround the text with <p> (inside <span>), then the dir effect works . But in this case, why don't I just use <p dir = "rtl"> ... the whole idea is that I don't want any elements, just to style something.

Answer 1

dir affects the range, but the range will not align to the right, as you expect, only its contents.
You will see the effect for the span , if you end it with a point - the point will be placed on the left side, and not on the right.
Div is a display:block element, that is, it fills the entire width - so the text can be aligned in it. span display:inline , so it sits in the text, like a letter (in a simplified way).
(by the way, it was considered invalid to have a block element inside an inline element)

Here is a working demo. Note that the last div is far to the right:

 Test right to left, div and span: <br /> <span>(span) Hello World!</span> <br /> <span dir='rtl'>(span rtl) Hello World!</span> <div>(div) Hello World!</div> <div dir='rtl'>(div rtl) Hello World!</div> 

Answer 2

The difference is that the span is an inline element, and the dir does not apply to inline elements (just as there is no height and position). The reason it works with div, etc., is because these are block elements. Thus, you will want to use a block element to adjust the direction of the text.

Answer 3

I have a similar problem. I want to change the direction of a span element via css. In CSS, I use direction for range, but this does not work. Searching the Internet, I found that direction in css can only be applied to block elements. My question is: how to change direction for inline elements like span with css?