Add dir=“auto” to your inputs and textareas

This is indeed an easy way to fix text rendering in your inputs and textareas. However, you&#x27;ll also need to do the same for elements that render the submitted text. And once you encounter bidirectional text (e.g. an English product name within an Arabic paragraph), that opens up another whole can of worms...<p>Note also that there&#x27;s currently a regression in Chrome that affects how RTL text is rendered in inputs with dir=&#x27;auto&#x27;. They just shipped a fix though so it should be included in the next release.

MDN always comes to the rescue: <a href="https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;HTML&#x2F;Global_attributes&#x2F;dir" rel="nofollow noreferrer">https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;HTML&#x2F;Global_att...</a>

&gt; 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.<p>There is a world outside the US but you don&#x27;t <i>have</i> to support it, depending on what your site does. I&#x27;m not american. I&#x27;m not even a native english speaker. And 99% of the sites I go to are perfectly fine if they don&#x27;t allow neither usernames nor posts containing RTL characters.<p>If it&#x27;s not solved at the browser or OS level, I&#x27;ve got about zero obligation to support this.<p>And, no, this is not about oppressing minorities.

&gt; <i>The first results page of Google never lies...</i><p>I have something to tell you that will help you solve your problem, but you should sit down first, because it&#x27;s probably going to make you sad...

Sadly, both the website and the linked codepen render the source quite poorly. The period is in the wrong place! The rendered HTML is fine.<p>I assume this is just the Unicode bidirectional algorithm failing, as it is wont to do. I imagine that a special cased algorithm that understood that HTML tags (the stuff between &lt; and &gt; inclusive) should render as atomic things, internally LTR, but without imposing their direction on surrounding characters.<p>In this example, the algorithm should be willing to switch direction in the middle of the sequence “.&lt;“

On a related note, support for &quot;logical properties&#x2F;values&quot;[1] has become mature in recent years. These are alternatives to directional-based properties (top&#x2F;left&#x2F;bottom&#x2F;right) which are adaptable to switching content&#x2F;text directions.<p>[1] <a href="https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;CSS&#x2F;CSS_logical_properties_and_values" rel="nofollow noreferrer">https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;CSS&#x2F;CSS_logical...</a>

Uh.<p>If I search for textarea and BiDi text, in pretty much all variations I can think of <a href="https:&#x2F;&#x2F;www.w3.org&#x2F;International&#x2F;talks&#x2F;1602-oman" rel="nofollow noreferrer">https:&#x2F;&#x2F;www.w3.org&#x2F;International&#x2F;talks&#x2F;1602-oman</a> is one of the top links.<p>And right in there, the &quot;What if you don&#x27;t know the direction in advance&quot; section, <a href="https:&#x2F;&#x2F;www.w3.org&#x2F;International&#x2F;talks&#x2F;1602-oman&#x2F;#advance" rel="nofollow noreferrer">https:&#x2F;&#x2F;www.w3.org&#x2F;International&#x2F;talks&#x2F;1602-oman&#x2F;#advance</a><p>I assume the problem is that the author doesn&#x27;t really know the space, and so didn&#x27;t even know that &quot;BiDi&quot; is the right search term here. (For &quot;bi-directional text&quot;, since you don&#x27;t want to specify a writing direction)<p>I don&#x27;t even fault them for thinking &quot;the results are wrong&quot; - they aren&#x27;t, if you search for RTL they&#x27;re the right answer. But you won&#x27;t know that until you know the space a bit better. This highlights a problem with relying on the Internet for answers - it doesn&#x27;t know what you don&#x27;t know. Sit down with anybody who&#x27;s dealt with BiDi for a while, and one of their first questions will be &quot;Do you mean RTL or BiDi&quot;?<p>So, if you can, ask people, not software. Especially if you don&#x27;t know the space.

I&#x27;d also add a link here to `dirname` which is an interesting one for including text directionality of text input in form submissions: <a href="https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;HTML&#x2F;Attributes&#x2F;dirname" rel="nofollow noreferrer">https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;HTML&#x2F;Attributes...</a>

PSA: Assume dir=&quot;auto&quot; if none provided in browsers you develop.

Slightly related: I recently learned that vim has `:set rl` to make a text go from right to left. (`:set norl` to come back to regular)

Yeah, as far as I&#x27;m concerned, this is a deficiency of language detection. Specific types of input types should auto rtl based on the user agent&#x27;s locale usage.<p>A number of other automatic behaviors exist simply when you change your primary language, and this is one of them that should change by default. You&#x27;ll know this by experience if you speak another language and occasionally flip your primary language over. All the sites you browse start respecting your lang and locale settings.<p>Other technical or format-specific inputs should retain their relevant direction.

This is good advice, but the problem is that there is so much good advice about webdev (and everything) that one tends to form a FIFO queue in one&#x27;s brain such that the advice is inevitably lost.

There is also this shortcut of ctrl+shift+x to switch to RTL. Which is really funny when you do it on Twitter since it flips the entire user interface.

Why is that not default?

I find it rather baffling that people don&#x27;t seem to spend any time reading specs. I haven&#x27;t done anything even remotely serious in HTML since about 2003, and I know about (and have used) the dir attribute.<p>it is one of maybe 12 global non-event attributes.

OK, now does that work OK for sites that are vertical input? ;)<p><a href="http:&#x2F;&#x2F;khumuunbichig.montsame.mn&#x2F;index.php?command=newsall&amp;readnews=1170" rel="nofollow noreferrer">http:&#x2F;&#x2F;khumuunbichig.montsame.mn&#x2F;index.php?command=newsall&amp;r...</a>

or don&#x27;t, because using fancy quotes in your HTML will have it not render properly.<p>mods, pls fix the title.

Why in 2023 is this still an issue?<p>Frameworks and browsers should be designed that if you totally ignore rtl support, the browser&#x2F;framework just does some usable default.<p>Just like if you don&#x27;t set a font size, the browser chooses one for you. Or if you don&#x27;t specify the background color, one is chosen for you.

<i>dir</i> is a global attribute that can be set on any HTML element:<p><a href="https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;HTML&#x2F;Global_attributes&#x2F;dir" rel="nofollow noreferrer">https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;HTML&#x2F;Global_att...</a><p>What I don’t understand is why <i>dir=&quot;auto&quot;</i> isn’t set as the default value, allowing browsers to choose text direction based on the <i>lang</i> attribute or the text content.

This should be the operating systems problem to solve not developers of every website ever. Same with spellchecking, emojis, copy&#x2F;paste etc.

It always bugs me in CSS and HTML that &quot;auto&quot; does not equal &quot;default&quot;

To the people wondering why this is still an issue: Most tech is very US- or west-centered. My name contains an Umlaut (ü), which causes me trouble much more often than should be the case. A colleague of mine even changed their name by substituting ä foe ae, to avoid this issue. We still have the benefit of mostly ASCII names mind you. It can get a lot worse.

This seems like an odd thing for developers to have to do.<p>Why isn&#x27;t it done by default by the browser? What <i>is</i> the browser default? (Strangely, MDN docs don&#x27;t seem to indicate.) And if it&#x27;s not already this, why not?

Why isn&#x27;t this the default?

Seems to me, that should be the default behavior.

It is so ridiculous that this doesn&#x27;t happen by default. Normally I&#x27;m against breaking changes, but in this case? The default is dumb and wrong. Inclusivity should always be the starting point, and manual hacks should be the exception.