RTL fundamentals support - choices and help

[LyoNick]

1. where in the DB the RTL setting is set?

 

2. how can we check this setting from PHP?

 

3. how can we check this setting from smarty?

 

4. how can we check this setting from js?

 

5. what currently make the page aware the rtl css version is needed?

 

6. how early can we test for it while loading of the shop?

 

7. what were the reasons to choose overwriting everything with rtl.css?

 

8. what were the reasons if any AGAINST simply checking if is RTL lang and change the css path from /css to /css_rtl?

(this will also simplify the getCSSPath function @ classes/Media.php)

 

9. why those reason do not apply to the mobile theme (use condition in the defines_uri.inc.php, and FrontController.php files)?

 

10. i think it will be much easier to simply make the RTL a separate theme like the mobile. am i wrong? why?

 

11. i also think it will benefit other none-RTL multi-languages stores to have an OPTION to use different themes for different languages. 

separating the RTL theme issue and making it contained and incrementally solvable, one sass file at the time.

 

 

please be as critic as you can,

helping me understand those choices and start to work with them, OR we can start moving toward the separation and solve it in bite size chunks 

 

Lyo

 

edit: for unknown reason some of the text is larger and bolder, ignore it.

Edited September 29, 2014 by LyoNick (see edit history)

[djfm]

Hi Lyo (you know me as fram on Crowdin ),

 

Here are a few answers:

 

1. where in the DB the RTL setting is set?

 

This is a property of the language, so it would be in ps_lang, column "is_rtl".

 

2. how can we check this setting from PHP?

 

The relevant language (customer language in FO, admin language in BO) should always be in the Context, so to know if you're in a RTL setup, you can use:

 

Context::getContext()->language->is_rtl

 

3. how can we check this setting from smarty?

 

There is no really generic way, but as long as you can get the current language, you can know whether you're in RTL or not.

 

4. how can we check this setting from js?

 

I don't think there is a built-in way.

 

5. what currently make the page aware the rtl css version is needed?

 

The is_rtl property of the language in the context. Controllers are aware of this and include "rtl.css" when it's needed. See for instance in FO: https://github.com/PrestaShop/PrestaShop/blob/1.6/classes/controller/FrontController.php#L832.

The rtl.css is included from the initFooter method to be sure that it comes after all other CSSs and hence overrides them.

 

6. how early can we test for it while loading of the shop?

 

Using the context

 

7. what were the reasons to choose overwriting everything with rtl.css?

 

Well precisely because we don't need to overwrite everything. Not all CSS directives need to be rewritten in RTL, so by overwriting just what's necessary we make maintenance easier.

 

8. what were the reasons if any AGAINST simply checking if is RTL lang and change the css path from /css to /css_rtl?

(this will also simplify the getCSSPath function @ classes/Media.php)

 

See answer to question 7., avoid duplicating the work.

 

9. why those reason do not apply to the mobile theme (use condition in the defines_uri.inc.php, and FrontController.php files)?

 

Because the mobile theme was something we had pre-bootstrap. At the time, a mobile theme was very different from a regular theme, and it could be a completely different theme altogether, with nothing shared with the main theme. Now with the responsive themes this has become almost useless.

 

10. i think it will be much easier to simply make the RTL a separate theme like the mobile. am i wrong? why?

 

I don't think so, because we would need to maintain 2 separate themes and it seems that just overriding what's needed is more efficient. But maybe I'm wrong, I'll let the RTL experts comment.

 

11. i also think it will benefit other none-RTL multi-languages stores to have an OPTION to use different themes for different languages.

 

That's not a bad idea in my opinion, but only if it doesn't replace the override with rtl.css approach altogether. Don't know how hard to implement it would be though. You could reach similar results with multishop, having on theme per shop, and only one language per shop. But that's a bit complicated just for this

[LyoNick]

ok!

so after we clear that up, i guess for now we are going forward with the current choice using rtl.css to override when needed.

 

just to sum it up:

ALL the RTL fixes should be in the rtl.scss / rtl.css right?  not separated to specific file per module?

 

i'll start playing around as soon as i'll find some time. any pointers will be appreciated.

-------------------------------------------------------

 

the reason i thought to made a different theme is due to the fact that some images need to flip side, some fonts might be changed and maybe (not sure yet) even bootstrap itself need  a bootstrap_rtl version, making the theme a lot different.

 

but since most of the changes are in the css:

 

maybe we can just conditionally change the constant '_THEME_CSS_DIR_'  to point to a new folder 'css_rtl' instead of 'css' when the is_rtl flag is set?

reusing almost all the other assets.

 

it will also clean the code from re-checking for RTL everywhere, i.e like the  snippet you pointed out

and reloading in the footer.

 

i am new to sass and compass, so i am going to look for a way to generate 2 css versions conditionally from the same source, making the work even less a duplicate. but this will require some research.

 

Lyo

Edited September 30, 2014 by LyoNick (see edit history)

[LyoNick]

after initial search i found this - 

http://stackoverflow.com/questions/14199323/right-to-left-rtl-support-in-sass-project

 

and that led me to this:

http://anasnakawa.github.io/bi-app-sass/

 

so it seems to (the un-experience) me like a conditional '_THEME_CSS_DIR_' can be a better approach.

 

any thought?

 

Lyo

Edited September 30, 2014 by LyoNick (see edit history)

[Danoosh]

Hello Lyo,

We are trying to adapt Prestashop to RTL. We had changed Prestashop BO themes, Installation theme, PDF invoices, e-mail templates and other sections and now these changes merged with Prestashop in github. Now BO is RTL but has some problems. for better RTL support you can download an un-official version of Prestashop named "Persian Prestashop" in http://ipresta.ir or github.com/PrestashopIran

 

We want to make Prestashop fully RTL but when everything be the best for all RTL languages and themes must be based sass, scss.These changes need to be approved by Prestashop Localization manager and UI manager. We have some progress for FO and I push new changes on github as soon as possible.

 

5. what currently make the page aware the rtl css version is needed?

7. what were the reasons to choose overwriting everything with rtl.css?

 

You can use file_rtl.css files instead rtl.css override. It works everywhere that addCss() method is used. for example in all official and third party modules and all of the theme css files. Everywhere you have a file.css create a file_rtl.css (It is not an override and you must copy original file and then change it for rtl support).

For example you can create a global_rtl.css file and put it in theme css dir. it will be loaded automatically instead global.css

see classes/media.php

 

maybe we can just conditionally change the constant '_THEME_CSS_DIR_'  to point to a new folder 'css_rtl' instead of 'css' when the is_rtl flag is set?

 

 

It is not a good idea because some themes are using rtl.css or file_rtl.css overrides. we do not need all files to be rtl and size of theme css dir will be twice. but if we have an option to choose theme dir for rtl in themes advanced setting it will be a good idea. 

[LyoNick]

this is gr8!

 

so basically all i need is to create one file_rtl.css at the time?

 

should i create a new scss file? or are you using something like 

http://anasnakawa.github.io/bi-app-sass/

to auto generate them?

 

do you have a road-map for the RTL supports?

whats is done whats still need to be done and ETA?

where can i help?

 

one last thing:

what is your solution for loading an horizontal flipped image when appropriate?

 

i will check your unofficial site now.

[LyoNick]

i have tried adding a file named maintenance_rt.css and clearing cache

but it seems the maintenance.tpl still load maintenance.css

and not maintenance_rt.css

 

what am i missing?

 

​edit: well this page have no controller, hence no addCSS()

i tried with sitemap.css and it indeed load sitemap_rtl.css

 

  

Edited October 1, 2014 by LyoNick (see edit history)

[Danoosh]

 

 

so basically all i need is to create one file_rtl.css at the time?

 

Yes, anywhere there is a file.css you can create rtl version of it in file_rtl.css if the original file is loaded by addCss() method.

if your file doesn't affect in direction you can use addCss(file.css,media,false) in any module you want to develope.

 

should i create a new scss file? or are you using something like 

http://anasnakawa.github.io/bi-app-sass/

to auto generate them?

 

Yes you can. see default admin theme sass files.

 

do you have a road-map for the RTL supports?

whats is done whats still need to be done and ETA?

where can i help?

 

Yes, I know what is done and what is left.

 

Installer is completely RTL and you can see rtl installer theme bye choosing any rtl language. If your language is rtl define it in github and create a pull request.

Installer has a problem. After Installation you need to set language as rtl manually it must be fixed.

 

Admin theme using rtl-bootstrap now, but we are trying to use a bootstrap-rtl-sass that improved for bidi-projects like Prestashop.

I've added an rtl.js in js folder in 1.6.0.6 to auto rtl inline styles and any other js change may be needed. this file has a problem that affect background colors in BO like admin order page. I've fixed this problem and will create a pull request for it.

 

PDF generator generate RTL PDFs now and there is no problem in PDF files.

 

FO need to be rtl. We are trying to use bootstrap-rtl that I told about it.

 

You can try prestashop 1.6.0.9 and report any problem to me or djfm for fix it or you can fix it and create a pull request on github.

 

one last thing:

what is your solution for loading an horizontal flipped image when appropriate?

 

just avoid inline background images. You can change image url in css files.

If you want to flip an image used in content for an rtl language you can add a class to image and rotate it by css3 rotate.

 

 

i have tried adding a file named maintenance_rt.css and clearing cache

but it seems the maintenance.tpl still load maintenance.css

and not maintenance_rt.css

Yes, maintenance loads all css files directly in tpl. for fix that you must override maintenance controller and load maintenance_rtl.tpl instead maintenance.tpl. We must assign a variable to smarty in next versions for using in tpl files.

Edited October 1, 2014 by Danoosh (see edit history)

[LyoNick]

thank you for the very detailed replays

i will take a closer look as soon as i got some time.

it looks like you are making a lot of progress already!

 

Lyo