Odoo Web (MOVED TO GITHUB)

RTL interface

Bug #1020524 reported by Shahar Or on 2012-07-03

This bug affects 14 people

Affects		Status	Importance	Assigned to	Milestone
	Odoo Web (MOVED TO GITHUB)	Confirmed	Wishlist	OpenERP R&D Web Team

Bug Description

Dear OpenERP developers,

Please develop an RTL interface for when chosen language is a RTL one.

Thanks and Blessings,
Shahar

Tags:

Shahar Or (mightyiam) on 2012-07-03

tags:

added: rtl

Jignesh Rathod(OpenERP) (jir-openerp) on 2012-07-04

affects:

openobject-client-web → openerp-web

Revision history for this message

Amit Bhavsar (Open ERP) (amb-openerp) wrote on 2012-07-06:

Hello ,

I have checked your Issue, But In trunk whole functionality are changed. So This is affected only 6.1 and It's not a blocking Issue. That's why we can not consider this Issue.

If you have a support and maintenance contract with us then you can contact with our OPW team at <email address hidden>,they will definitely help you.

Thank you!

Revision history for this message

Amit Bhavsar (Open ERP) (amb-openerp) wrote on 2012-07-06:

please Ignore comment#1!!

Hello Shahar,

I have checked your Issue with Arabic language. It's working fine with RTL in gtk client. but In webclient, "RTL" is not seems good.

Moreover, this is not small Implement. For this Implement need some time. That's why I am setting this Issue as Wishlist.

Thanks!

Changed in openerp-web:
status:	New → Confirmed
importance:	Undecided → Wishlist
assignee:	nobody → OpenERP R&D Web Team (openerp-dev-web)

Revision history for this message

Shahar Or (mightyiam) wrote on 2012-07-08:

Dear Amit,

Thank you very much. There is a lot of market for this in RTL language speaking countries.

I will be very happy to see it enfold.

Thanks for the answer,
Shahar

Revision history for this message

walid baruni (wdbaruni-e) wrote on 2012-07-27:

could you please direct to where and how I can add the following line:

if lang.dir == rtl:
# load additional CSS files to take care of RTL direction

If the issue is only with modifying CSS attributes, such as "dir, float, padding, margin", then I can manage to provide this solution

Thanks

Revision history for this message

Shahar Or (mightyiam) wrote on 2012-07-29:

Thank you, walid, for your help.

I hope that you will get an answer soon.

If you don't, maybe there's a developers mailing list that you can use to contact the developers.

Blessings,
Shahar

Revision history for this message

Ahmad Khayyat (akhayyat) wrote on 2013-03-11:

Is there an API for finding out the direction of the current language?

Revision history for this message

Serpent Consulting Services (serpent-consulting-services) wrote on 2013-03-11:

Ahmad,

There is a field on the language configuration!

Revision history for this message

Ahmad Khayyat (akhayyat) wrote on 2013-03-18:

Serpent Consulting,

Yes, but how do I access that information programatically, i.e. using an API?

We need to enable an additional CSS file (or add a class to a top-level HTML element) conditionally, based on the current user language.

For example, if the current user language is English, nothing changes. But, if the current user language is Arabic, a language attribute is added to the <body> tag, or a CSS class is applied to it:

Where and how something similar to the above line can be implemented?

There a lot of interest in implementing an RTL interface for OpenERP. The Arabic community is willing to take on the effort. We just need little guidance. We also want to conform to OpenERP's standards to make it easier for our efforts to get incorporated into the system in the future.

Revision history for this message

Serpent Consulting Services (serpent-consulting-services) wrote on 2013-03-19:

Salam Ahmad,

If you use webkit reporting engine, you can use the code you just wrote.

You need to define this section in your header.

There is no really big rocket science for basic RTL(in terms of just csss), you only need direction=rtl.

We did various reports in RTL, and also the web interface too.

Once this is completed and started being used, we will have a perfect solution for all.

Lets get Arabic community together and get going.

Thanks.

Revision history for this message

Ahmad Khayyat (akhayyat) wrote on 2013-03-19:

#10

Serpent Consulting,

Thank you for your response.

This bug is about the web interface, not the reports.

We are indeed switching our efforts to webkit because of its better support of RTL layout, and because the same report can be made RTL with CSS only without modifying its content.

However, we are struggling with the web interface. Not in terms of the CSS styles themselves, but to find the best entry point to enable an RTL CSS.

- Where in the code should an additional CSS be loaded?
- What would the line I wrote in my previous comment look like to work in the web interface, not the reports?

We can hack our way into something that works, but we want something that would be acceptable for future inclusion in the OpenERP. We wouldn't want to maintain separate code. We want something that will work for everyone.

Revision history for this message

Mohammed Barsi (mbarsi) wrote on 2013-03-19:

#11

add class="rtl" on body tag if lang.direction == 'rtl' Edit (3.6 KiB, text/plain)

Hi,

tracing back request lifecycle, i figured out where we must change in order to enable rtl.

the controller class we need to alter is "openerp.addons.web.controllers.main.Home", (take a look at main.py)

NOTE: all http requests through @openerpweb.httprequest decorator have no active (regular) OpenERPSession object. so, i did a little hack to openerp.addons.web.http.HttpRequest class to load session on regular HTTP requests. (unless we can't fetch user context).

I used the most safety method of applying rtl direction, by using class attr <body class="rtl"> instead of <body dir="rtl">

this is my first comment and my first patch on openerp project, I apologize if this is a wrong way of how to upload patches.

regards.

Revision history for this message

Shahar Or (mightyiam) wrote on 2013-03-19:

#12

Hi!

I've been following and I have interest in this.

Thank you very much for the work, Mohammed.

A more correct way would actually be in the dir attribute to the html element. see:
http://www.w3.org/International/tutorials/bidi-xhtml/

Keep it up.

Revision history for this message

Mohammed Barsi (mbarsi) wrote on 2013-03-19:

#13

Hi, Shahar

Thank you for comment.

how about applying both (.rtl and dir=rtl). class attr must remain because this:

.rtl .openerp{
property: value;
}

is more clear and consistent than:

html[dir=rtl] .openerp{
property: value;
}

Thanks.

Revision history for this message

Shahar Or (mightyiam) wrote on 2013-03-19:

#14

I would actually do it with the attribute selector, like your second example. It is minimal and concise.

It selects upon the document, when the document is RTL.

Adding a class might make the selectors on the CSS look better, but it creates redundant code in the content itself.

That's just my two cent. Either way - I'm really happy that you're doing this.

Revision history for this message

Ahmad Khayyat (akhayyat) wrote on 2013-03-19:

#15

Mohammed Barsi,

Thank you for sharing your findings. This looks promising.

I am fine with using both of the HTML dir tag and an rtl class. The class can be added once in a top-level element.
Anyway, that's a minor issue that can be debated later.

This leaves two issues:

- OpenERP developers: Would this approach be acceptable for inclusion in OpenERP upstream?
If not, can you suggest an alternative?

- We still need to find the best place in the code for loading rtl.css, preferrably conditionally to avoid loading it unnecessarily.

I'd also like to suggest using the OpenERP Arabic Community's mailing list for further detailed discussion once we figure out integration with upstream OpenERP:

https://groups.google.com/forum/?fromgroups=#!forum/openerparabia-general

There are more people there who are interested in this developement.

Revision history for this message

Serpent Consulting Services (serpent-consulting-services) wrote on 2013-03-19:

#16

+1 Ahmad,

Thanks.

Revision history for this message

Mohammed Barsi (mbarsi) wrote on 2013-03-20:

#17

Salam Ahmed,

thanks for your suggestions.

about loading rtl stylesheet, it dedicated on several places:

- on "web" module, which contains wireframe and layout for the page (main.sass).
- "web_kanban" contains Kanban View specific style.
- "web_calendar", for calendar.
- ..... etc.

this leads to open it in separate branch and start styling through it.

openerp-arabia looks promising, I'll join to them soon.

thanks.

Revision history for this message

Shahar Or (mightyiam) wrote on 2013-04-07:

#18

Dear Mohammed, Serpent Consulting, Ahmad,

My organization would like to start work on rtl.css . Does anyone have any work done already?

Thanks

Revision history for this message

Ahmad Khayyat (akhayyat) wrote on 2013-04-07:

#19

Shahar,

We have not started anything yet, but we would be interested in participating if this is done publicly.
If we start something, it will certainly be public.
We want everyone interested to be able to participate, and we want our efforts to be visible to OpenERP developers to get their feedback to facilitate inclusion in OpenERP upstream.

It would be nice if someone from OpenERP could comment on this discussion.

Revision history for this message

Serpent Consulting Services (serpent-consulting-services) wrote on 2013-04-08:

#20

Dear All,

We are happy to announce that we have made another SFD module which will convert OpenERP 7 web client to RTL.
Please have a look at link : http://www.slideshare.net/husendaudi/rtl#btnNext

We also have module which supports Hijri, Jalali date system and another date widget on OpenERP.

Please contact on <email address hidden> for further information.

Regards,
SerpentCS.

Revision history for this message

Ahmad Khayyat (akhayyat) wrote on 2013-04-08:

#21

Serpent Consulting,

Is this going to be contributed to upstream OpenERP?
Is it available publicly at all?
What is an SFD module?

Revision history for this message

Obay Micro (obay) wrote on 2013-06-04:

#22

[rtl.css] for openerp web UI rtl direction Edit (4.3 KiB, text/css)

Dear Mohammed, Shahar Or, Serpent Consulting, Ahmad,

Attached rtl.css file to add support to rtl direction, it is based on the ".rtl" css class.
Tested with OpenERP v7.

Thanks Mohammed Barsi for your nice effort.

Revision history for this message

Obay Micro (obay) wrote on 2013-06-04:

#23

We still want to hear an input from Openerp Developers!

"- OpenERP developers: Would this approach be acceptable for inclusion in OpenERP upstream?
If not, can you suggest an alternative?

- We still need to find the best place in the code for loading rtl.css, preferrably conditionally to avoid loading it unnecessarily."

Revision history for this message

Ahmad Khayyat (akhayyat) wrote on 2013-06-04:

#24

Obay..

Thanks for sharing.
I will give it a try as soon as I get a chance.

I hope someone from OpenERP can comment soon.

Revision history for this message

Aymen Ammar (aymoun-ammar) wrote on 2013-07-10:

#25

Dear all,

   Someone find where we should implement the rtl.css file?
   Someone tested the css file proposed by Obay?
   Is the procedure applicable with V6.1?

Thanks