elm-ui
elm-ui copied to clipboard
mdgriffith
Supporting right-to-left languages
I just saw the excellent presentation you did at elm-conf, and I noted you were using alignLeft. I've worked on projects that had to support both left-to-right languages (english, etc.) and right-to-left (RTL) languages (hebrew, etc.), with CSS rules that could be generated to match either type of locale and would mirror the layout depending on the language. But for doing that, names like "left" and "right" are misleading, because they're only true for one type of locale. (For reference, Apple uses the names "leading" and "trailing" instead when making apps on iOS)
Do you think that elm-ui could support mirroring like this in the future, to make it easy to support both LTR and RTL locales with the same application?
And just to be clear, I'm merely curious right now; I'm not in the process of deciding to use elm-ui based on RTL support or anything like that.
Hello! Thanks :)
I'm definitely interested in supporting internationalization in a nice way, though I do realize that having concrete directions make this a little different than CSS and Apple.
One example that doesn't need to sacrifice the intuitive alignment names would be to just have a property like this:
(if rightToLeft then alignLeft else alignRight)
Where you store rightToLeft in your model.
I actually just watched this talk, which I enjoyed a lot. https://www.youtube.com/watch?v=xpumLsaAWGw&t=3s
I'm a bit new to internationalization, so I'm in the "Oh, I'd love to hear more about what's hard or needed to support this well" phase.
Letting the user define their alignLeading and alignTrailing as properties like that actually seems like a very nice solution!
And that's a very good talk on the subject; she basically touches on everything I would have to say. That is, you need to be able to have custom icons for each direction, which is pretty much free because of the Elm Architecture if you store rightToLeft in the model. And aside from the bdi tag, there's the dir=rtl property to look at, though I have no idea how they fit with elm-ui.
So all in all, I think elm-ui is quite far towards supporting this already ^_^
The next level after that would be something like making sure that your layout works for the language you're displaying for (a button with text might look fine in english, but in another language, the text might be longer and doesn't fit inside the button for example). We basically just left that to our translators to try and get right.
Lots of work has been done to try and figure out all the edge cases of this stuff in the CSS Writing Modes Level 3 document. Sadly it's quite challenging for most mortals to get their heads around! I'd be super interested to see some good thought put into making this stuff easier for people to work with, kind of like what Evan did with Elm's viewport API.
Just saw this issue. Have been adding rtl to my project last few days. Points of failure have been spacing function and moveLeft/moveRight. So have been replacing spaces with additional elements and moveLeft/moveRight with padding.
