Wie verschachtelte Basissprachen in textarea dynamisch angewendet werden?

Question

Ich bin auf der Suche nach der elegantesten Lösung, um sowohl rtl als auch ltr Sprachen in einem Textfeld zusammenzufassen: z.B. Arabisch und HTML zusammen.

The standards sagen nicht, dass es mit CSS zu erstellen:

direction: rtl; 
unicode-bidi: embed; 

Das ist nicht für mich sowieso nicht funktioniert, wie die html den verschachtelten Text Problem hat. Arabisch ist nach rechts ausgerichtet, aber der HTML-Code ist gebrochen.

Gibt es eine Möglichkeit, dies dynamisch zu tun? Der Standard möchte ein Nested Span-Tag hinzufügen, aber da ein Benutzer dies dynamisch eintippt, sehe ich nicht, wie das möglich ist, ohne das Ende jedes Zeichens zu erkennen.

Answer 1

Da der Inhalt eines textarea als Klartext genommen wird, können Sie keine span Markup oder andere Markup verwenden es, und man kann nicht einen Teil davon als anders als der Rest davon Stil (mit Ausnahme der ersten Zeile oder der erstes Zeichen, unter Verwendung von Pseudo-Elementen).

Auf der Klartext-Ebene kann die bidirektionale Einbettung jedoch mithilfe von Steuerzeichen erzwungen werden. Angenommen, Sie setzen direction: rtl für das Element als Ganzes (erwartet, dass Benutzer Daten in einer Sprache von rechts nach links eingeben), können Benutzer U + 202A LEFT-TO-RIGHT EMBEDDING eingeben, um Text von links nach rechts wie Englisch oder einzugeben HTML-Markup und beenden Sie dies, indem Sie in den Rechts-nach-links-Modus zurückkehren, indem Sie U + 202C POP DIRECTIONAL FORMATTING eingeben.

Da die meisten Menschen wissen nicht, wie diese Zeichen bequem zu geben, wenn über, könnten Sie Tasten für sie auf der Seite haben:

<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>