How to dynamically apply nested base languages in textarea?

Question

I am looking for the most elegant solution for putting both rtl and ltr languages together in a textarea: e.g. arabic and html together.

The standards say not to create it using css:

direction: rtl;
unicode-bidi: embed;

This does not work for me anyway, as the html has the nested text problem. Arabic is aligned to the right but the html is broken.

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

Answer 1

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

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

Since most people do not know how to type these characters conveniently, if at all, you could 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>