Farsi translation & RTL support #5961

SidMorad · 2017-06-20T18:53:02Z

According to Wikipedia(https://en.wikipedia.org/wiki/Persian_language)
There are approximately 110 million Farsi speakers worldwide, with the language
holding official status in Iran, Afghanistan, and Tajikistan.

Note: Farsi is a Right to Left (RTL) language, therefore we need proper CSS for displaying text correctly in html pages.
and here is rtl.css example that needs to be included(dynamically) if current language is a RTL language:

html {
  direction: rtl;
}

.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
  float: right;
}

.modal-footer {
  text-align: left;
}

.dropdown-menu {
  text-align: right;
}

th {
  text-align: right;
}

@media (min-width: 768px) {
  .dl-horizontal dt {
    float:right;
  }
}

and here is a condition example in index.html
<link rel="stylesheet" ng-href="{{langKey === 'fa' ? 'content/css/rtl.css?v=2' : ''}}">

This commit assumes you will take care of HTML/RTL issues yourself, and
will show translations in correct format when text direction is set to rtl.

Please let me know if something is missing? or any improvement needed?

Thanks!

Please make sure the below checklist is followed for Pull Requests.
Travis tests are green
Tests are added where necessary
Coding Rules & Commit Guidelines as per our CONTRIBUTING.md document are followed

According to Wikipedia(https://en.wikipedia.org/wiki/Persian_language) There are approximately 110 million Farsi speakers worldwide, with the language holding official status in Iran, Afghanistan, and Tajikistan. Note: Farsi is a Right to Left (RTL) language and needs proper CSS consideration: e.g. <html dir="rtl"> e.g.2 <div style="float: right;"> e.g.3 <div style="text-align: right;"> This commit assumes you will take care of HTML/RTL issues yourself, and will show translations in correct format when direction is set to rtl. Cheers!

deepu105 · 2017-06-20T20:39:35Z

Thanks for the translation @SidMorad
This is our first RTL language and hence I think we need make sure it works well like other languages. Let me take a look and think about a solution

jdubois · 2017-06-20T21:22:42Z

Awesome !!!! That's really an important feature.

SidMorad · 2017-06-21T06:38:43Z

I would like to point out, Ionic-team done really good job recently(as of version 3.4.2) regards to RTL support. It seems their solution is heavily depends to using SASS, but you may find some useful information at ionic-team/ionic/issues/11211.

@deepu105 I look forward to see your solution, in time between, I think adding RTL support and adding Frasi translation better to be two independent pull requests, don't you think? plus suggested solution must work with ease for next RTL language too, which means no dependency between specific language and RTL support.

@jdubois Thanks for saying supporting RTL is an important feature. As a RTL developer, I get used to the fact that supporting RTL is not a high priority task! ؛-)

Thanks for creating JHipster! JHipsters!

deepu105 · 2017-06-21T07:36:16Z

@SidMorad since you already have a solution and it looks good could you make a PR with it. We need to support it in botg ng1 and ng2± first before we support RTL languages

SidMorad · 2017-06-21T08:05:12Z

@deepu105 My solution is pretty simple and is kind of hard-coded, let's look at this line:

<link rel="stylesheet" ng-href="{{ langKey === 'fa' ? 'content/css/rtl.css?v=2' : '' }}">

And for supporting next RTL language, let's say is Hebrew language, then we need to change it to:

<link rel="stylesheet" ng-href="{{ langKey === 'fa' || langKey === 'he' ? 'content/css/rtl.css?v=2' : '' }}">

Plus If a RTL language is not between selected languages, then (I assume) majority of developers don't expect/want to see such a line in their index.html or a rtl.css file in their content/css directory. am I wrong?

So I suggest someone who is more familiar with code base, work on this, and provides better/clever way to support RTL when is necessary.

deepu105 · 2017-06-21T08:43:53Z

@SidMorad that's easy to solve in the generator base we need to add another attribute rtl: true to the language object with RTL and then use that in the language constant in the generated code as well that way it's easier to implement this and we need to add the line only when there is at least 1 RTL language selected. You give it a shot if you are struck ill help you

SidMorad · 2017-06-21T09:30:51Z

@deepu105 thanks for your support, sure I will give a shot this weekend. but no promise for contribute in next week, because we are suppose to release version 1 of our product by end of next week.

Note: In Iran Thursday and Fridays are weekend days! plus we use Persian calendar, another source of troubles for us as local developers! :-) sometimes I think of working in another country and tada! all problems solved!: no deal with RTL support, different calendar, unfriendly government!, etc! :-)

Note: After adding next RTL language, following methods need to include new added language. - generators/generator-base.js#isRTLSupportNecessary and - generators/client/templates/angularjs/src/main/webapp/app/blocks/handlers/_translation.handler.js#isRTL Cheers! (Note: Beer is forbidden here! can you imagine that!! I have to bring up a glass of tea instead! :-))

SidMorad · 2017-06-22T13:24:32Z

@deepu105 Regards to RTL support, I went to slightly different path that we talk about initially. please have a look and let me know what do you think? thanks.

Note: I did test 4 different scenarios:

Monolithic app + ng1 + en, fa
Monolithic app + ng1 + en, de
Monolithic app + ng1 + sass + en, fa
Monolithic app + ng1 + sass + en, de

SidMorad · 2017-06-22T14:22:53Z

JHipster + Farsi Language + RTL support screenshot:

deepu105 · 2017-06-23T06:10:56Z

Thanks ill take a look

…

On 22 Jun 2017 4:23 pm, "SidMorad" ***@***.***> wrote: JHipster + Farsi Language + RTL support *screenshot*: [image: screenshot from 2017-06-22 16-43-48] <https://user-images.githubusercontent.com/1835057/27438759-7df64cce-577b-11e7-8ce7-c44a230d4e72.png> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#5961 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABDlFzfO3xmohMgfX7cJa5m6ScUBX_DXks5sGnjFgaJpZM4OAAZy> .

deepu105

The solution looks good. I have 2 comments. can you also add the same for ng2 code, inside the angular folder

deepu105 · 2017-06-23T13:44:18Z

...ators/client/templates/angularjs/src/main/webapp/app/blocks/handlers/_translation.handler.js

+        }
+
+        // Returns true if passed language key is a Right-to-Left language key
+        function isRTL(langKey) {


I would like to get this from the existing language filter. See my comment below

deepu105 · 2017-06-23T13:49:33Z

...ators/client/templates/angularjs/src/main/webapp/app/components/language/_language.filter.js

@@ -36,6 +36,7 @@
                'en': 'English',
                'es': 'Español',
                'et': 'Eesti',
+                'fa': 'فارسی',


It would be better to change the pipe to below and then use it in the above service.

(function() { 'use strict'; angular .module('<%=angularAppName%>') .filter('findLanguageFromKey', findLanguageFromKey); .filter('findLanguageRtlFromKey', findLanguageRtlFromKey); var languages = { 'ca': { name: 'Català' }, .... 'fa': { name: 'فارسی', rtl: true }, ... 'zh-tw': { name: '繁體中文' } } function findLanguageFromKey() { return findLanguageFromKeyFilter; function findLanguageFromKeyFilter(lang) { return languages[lang].name; } } function findLanguageRtlFromKey() { return findLanguageRtlFromKeyFilter; function findLanguageRtlFromKeyFilter(lang) { return languages[lang].rtl; } } })();

deepu105 · 2017-06-23T13:52:18Z

generators/generator-base.js

@@ -437,6 +452,7 @@ module.exports = class extends Generator {
            { name: 'Dutch', value: 'nl' },
            { name: 'English', value: 'en' },
            { name: 'Estonian', value: 'et' },
+            { name: 'Farsi', value: 'fa' },


add a new attribute { name: 'Farsi', value: 'fa', rtl: true }, and use that in isRTLSupportNecessary instead of hardcoding the values

@deepu105

No need for hard coding RTL language key as of this revision. Thanks to @deepu105 for suggesting the solution.

SidMorad · 2017-06-23T17:49:14Z

@deepu105 Thanks for your solutions, I did apply your requested changes for AngularJs(1.x) module. Please let me know if something is missing?

For Angular(4.x) module I did nothing, and as I said earlier I am kind of busy in this week, so I can be just a minor helper if someone else want to continue to work on this, thanks.

deepu105 · 2017-06-24T07:41:18Z

Ok then, ill merge this and add angular support

…

On 23 Jun 2017 7:49 pm, "SidMorad" ***@***.***> wrote: @deepu105 <https://github.com/deepu105> Thanks for your solutions, I did apply your requested changes for AngularJs(1.x) module. Please let me know if something is missing? For Angular(4.x) module I did nothing, and as I said earlier I am kind of busy in this week, so I can be just a minor helper if someone else want to continue to work on this, thanks. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#5961 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABDlF8STAvDO6aPRIDzXiFY2b1iOR2Aoks5sG_qggaJpZM4OAAZy> .

SidMorad · 2017-06-24T07:51:08Z

@deepu105 I notice my mind is with this issue, while I am working on other issues, so I did add some progress for angular(4.x) module(which they did pass initial tests). should I push them too?

deepu105 · 2017-06-24T08:17:14Z

If you have done yes please

SidMorad · 2017-06-24T08:40:17Z

I did test following scenarios as of revision 08dfb9a:

Monolithic app + ng2 + en, fa
Monolithic app + ng2 + en, de
Monolithic app + ng2 + no i18n

Please let me know if something is missing? or can be done better? thanks.

deepu105 · 2017-06-24T09:56:28Z

Thanks, i'm gonna do a little polish and merge this Thanks & Regards, Deepu

…

On Sat, Jun 24, 2017 at 10:40 AM, SidMorad ***@***.***> wrote: I did test following scenarios as of revision 08dfb9a <08dfb9a> : - Monolithic app + ng2 + en, fa - Monolithic app + ng2 + en, de - Monolithic app + ng2 + no i18n Please let me know if something is missing? or can be done better? thanks. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#5961 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABDlF729nfNwGu8uendJzbl9I9z_eYUpks5sHMt0gaJpZM4OAAZy> .

deepu105 · 2017-06-25T11:32:43Z

merged manually

SidMorad · 2017-07-10T06:03:13Z

I start using JHipster v4.6.0 and it's RTL support in one of my projects, and I notice we can have some improvements regards to RTL support. and here I'am going to document it for future developers who may need this.

First I would like to point out, according to this comment, bootstrap project may add RTL support officially as of version 4.2.0 or later. So if bootstrap 4.2.0 is out and has RTL support, then please ignore this comment, and follow bootstrap guide in this regards.

Bootstrap 4.0.0-alpha.6 is used by JHipster v4.6.0 and our primary technique for adding RTL support was watching <html dir="rtl"> attribute and applying necessary CSS depends to it's value. for example:

html[dir=rtl] th {
    text-align: right;
}

bright/bootstrap-rtl project is using the same technique(with supporting almost all differences between LTR & RTL). and as I am writing this, it is compatible with bootstrap 3.x version. so I think if you are looking for a complete RTL support, then following file can be your guide:
https://github.com/bright/bootstrap-rtl/blob/master/dist/css/bootstrap-rtl-ondemand.css

and in my opinion upgrading above file to bootstrap 4.x is not that much complex, you only need to search for differences and replace them with updated syntax. for example search for

.col-md-offset-

and replace it with

.offset-md-

Have fun RTLing! ؛-)

p.s. If you find a better way for adding RTL support? please let us know, thanks.

deepu105 requested changes Jun 23, 2017

View reviewed changes

RTL support for AngularJS(1.x)

0aa27ee

No need for hard coding RTL language key as of this revision. Thanks to @deepu105 for suggesting the solution.

RTL support for Angular(4.x)

08dfb9a

deepu105 changed the title ~~Farsi translation~~ Farsi translation & RTL support Jun 25, 2017

deepu105 closed this Jun 25, 2017

SidMorad deleted the farsi-translation branch June 25, 2017 12:03

jdubois modified the milestone: 4.6.0 Jul 6, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Farsi translation & RTL support #5961

Farsi translation & RTL support #5961

SidMorad commented Jun 20, 2017 •

edited

Loading

deepu105 commented Jun 20, 2017

jdubois commented Jun 20, 2017

SidMorad commented Jun 21, 2017

deepu105 commented Jun 21, 2017

SidMorad commented Jun 21, 2017

deepu105 commented Jun 21, 2017

SidMorad commented Jun 21, 2017

SidMorad commented Jun 22, 2017

SidMorad commented Jun 22, 2017

deepu105 commented Jun 23, 2017 via email

deepu105 left a comment

deepu105 Jun 23, 2017

deepu105 Jun 23, 2017

deepu105 Jun 23, 2017

SidMorad commented Jun 23, 2017

deepu105 commented Jun 24, 2017 via email

SidMorad commented Jun 24, 2017 •

edited

Loading

deepu105 commented Jun 24, 2017

SidMorad commented Jun 24, 2017

deepu105 commented Jun 24, 2017 via email

deepu105 commented Jun 25, 2017

SidMorad commented Jul 10, 2017 •

edited

Loading

Farsi translation & RTL support #5961

Farsi translation & RTL support #5961

Conversation

SidMorad commented Jun 20, 2017 • edited Loading

deepu105 commented Jun 20, 2017

jdubois commented Jun 20, 2017

SidMorad commented Jun 21, 2017

deepu105 commented Jun 21, 2017

SidMorad commented Jun 21, 2017

deepu105 commented Jun 21, 2017

SidMorad commented Jun 21, 2017

SidMorad commented Jun 22, 2017

SidMorad commented Jun 22, 2017

deepu105 commented Jun 23, 2017 via email

deepu105 left a comment

Choose a reason for hiding this comment

deepu105 Jun 23, 2017

Choose a reason for hiding this comment

deepu105 Jun 23, 2017

Choose a reason for hiding this comment

deepu105 Jun 23, 2017

Choose a reason for hiding this comment

SidMorad commented Jun 23, 2017

deepu105 commented Jun 24, 2017 via email

SidMorad commented Jun 24, 2017 • edited Loading

deepu105 commented Jun 24, 2017

SidMorad commented Jun 24, 2017

deepu105 commented Jun 24, 2017 via email

deepu105 commented Jun 25, 2017

SidMorad commented Jul 10, 2017 • edited Loading

SidMorad commented Jun 20, 2017 •

edited

Loading

SidMorad commented Jun 24, 2017 •

edited

Loading

SidMorad commented Jul 10, 2017 •

edited

Loading