RTL Alignment for Busy.org

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!

New Features

• 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:

Profile page:

The activity page:

Comment view:

*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 rtlLanguages array 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 dir attribute to the root application div. Which is used as the css selector.
  You can see the relevant changes in this commit:
  https://github.com/busyorg/busy/commit/d9c58aebee0cc9a594d63e1fcf8d8cde66e0a101

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:
https://github.com/busyorg/busy/pull/1316/files

---

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

---