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>