Code section follows the direction of surrounding text

[ahangarha]

I am using SchildiChat version: 1.7.24-sc1 and I experienced an issue with text direction.

It can be seen when a code section is surrounded with RTL text and then gets forcefully RTL. See the following screenshot.

The code section should determine direction of its content, line by line, independent from what direction the surrounding text has. I emphasis on line by line determination since it is possible to have some RTL lines in the code.

[su-ex]

Do you have an advice on how to realize a strong isolation with side hopping between lines (preferably just with html and css)? This could also be useful for the send/edit message input box as well.

Would this be fine in terms of word order?

This is what gedit does: I assume this would be optimal. I have no clue however how to achieve this with just html.

[ahangarha]

If you can add dir="auto" to pre HTML attribute or set unicode-bidi: plaintext style to it. The second is not encouraged though it work perfectly.

If needed add text-align: start as well.

The second code is perfectly fine. For your test I would suggest to use this string: یک two سه four. Now you see it LTR but if it be at the beginning of a line, it should look like the following (of course on right side:

‫یک two سه four

Don't copy the second since it has an invisible RLM character at the beginning to force RTL direction. For your test, just use the first one.

This is the result of add unicode-bodi:plaintext to pre:

I hope it be useful

[su-ex]

To add dir="auto" is no problem. Everything except the sender is already set to text-align: start.

(of course on right side

This is what I don't know how to achieve. If I compare the two screenshots I sent, word order seems to be matching. But having it hop left and right aligned (like my second screenshot) is something which doesn't seem to be possible except by putting every line inside the code box into it's own block element which seems to me like a clumsy solution at best.

[ahangarha]

See this example:

This is what is intended to be rendered. It works fine in both cases (dir=auto and unicode-bidi)

You might want to try this as message content to test yourself:

بررسی امکان درج کد دوسویه
`\``
<style>
    [x-cloak] {
        display: none !important;
    }
</style>
یک two سه four
`\``

I just added one \ between back ticks to keep them visible to you.

[su-ex]

Which browser do you use? I noticed multiple differences in rtl behavior between Chromium and Firefox.

[ahangarha]

I use firefox but I tried the code in the app itself.

There shouldn't be any difference between Chromium and Firefox in this regard. If there is, please share with me. I need such details so I can keep them in mind for other cases on bidi support issue.

[su-ex]

I've fixed this now in here: https://github.com/SchildiChat/matrix-react-sdk/commit/60ac2184de12b7705820db02da6c909c6318c92e

Sadly I didn't note down the differences between Firefox and Chromium I noticed. The most obvious of them is Chromium still doesn't support :dir(). I've put some workarounds in place to achieve still acceptable results (I hope), but I'd consider this a best effort approach.

Another difference is that this issue here also affects link previews in Firefox but not in Chromium:

[ahangarha]

The screenshot doesn't look correct. The code section is still RTL. If this is the result, the issue is not resolved.

[su-ex]

The screenshot was before the changes. It was just to demonstrate the difference between Firefox and Chromium at the same revision.