Another weird behavior of css How to fix it?

Question

Another weird behavior of css:

I have this structure and apperently I should get the strong tag ltr and everything else in p tag rtl :

 p { direction: rtl; } strong { direction: ltr;important }

 <p> <strong>This should be to right side. این باید سمت راست باشد</strong> </p>

But it ignores the style of strong tag - how can I fix this?

Answer 1

From MDN :

For the direction property to have any effect on inline-level elements, the unicode-bidi property's value must be embed or override.

So you could do something like this…

 p { direction: rtl; unicode-bidi: bidi-override; /* Dirty great hack; don't do this */ } strong { direction: ltr;important }

 <p> <strong>This should be to right side. این باید سمت راست باشد</strong> </p>

However the documentation for that property says:

Warning: This property is intended for Document Type Definition (DTD) designers. Web designers and similar authors should not override it.

---

The real issue here is that strong is an inline element. It can start in the middle of a line. It can word wrap.

There's not really a "left" or "right" because it isn't a solid block.

 p { direction: rtl; } strong { direction: ltr;important }

 <p> Text outside the strong. Text outside the strong. Text outside the strong. <strong>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. این باید سمت راست باشد این باید سمت راست باشد این باید سمت راست باشد این باید سمت راست باشد این باید سمت راست باشد این باید سمت راست باشد</strong>. Text outside the strong. Text outside the strong. Text outside the strong. </p>

You could set display: block on the strong element, but it would make more sense to just style the paragraph itself.