[Feature Request] RTL Language Support

[sepsol]

Hi, thanks for your amazing unique app! Can you please add better right-to-left language support and better fonts for Arabic/Persian languages? I could help you pick a font and even add a translation for Persian users.

[Jisco]

Hi, I have to admit to my shame that I didn't even think about that. 😅 But luckily this shouldn't be a great problem! 💪

It would be great if you could suggest me some fonts and I could also send you the translation file, that would be really awesome if you add an translation.

Then i'll try to add RTL support in one of the next updates.

[sepsol]

I'm glad that you're considering this 😁

Ok, so I've looked up some open-source Persian fonts and I think I've found the one that goes well with the aesthetics and design of the English version of your app. Here's its GitHub page, and here's its GitHub repo. This font is kind of equivalent to the stylish serif English font you've used but in Persian script.

I'm ready for the translation file 😋

[Jisco]

Sure, i have uploaded the actual translation files and a short readme.

Is this ok?

The font really looks very appropriate. I'll give it a try :running:

Thanks for your effort! :clap::clap::clap:

[sepsol]

No problem dude, I think this is all well and good. Just give me a few days and I'll finish the translation 💪🏻

[Jisco]

2 Pull Request

[Jisco]

I try to test it on the weekend...

[sepsol]

Thanks, mate. I'm available. Hit me up if there was anything I could do 😉

[Jisco]

@SepSol

Unfortunately (or logically) there is no icon for the ISO code 'fa'. 😟 Now I don't know what to show in the language selection...

Any idea? Is there any universal sign for this?

[sepsol]

Yeah, you're right. The country name and language name are a little bit different. Here's how to handle it:

• inside http://www.mathguide.de/info/tools/languagecode.html:

• inside https://github.com/lipis/flag-icon-css/tree/master/flags/4x3:

[Jisco]

Hi, yes, thank you. 👏

I made the language file selectable and switched the component library to RTL.

2 "Little things" are unfortunately not working (yet) because the library (DevExtreme by the way) does not fully support Persian. Some things are still not translated there and the Persian date format is unfortunately not supported either. That is why the English format is still set there.

If you tell me whether you are a Windows or Linux user, I will post a version here so that you can see for yourself what is ok and what I could possibly improve! 👍

[sepsol]

Wow! That looks awesome 😋 I was going to ask for the Persian calendar integration, thanks for keeping an eye out! Sure thing, I'm on Windows. 🙌🏻

[Jisco]

In order to alleviate the problem with the calendar a little, I made 2 preview versions. One in which the entire English format is used and one where the input is in English format but the display is in Persian format (i hope 😆).

Here is the download link: https://we.tl/t-WHSkQujFvF I then wait for your suggestions 😀

[sepsol]

@Jisco I appreciate your efforts in trying to make a Persian translation of the dates available to Persian users. Honestly, which version I choose comes down to personal preference. I would go with the Persian version myself, but either is good.

Now having my hands on this version, there are some things that I've noticed. Some I should fix in the translation file and make another pull request for you, some I should ask you.

One is this: If you look at the Persian text on the left and compare it with the one on the right, you'll notice that there's one dot/point missing from the text on the left (the text should read سپهر, which has 3 dots under it). I think this could be because of more tight line-spacing on the card which is on the left-hand side. So I would suggest increasing the line-spacing on the cards for better readability.

Two is this: The card on the left is from the English version of the app with some Persian text on it, and the right card is from the Persian version of the app with some English and Persian text on it. Basically what I wanted to point out is that the English font applies to the Persian version, but the Persian font didn't apply to the English version. If this went both ways it would be nice!

---------------------------------------------[UPDATE]--------------------------------------------- Three is this: The database section on the status bar currently looks like the font you see above this picture. It has no fonts applied to it. It's better for it to use the font that we're using on the other parts of the UI, so it should look something like the version on the bottom. ----------------------------------------------------------------------------------------------------

But other than these it is looking better than I thought in Persian 😋. I still have to make some corrections and make a new pull request soon though.

[sepsol]

I made a new pull request. I noticed some other things that I wish could be polished.

1. It would be great if I could translate these texts:

2. I would suggest an exact copy of the English layout for these two "Help" pages (title bar could become left-aligned):

3. I would suggest changing the layout of the home screen for RTL languages from this: to this:

I hope I'm not asking for too much 🙊

[Jisco]

No problem. 👍 I also asked you about your suggestions. 😀

So I looked at your comments and decided to make the whole thing adjustable.

• Separate language setting and font
  • for example English as language but Gandom as font
• Own line spacing settings
  • because it depends on the choosen font

I will also search the entire app to see if the correct font is used everywhere.

The "drop here...", "No data" and "Search..." texts come directly from the component framework. In english or german they are automatically translated, but because they don't have a persian translation they show english as standard. But we can make the translation by ourselfs. So i will search the keys and add these to the translation file! 🚀

[Jisco]

I will update these list to show progress.

• [x] Add translations for components
• [x] Change home screen to rtl
• [x] Research font settings everywhere
• [x] Separate language and font settings
• [x] Adjustable line spacing

[sepsol]

No problem. 👍 I also asked you about your suggestions. 😀

So I looked at your comments and decided to make the whole thing adjustable.

• Separate language setting and font

  • for example English as language but Gandom as font

• Own line spacing settings

  • because it depends on the choosen font

I will also search the entire app to see if the correct font is used everywhere.

The "drop here...", "No data" and "Search..." texts come directly from the component framework. In english or german they are automatically translated, but because they don't have a persian translation they show english as standard. But we can make the translation by ourselfs. So i will search the keys and add these to the translation file! 🚀

Thank you sooo much 😍😊

[Jisco]

@SepSol:

I have added all missing translation keys that i found to the fa.js file.. So these file is ready to be translated. 🚀

[sepsol]

@Jisco: Awesome! I created another pull request. 🙊

[Jisco]

Hi @SepSol, So I have now made all changes (at least I hope 😁) and uploaded a new preview version for testing. Click here...

I also added the Spanish translation, so it would be great if @MrOlivo will also checking if it all fits.

For the new functions I have added more translations and used Google Translator (shame on me 😅). So it would be very nice if you would tell me if that would fit. If not please create a new pull request for it. 👍

I will be looking forward to your feedback 🚀 Thanks again for your contributions 🥰

[sepsol]

@Jisco you are awesome! Everything is well and great! I only noticed these checkboxes not aligning themselves properly in the Farsi/Persian version: Take a look at this mockup from earlier for reference:

[Jisco]

@SepSol I think i can fix this before releasing the new version 😀 😜

[MrOlivo]

@Jisco Everything seems to be in order, I just have to correct the spelling mistakes and a few meaningless phrases. I've never used the dictionary 📖 so much before 😅

[Jisco]

@MrOlivo Thank you very much. 😄