Supporting Bi-directional text in Html TextArea

mhmd_azeez

Muhammad Azeez

Posted on January 13, 2022

Supporting Bi-directional text in Html TextArea

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:

have you tested applying unicode-bidi: plaintext on textarea?https://t.co/UC8A0ZKYKj

— Akam Foad (@akamfoad) January 13, 2022

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>
Enter fullscreen mode Exit fullscreen mode
💖 💪 🙅 🚩
mhmd_azeez
Muhammad Azeez

Posted on January 13, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related