Supporting Bi-directional text in Html TextArea

Published on Thursday, January 13, 2022

A <textarea> is an HTML element used to capture multiline user input. By default, it's direction is either right to left or left to right. But what if we want each paragraph to have it's own direction. This is very useful when the text is a mix of multiple languages. For example: Kurdish and English.

I asked the quesiton on Twitter and my good friend Akam Foad came to the rescue:

It turns out, that you can easily support this by specifying unicode-bidi: plaintext in the styles of the <textarea>

<textarea style="unicode-bidi:plaintext"></textarea>

And this is the result:

Without unicode-bidi:plaintext:

Update: Setting dir="auto" attribute on the <textarea> has the same effect:

<textarea dir="auto"></textarea>
comments powered by Disqus