Arabic and other RTL ( Right to Left) languages User Interface (Page 1 of 2)

Default Theme
Your guidance will be appreciated.

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.

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

@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?

@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;
}

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

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.

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.

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.

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

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.