How to dynamically apply nested base languages ​​in textarea?

Question

I am looking for the most elegant solution for combining rtl and ltr languages ​​into a text box: for example. Arabic and html together.

Standards say don't create it using css:

direction: rtl; unicode-bidi: embed; 

This does not work for me anyway, since html has a problem with nested text. Arabic is right aligned, but html is broken.

Is there a way to do this dynamically? The standard wants to add a nested span tag, but since the user dynamically enters this, I don’t see how this is possible without detecting the end of each character.

Answer 1

Since the contents of a textarea is taken as plain text, you cannot use span markup or any other markup there, and you cannot style its part other than the rest (except the first line or the first character using pseudo-elements).

However, at the plaintext level, bidirectional nesting can be enforced using control characters. Assuming that you set direction: rtl for the element as a whole (expecting users to enter data in the language from right to left), users can enter U + 202A LEFT-TO-RIGHT EMBEDDING to enter text from left to right, such as English or HTML markup, and then complete this by returning to right to left mode by typing U + 202C POP DIRECTIONAL FORMATTING.

Since most people do not know how to type these characters correctly, if at all, you may have buttons for them on the page:

 <textarea id=msg name=msg rows=10 cols=40> </textarea> <br> <button type=button onclick="append('\u202A')">→</button> <button type=button onclick="append('\u202C')">←</button> <script> var msg = document.getElementById('msg'); function append(ch) { msg.innerHTML += ch; msg.focus(); } </script>