Come applicare dinamicamente le lingue di base annidate in textarea?

Question

Sto cercando la soluzione più elegante per mettere insieme entrambe le lingue rtl e ltr in una textarea: ad es. arabo e html insieme.

The standards dicono di non creare usando css:

direction: rtl; 
unicode-bidi: embed; 

Questo non funziona per me comunque, come l'HTML ha il problema del testo nidificato. L'arabo è allineato a destra ma l'html è rotto.

C'è un modo per farlo dinamicamente? Lo standard vuole aggiungere un tag span annidato, ma dal momento che un utente sta digitando dinamicamente questo in I non vedo come ciò sia possibile senza rilevare la fine di ogni personaggio.

Answer 1

Poiché il contenuto di un textarea viene preso come testo normale, non è possibile utilizzare alcun markup span o altro markup lì e non è possibile assegnare uno stile diverso al resto di esso (eccetto la prima riga o il primo carattere, usando pseudo-elementi).

Tuttavia, a livello di testo normale, l'incorporamento bidirezionale può essere applicato utilizzando i caratteri di controllo. Supponendo di impostare direction: rtl sull'elemento nel suo complesso (prevedendo che gli utenti inseriscano i dati in una lingua da destra a sinistra), gli utenti possono digitare U + 202A SINISTRA A DESTRA INTELLIGENTE per inserire il testo da sinistra a destra come l'inglese o Marcatura HTML e quindi terminare, tornando alla modalità da destra a sinistra, digitando U + 202C FORMATTING POP DIRECTIONAL.

Poiché la maggior parte delle persone non sanno come digitare questi caratteri comodamente, se non del tutto, si potrebbe avere pulsanti per loro sulla pagina:

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