Add dir=“auto” to your inputs and textareas
1–10 of 114 posts
Re: Add dir=“auto” to your inputs and textareas
#2This is indeed an easy way to fix text rendering in your inputs and textareas. However, you'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...
Note also that there's currently a regression in Chrome that affects how RTL text is rendered in inputs with dir='auto'. They just shipped a fix though so it should be included in the next release.
Re: Add dir=“auto” to your inputs and textareas
#3Why in 2023 is this still an issue?
Frameworks and browsers should be designed that if you totally ignore rtl support, the browser/framework just does some usable default.
Just like if you don't set a font size, the browser chooses one for you. Or if you don't specify the background color, one is chosen for you.
Re: Add dir=“auto” to your inputs and textareas
#4Why in 2023 is this still an issue? Frameworks and browsers should be designed that if you totally ignore rtl support, the browser/framework just does some usable default. Just like if you don't set a font size, the browser chooses one for you. Or if you don't specify the background color, one is chosen for you.
It works that way if you correctly use modern features of CSS/HTML. This is just one of those features. It’s very difficult to correctly update the web platform because backward compatibility is so important for the most widely used programming platform in the world.
Re: Add dir=“auto” to your inputs and textareas
#5MDN always comes to the rescue: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_att...
Re: Add dir=“auto” to your inputs and textareas
#6Why in 2023 is this still an issue? Frameworks and browsers should be designed that if you totally ignore rtl support, the browser/framework just does some usable default. Just like if you don't set a font size, the browser chooses one for you. Or if you don't specify the background color, one is chosen for you.
> Why in 2023 is this still an issue?
I mean Safari and Firefox only recently (2021) got datetime / datetime-local input support and afaik they still aren’t feature complete (html5). Date pickers have been one of the most popular / important widgets in Javascript for like the last 20 years or so. The only reason edge has it is because it’s backed by chrome (IE / MS was notorious for foot dragging in the space).
Re: Add dir=“auto” to your inputs and textareas
#7Sadly, both the website and the linked codepen render the source quite poorly. The period is in the wrong place! The rendered HTML is fine.
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 inclusive) should render as atomic things, internally LTR, but without imposing their direction on surrounding characters.
In this example, the algorithm should be willing to switch direction in the middle of the sequence “.<“
Re: Add dir=“auto” to your inputs and textareas
#8There 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.
Re: Add dir=“auto” to your inputs and textareas
#9On a related note, support for "logical properties/values"[1] has become mature in recent years. These are alternatives to directional-based properties (top/left/bottom/right) which are adaptable to switching content/text directions.
[1] https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical...
Re: Add dir=“auto” to your inputs and textareas
#10Why in 2023 is this still an issue? Frameworks and browsers should be designed that if you totally ignore rtl support, the browser/framework just does some usable default. Just like if you don't set a font size, the browser chooses one for you. Or if you don't specify the background color, one is chosen for you.
It works that way if you correctly use modern features of CSS/HTML. This is just one of those features. It’s very difficult to correctly update the web platform because backward compatibility is so important for the most widely used programming platform in the world.
Lol it's funny to summarize this discussion as: "we don't want to make a (seemingly) positive change because too many people rely on us to live in their 'backwards' ways".