[css-writing-modes] unicode-bidi: plaintext not affect ul/ol

[alihardan]

This spec in w3.org: https://www.w3.org/TR/css-writing-modes-3/

When I set unicode-bidi to plaintext, direction should be set automatically. But on ul and ol tags, It not works.

The example is:

<ul style="unicode-bidi:plaintext">
<li>سلام</li>
<li>آزمایش</li>
</ul>

<ol style="unicode-bidi:plaintext">
<li>سلام</li>
<li>آزمایش</li>
</ol>

[frivoal]

As far as I can tell, it does what it is supposed to do, but that seems to be less than what you expect it to do:

• it only affects bidi reordering of text, not anything (like which side the list markers go on) which depends on the computed value of the direction property
• it is not inherited.

I think this little demo should help clarify: https://jsbin.com/valaluf/edit?html,output

[alihardan]

@frivoal, Thanks. Is it possible to change this in the future of CSS and make unicode-bidi:plaintext affects on other things?

[frivoal]

@ali-hardan I'm not sure I would rule it out 100%, but it seems doutful:

• unicode-bidi: plaintext isn't ancient, but it's not brand new either, and Firefox and Chrome have been supporting it for 2 or 3 years, so there is probably content that depends on the behavior staying the same
• It's a little more complicated, but in effect it boils down to this problem: https://wiki.csswg.org/faq#selectors-that-depend-on-layout. If unicode-bidi: plaintext could affect the direction so that the :dir() selector could react to it. Selectors changing based on the value of properties isn't possible, because otherwise you could write this, which browsers cannot handle:

   div:lang(lrt) { unicode-bidi: plaintext; }
   div:lang(rtl) { unicode-bidi: normal; }

  Maybe it could be made to affect the logical properties at computed value time without affecting the :dir pseudo class, as that's not a loop, but having logical properties and :dir be inconsistent sounds pretty bad too.

[frivoal]

@fantasai should know this better than me, and be able to tell if I'm missing something here.

[fantasai]

@frivoal's explanationis entirely correct with his explanation, but he misses one thing: the feature you're looking for exists in HTML. Use dir=auto, and it should do what you expect. HTML is able to calculate the direction before CSS runs, so it will be able to give you the results you expect.

In general, we strongly strongly recommend that authors do not use direction or unicode-bidi directly, and use the dir attribute in HTML. I think you should be seeing that advice very clearly laid out in the spec section you're linking, no? :)

I also want to warn you: the automatic determination of 'direction' is a very dumb heuristic. It only looks at the first letter. There is a lot of text content out there that is in an RTL language but begins with an LTR character, such as a number (2018) or an abbreviation (USA) or some other LTR text. This will give you bad results! So you should, if it's at all possible, try to use dir=ltr or dir=rtl explicitly based on the language of your content as you know it, or can guess it from some more sophisticated heuristic. (We use this simple heuristic for dir=auto because it works frequently if not quite reliably, it's straightforward and easy to understand, and it can be easily manipulated using the RLM and LRM characters.)

[fantasai]

Basically the advice is:

1. Figure out the language and use dir=rtl and dir=ltr as appropriate, if you can.
2. Use dir=auto if you can't know the language.
3. Never use CSS direction or unicode-bidi properties with HTML. Only use HTML dir attribute.

[alihardan]

Thanks for your help.

Yes I know it's better to use html dir because browsers can disable CSS.

Sometimes we are sure client are not disabled CSS, so we have no problem using it. When we sure clients enabled CSS and when we have used RLM and LRM characters to set direction, I think it is not good idea to repeat dir=auto many times, and would be better to set elements direction to auto using CSS. But this feature not exists this in CSS.

One good example is when we convert markdown to html using it's tools. Most of them not add dir=auto into html export. So we should do one of these options:

1. Add dir to all elements manually. I don't like this.
2. Write a javascript to add dir=auto into elements.
3. Use CSS to set direction automatically, but CSS can't. 😔 It possible to use unicode-bidi, but not affect ul,ol,table

[fantasai]

Sounds like the markdown processor should be updated to set dir correctly.