When using unicode-bidi: plaintext; the element renders in the correct direction, for example

<p>English ltr</p>
<p>عربي ltr</p>

*{
unicode-bidi: plaintext;
}

However, when also applying width: fit-content; the elements render as ltr only

demo

When using unicode-bidi: plaintext; the element renders in the correct direction, for example

<p>English ltr</p>
<p>عربي ltr</p>

*{
unicode-bidi: plaintext;
}

However, when also applying width: fit-content; the elements render as ltr only

demo

• css

1 Answer 1

The elements are rendered in the correct order from the right side of the div to the left. The div itself, however, is rendered from the left, so if it's size is fit-content it looks aligned left, but the order inside the div is the correct order.

Hover the Arabic text in the example to remove unicode-bidi, and see the difference.

p {
  width: fit-content;
  border: solid thin;
  
  &:not(:hover) {
    unicode-bidi: plaintext;
  }
}

<p>English</p>
<p>عربي ABCD</p>