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

Question

I'm new to html, and use hebrew a lot. I came across this problem, which makes me think I'm misunderstanding something.

As for as I know, the element has no effect, but it does allow adding style.

However, trying to do this:

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

Doesn't seem to work for me (the dir has no effect).

Using a <div dir="rtl">, on the other hand, works fine.

So.. why isn't the <span> working? As far as my understanding goes, I'm using <span> for exactly its purpose: adding styling. It works fine when I use it to add color... why not for this?

Thanks for any insights! Edan

P.S. After some testing, I also discovered that if I surround the text with <p> (inside the <span>), then the dir does take effect. But in that case, why wouldn'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 has an effect on a span, but a span will not be aligned to the right as you expect, only its content.
You will see the effect for span if you end it with a dot - the dot will be placed on the left side, and not on the right.
Div is a display:block element, meaning it fills the whole width - that's why text can be aligned in it. Span is display:inline, so it's sitting in the text, similar to a letter (in a simplistic way).
(by the way - it's considered invalid to have a block element inside an inline element)

Here's a working demo. Notice the last div is far on 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 span is an inline element, and dir doesn't apply to inline elements (the same way height and position don't). The reason it works with div and so on is that those are block elements. So you'll want to use a block element for setting your text direction.