If you're speaking Hebrew, Arabic or any other RTL language, I have wonderful news for you!
Busy.org will soon support RTL languages officially!
- What feature(s) did you add?
Translations for RTL languages were previously made by the community yet a RTL language requires a whole layout modification to be fully compatible with those languages. The whole layout is actually mirrored to achieve the highest level of compatibility.
So I mirrored the layout and added the relevant logic that allows the UI to decide how to align the layout based on the user's locale or language selection.
This is how busy looks when an RTL language is chosen:
The activity page:
*Note that post contents are deliberately aligned to the left in order to read LTR texts.
.text-rtl is used to aligned to the right.
- How did you implement it/them?
Well, there were two parts, the first was the logic that determines which alignment should be used. So I made the
rtlLanguagesarray with RTL language codes and a getter function. This function is called once the page renders with the
availableLocale- the chosen or detected locale of the user. It adds an
dirattribute to the root application
div. Which is used as the css selector.
You can see the relevant changes in this commit:
The other file changes were CSS changes. I used the
div[data-dir] selector to make changes only on the rtl layout. And played with margins and alignments to align it all.
You can see the relevant code here:
It's a big step for all RTL communities and I hope it'll bring more people to the block chain!
Posted on Utopian.io - Rewarding Open Source Contributors