PSA: Add dir="auto" to your inputs and textareas.
November 9, 2017•468 words
As someone living in the bubble that is the United States, it can be hard to think externally. But every so often I am reminded there is a world outside of my own. This sounds like a hugely unnecessary pep talk before I lay down something extremely simple. But one small change can be the difference between your app being used by people around the world, or just strictly by people like you. The distinction between these two worlds is something I endlessly struggle to comprehend; luckily, the folks building the fine web browsers we depend on are doing the hard work for us.
I’ve gotten requests to add right to left language support (RTL; languages like Hebrew, Arabic, and Urdu) in Standard Notes since its very beginning. And anytime I would begin to investigate what it would take, it seemed non-trivial.
Common solutions suggested adding a character listener on the input, and, when you detect a character that is RTL, you switch the direction of the input from dir=“left” to dir=“right”. Sounds semi-reasonable, but manual and scary. To me, unicode, ascii, and the entire world of encodings is not something I like to dabble with at a low level. So anytime I can avoid writing low level language parsing, I absolutely do.
This topic of adding RTL support would come up every few months, and every time I looked at it, it was the same advice: write a character parser, use this third-party library, or use dir=“right”—none of which I wanted. If you do a search for “textarea rtl” or “textarea right to left”, or other related terms, none of the results mention dir=“auto”. Instead, you’ll get answers like Use dir="rtl" in the tag?”, or this third-party library from Twitter that promises to handle this for you.
The first results page of Google never lies, so I thought this was just inherently a problem that required direct intervention, and so was never quite able to prioritize it (so much for my moral high ground).
It wasn’t until only a few weeks ago that I decided, enough is enough. This problem needs to be solved. I did some more searching for terms that I don’t remember now, and finally arrived at a GitHub post where an unsung hero commented “You can just add dir=“auto” to your textarea.”
What? No way. There’s no way that works. After a year of looking for solutions, and it was that easy?
Yup. Plugged it in, gave it a spin, and it worked flawlessly.
Wow.
So, my really small, but really big, public service announcement is: Google has been lying to us about RTL support in inputs. It’s a lot easier than you ever imagined.
<textarea dir='auto'> שלום, עתיד. </textarea>
And now you know.