4

PSA: Add dir="auto" to your inputs and textareas.

 1 year ago
source link: https://mough.xyz/312/psa-add-dir-auto-to-your-inputs-and-textareas
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

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.

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.

Super complex demo.

Mozilla documentation on dir.


Subscribe to the author

You'll only receive email when they publish something new.

More from MoAll posts

When nothing happens

November 8, 2017•410 words

I’ve spent the last week in a buggish sort of hell trying to track down bewildering software issues that made no sense at all. It was, by all definitions, hell. I hated myself for writing bugs. And I hated software for being so sensitive to my human-ness. After spending several days collecting clues and checking the same code over and over again, I concluded there was nothing visibly wrong, and it was time to exile myself to some remote island.

The issue would later be solved, of course. And i...

Read post

There is common behavior in the app (and technology) review world that, upon inspection, really does not seem to be logical. I’m sure you’ve probably seen user written reviews that read something like:

☆☆☆☆★

“This app is good, but it doesn’t have this one feature that this other app has. 1 star.”

This sort of comparison game is human nature, and while I don’t intend to change the nature of our behavior, I do hope I can make you think twice before posting a review like this in the future.

T...

Read post

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK