Topic: Arabic and other RTL ( Right to Left) languages User Interface

While implementing Arabic as a user preference language I have noticed that the Menus are LEFT Justified instead of  RIGHT justified as expected in RTL languages..  The menus are very  unpleasant to look at. I as an RTL user would expect the menu  items to be on the right side of the screen as supposed to what is displayed on the left when I choose Arabic for example.. Its also true for Urdu..The same is with the TABS at the top of the screen...

This is not the case when one choose an menu item ( Bank Account Inquiry) for then it is RIGHT justified.

How can I repair this?

2 (edited by poncho1234 06/14/2019 03:00:34 pm)

Re: Arabic and other RTL ( Right to Left) languages User Interface

A work around could be done in css; which theme are you using?

Check File: \lang\installed_languages.inc

That rtl is set:-

'rtl' => true,

Re: Arabic and other RTL ( Right to Left) languages User Interface

Default Theme
Your guidance will be appreciated.

Re: Arabic and other RTL ( Right to Left) languages User Interface

And this is just the main menus that are a problem?

Re: Arabic and other RTL ( Right to Left) languages User Interface

Yes.. All tabed  menus that have icons .. other interfaces are OK.. The only thing that comes to mind are the menu items that have Icones are where the problem belongs.

6 (edited by poncho1234 06/15/2019 12:06:13 pm)

Re: Arabic and other RTL ( Right to Left) languages User Interface

The following will only change the alignment of main menu items

In file
\themes\default\default.css

Line 224

Change this:-

.menu_group_items {
    font-weight: normal;
}

to

.menu_group_items {
    font-weight: normal;
    text-align: right;
}

Re: Arabic and other RTL ( Right to Left) languages User Interface

@joe: will this need to be implemented in the core with an appropriate flag / if statement?

Re: Arabic and other RTL ( Right to Left) languages User Interface

Yes, maybe a good idea.

Joe

Re: Arabic and other RTL ( Right to Left) languages User Interface

@poncho1234

Thanks the only thing I needed to do as you suggested is :

.menu_group_items {
    font-weight: normal;
    text-align: right;
}

All OK even the icons are on the right (wright) side of the screen. How can we do the same to the Tabs?

10 (edited by poncho1234 06/15/2019 12:13:06 pm)

Re: Arabic and other RTL ( Right to Left) languages User Interface

@joe, @apmuthu,
I made a mistake, the icons move when a rtl lang is selected - screenshot

So @rafat is correct, only a text-align:right; is required

11 (edited by poncho1234 06/15/2019 01:49:57 pm)

Re: Arabic and other RTL ( Right to Left) languages User Interface

@rafat by 'tabs, do you mean the main menu? Sales, Purchases, Items and Inventory, etc?

If so:-

In file
\themes\default\default.css

Line 184

Change this:-

div.tabs {
    padding: 3px 0 0 0;
    background: none transparent scroll repeat 0% 0%;
    white-space: nowrap;
    border-collapse: collapse;
    border-bottom: 1px solid #8cacbb;
}

to this:-

div.tabs {
    padding: 3px 0 0 0;
    background: none transparent scroll repeat 0% 0%;
    white-space: nowrap;
    border-collapse: collapse;
    border-bottom: 1px solid #8cacbb;
    float: right;
}

Do the main menu items need to be reordered so that 'Sales' is on the right and 'Setup' is on the left? I'm not sure how to do that.

@rafat Anything else not aligned correctly? (The logout bar doesn't look quite right to me)
If so:-

In file
\themes\default\default.css - Line 288

Change this:-

.headingtext3 {
    font-weight: bold;
    font-size: 10px;
    color: black;
}

to this:-

.headingtext3 {
    font-weight: bold;
    font-size: 10px;
    color: black;
    text-align: right;
}

And

On Line 163 change this:-

.logoutBarRight {
    text-align: right;
}

to this:-

.logoutBarRight {
    text-align: left;
}

Re: Arabic and other RTL ( Right to Left) languages User Interface

Hi @poncho1234

Thanks again for your efforts.. I could be a very luck guy because just changing (default.css)

table {
    text-align: left;
}

to

table {
    text-align: right;
}

Resolved the Tabs on the top of the screen..with all the locations (sales to the right and setup to the left).. It also aligned the entry and display fields correctly.

I dont know how and why as I have no clue of CSS programming..

As for the logout bar.. I wouldn't worry about it personally.. it looks OK

I would like to ask RTL users to have a go at this and try to test if all OK.

One last thing .. is there a way to increase the font size of the menu items?? In Arabic they are extremely small..

Appreciate you help.

13 (edited by poncho1234 06/15/2019 02:57:29 pm)

Re: Arabic and other RTL ( Right to Left) languages User Interface

That's excellent! Though check all other pages to make sure they are correct as table{ is used in ALL pages.

font-size for main menu or menu items?

For everything change the font-size: 10px;
in line 19
body{

for main menu

add
font-size: 12px; (increase 12 to what you want - default is 11px)
line 192
to div.tabs a


for menu items you will need to create a new selector:-


.menu_group_items a {
    font-size: 12px;
}

You can put this under the existing .menu_group_items { selector

Re: Arabic and other RTL ( Right to Left) languages User Interface

One thing I have done so as not to disturb the main English Language users is to copy the default theme folder and rename it RTL. I have done the changes in the RTL css file ../themes/RTL/default.css. Users will go to preferences and use theme as RTL and Language as Arabic (for example). This how it looks like.

https://imgur.com/a/Kbmpm4a

Post's attachments

RTLtheme.png 86 kb, file has never been downloaded. 

You don't have the permssions to download the attachments of this post.

Re: Arabic and other RTL ( Right to Left) languages User Interface

Looks a lot better, I still think the logout bar needs to be changed... where does the ajax icon appear?(create a backup or another long process to see it)
From what Joe's written above he may make some changes to core default theme so it can be used on ltr AND rtl lang.

Re: Arabic and other RTL ( Right to Left) languages User Interface

@poncho1234

Fixed the logout bar as suggested..looks better..
One thing I need help with is to change the font itself. Where can this change take place?

17 (edited by poncho1234 07/02/2019 05:57:12 pm)

Re: Arabic and other RTL ( Right to Left) languages User Interface

The font whilst being easy to change, there are other considerations you need to think about:-

Google 'safe web font'


Is your installation local or remote server?
Do you have other users? (Unless the font is available on their PC they may see a different font to you).
You can always use a CDN like 'Google Fonts' if you have reliable internet access.
You can 'embed' the font if you do not have reliable internet access.
Not all fonts are free.
Some fonts appear larger/smaller than other fonts of the same size; so any changes to font-size will have to be redone
The list goes on...

What font do you want to use? Does the font have all the Arabic characters you require in it (not all of them do)?

If you are going to use a web safe font then:-

On line 20 change this:-

font-family: Verdana, Arial, Helvetica;

to for example:-

font-family: Georgia, Verdana, Arial, Helvetica;

There are seven occurrences of 'font-family' in the default css, change the ones you want to: (Careful with the #CC table one; that's the date picker - make sure its readable after changes)

If you want anything other than a web safe font there are additional steps - will need to know where the font is/coming from.

Re: Arabic and other RTL ( Right to Left) languages User Interface

Thanks @poncho1234

Let me experiment a little bit and I will come back to you..Thanks again

Re: Arabic and other RTL ( Right to Left) languages User Interface

Hi
Looked around and found the following site that has downloadable Google Arabic ttf fonts. The licenses is SIL Open Font License.. It seems one can use the font , change it and redistribute it as far as I can tell. If one wants to use these fonts please read and review the license as I could be very wrong.

The fonts are very nice and if not .. at least there is a choice when it comes to personal preferences. I used some of them and found them suitable and work well with the Date Picker. The fonts also support Farsi and Urdu and some of them Vietnamese as well (dont ask me how).

https://alinadigitalservices.com/arabic-google-fonts

I have used the following to embed them in the default theme of FA default.css.

@font-face {
  font-family: arabic;
  src: url(Cairo-Regular.ttf);
  font-weight: normal;
}

body {
    font-family: arabic;
    background: #285b86;
    font-size: 10px;
    margin: 5px 0 0 5px;
    padding: 0;
}

Of course I changed family-font: to family-font: arabic; in all occurrences.

20 (edited by poncho1234 07/04/2019 01:14:23 pm)

Re: Arabic and other RTL ( Right to Left) languages User Interface

Ok, good.

Even though you have embed the font, you should really add a some additional fonts to your font-family, then if the 1st is unavailable the next in line will be used, etc.

One google font for arabic that's not in that list is Noto Naskh/Kufi Arabic

21 (edited by rafat 07/04/2019 01:28:22 pm)

Re: Arabic and other RTL ( Right to Left) languages User Interface

As far as I understood it @font-face downloads the font to the browser so its always available.
The fonts are stored on my sever and the src: url specifies the local location of the font.

Forgot to attach some examples of different fonts:

https://postimg.cc/f3J044CL
https://postimg.cc/68hh6NCf
https://postimg.cc/JtBcDXbn

Post's attachments

ArabicFonts_in_FA_Theme.zip 228.7 kb, 6 downloads since 2019-07-04 

You don't have the permssions to download the attachments of this post.

Re: Arabic and other RTL ( Right to Left) languages User Interface

One google font for arabic that's not in that list is Noto Naskh/Kufi Arabic

You are right .. one can find them at:

https://www.google.com/get/noto/

23 (edited by poncho1234 07/04/2019 03:44:45 pm)

Re: Arabic and other RTL ( Right to Left) languages User Interface

Ref post #21 Yes, but best practice is to have a fall back font: Google 'font-stack' - what if file becomes corrupted?

Plus if you are going to share the rtl theme, its better to use a web safe font as users can use remote PC's or a LAN: A brief(very brief) search suggests Arial, Tahoma and Times New Roman

Screenshots look v.good... Cairo seems the most 'business-like' from purely a visual context.

Re: Arabic and other RTL ( Right to Left) languages User Interface

@poncho1234

I did the font stack and now I am looking to changing the Arabic text inside the Dashboard. I think the Arabic Language Translation .po file does not cater for  the text inside the Dashboard. Where can I look in order to change the text?

Thanks

25 (edited by poncho1234 07/09/2019 01:02:14 pm)

Re: Arabic and other RTL ( Right to Left) languages User Interface

You can either:-
a) If you are using the lang available from FA depository it does not have an updated .po file, you can update this using the wonderful and free POEDIT and then translate the new strings... search this forum for instructions, its well documented.

OR less work
b) You can download ar_EG from Apmuthu's GitHub, also wonderful and free; I've checked and dashboard strings are in there(They are also translated already)

It's worth checking that apmuthu's version is up to date, it states 2.4 so probably ok