Repository: searx/searx

Issue:
RTL direction for RTL locales
Arabic, Farsi, Hebrew, Urdu etc. should have page direction set to RTL.



Discussion:
Of course, you are right. But as you can imagine, it's harder for us to know if our changes are the rights ones.

Do you think adding only `<html dir="rtl">` would suffice, or each result, `<p>`, `<span>` etc. need to be RTL as well ?

I understand. Please provide me with example **searx** pages (not necessarily working searx node) and I will confirm to you as to whether they look proper or not. Contents of page About must not be affected, unless these contents would be translatable.

You can do it, using CSS.
http://www.qupzilla.com/?lang=fa
https://github.com/QupZilla/qupzilla.com/blob/master/css/rtl-helper.css

The issue is, should we RTL the results, even if we don't know the languages of the results, or defining RTL for the page will automagically take care of that.

Note that searx hasn't yet an interface in a RTL language (you can ask and provide traduction on transifex.org, if you want ;) ), so we can't test the interface as is.  
But I tried something with a search in arabic. The page would look like this : 
http://cqoicebordel.free.fr/searx-rtl.png  
Personnaly, I think it's not that bad, but I don't know if the result texts are in the right order or not...

(PS : If you prefer a search in a different language, don't hesitate to ask. Just provide me a search term in the right script :) )

Looks good.

Top bar 'searx home about preferences' and Filters (general, file etc.) should be reversed.

> you can ask and provide traduction on transifex.org, if you want ;) 

Hebrew translation is pending.

Cool for the hebrew translation !

I will look at how we will implement it rapidly.

Also, keep in mind that the fact that I could provide such an image doesn't mean it will be here in searx as fast. There are some technicall issues to resolve first.

@asciimoo How do you want to store the fact that an interface language is RTL ? In settings.yml ? Or maybe there is an other way, I have no idea.

@GreenLunar thanks the translation, i'll update the repo.

@Cqoicebordel constant list of RTL languages in `__init__.py` or `webapp.py`? so we can check in the render function that RTL is required and pass a boolean to the templates

Alternatively, you can ask if RTL by reading an entry in xx.po files (GTK+ and Qt do so).  I do not know what would be the lesser expensive way.  See  `_direction` https://github.com/Tox/Tox-Website#language-file-metadata

Be RTL
- While /about need not be RTL yet, its top bar should be RTL. EDIT: **oscar theme**
- In /preferences, only Default categories row is placed properly. The rest of the rows, such as Search language is still left-to-right.

Be LTR (must not be affected by RTL)
- Table for maps that appear when clicking on Show Details (key value). See /stats for a good example, where RTL is respected, but contents  (e.g. vimeo 0.90) are always LTR.
- I think the same too for /preferences#tab_engine, but I think we better not touch /preferences#tab_engine until we get to have more RTL users voicing their thoughts.

I took everything you said as being in Oscar. If otherwise, try to specify it.
- I knew about "About" but I didn't know how to do it properly. It will be fixed in the future, but not right now (anyone has an idea how to do it ?)
- Label and description switched places in preferences is corrected, waiting to be merged.
- If I understood properly, you want the text in the table to be aligned to the left. It's waiting to be merged. If it's not that, try to be a bit more... international in your way of speaking english ;)
- I thought about that too, but here, it's an UX question. Does an RTL user has an habit to have the buttons to the left ?
- For the suggestions, I don't know how to do it exactly. If @pointhi know how to, he is welcome to fix that, but if not, it will take a bit of time, while I try to find the solution in bootstrap.

Don't forget to test the others themes too ;)

> I thought about that too, but here, it's an UX question. Does an RTL user has an habit to have the buttons to the left ?

About what? (thought about that)

> For the suggestions, I don't know how to do it exactly. If @pointhi know how to, he is welcome to fix that, but if not, it will take a bit of time, while I try to find the solution in bootstrap.

You can use an `</html>` tag, or `&rlm:` or `&rle:` to change direction. I would prefer an `</html>` tag over a Unicode Control Character.

> Don't forget to test the others themes too ;)

Just did.  /preferences#tab_engine of  courgette theme can be set to be aligned from right-to-left (columns are properly placed, but everything is aligned from left-to-right).

---

> I think the same too for /preferences#tab_engine, but I think we better not touch /preferences#tab_engine until we get to have more RTL users voicing their thoughts.

No. Instead, place keywords in an own column. **Please ignore this little thing, for the time being.** EDIT: See #230.

Sorry, I have a tendancy to respond to everything in order, so, it's clear for me but not always for everybody.

> I thought about that too, but here, it's an UX question. Does an RTL user has an habit to have the buttons to the left ?

I was talking about the preference page and the list of engines, especially, the activate or ignore button.

> You can use an `</html>` tag, or &rlm: or &rle: to change direction. I would prefer an `</html>` tag over a Unicode Control Character.

No, it's an issue of CSS, not tags or Unicode chars.

> Just did. /preferences#tab_engine of courgette theme can be set to be aligned from right-to-left (columns are properly placed, but everything is aligned from left-to-right).

Again, it's not really clear. It's aligned to the left. Would you prefer the same columns order, but everything aligned to the right ?

> I took everything you said as being in Oscar. If otherwise, try to specify it.

You are correct.

> I thought about that too, but here, it's an UX question. Does an RTL user has an habit to have the buttons to the left ?

RTL speaker: Yes.
LTR speaker: Yes :P

Run in terminal on Linux: `LANG=ar_SY.utf8 command` (GTK+ or Qt graphical application) and see for yourself.

> > Just did. /preferences#tab_engine of courgette theme can be set to be aligned from right-to-left (columns are properly placed, but everything is aligned from left-to-right).  
> 
> Again, it's not really clear. It's aligned to the left. Would you prefer the same columns order, but everything aligned to the right ?

Yes.

Please edit your comment and close `<>` with ``.

> See /stats for a good example, where RTL is respected, but contents (e.g. vimeo 0.90) are always LTR.

Be LTR (must not be affected by RTL)
- Statistics tables of courgette and default themes should be LTR because content is entirely in English. Maybe some RTL users would disagree.

> In /preferences, only Default categories row is placed properly. The rest of the rows, such as Search language is still left-to-right.

Now, it looks fine, on wider screens, but there is a problem when view is smaller (see screenshots).

![preferences_searx_en](https://cloud.githubusercontent.com/assets/2053884/6173109/29d39522-b2ee-11e4-905b-f1cefc28ca10.png) ![preferences_searx_he](https://cloud.githubusercontent.com/assets/2053884/6173147/7f43e5c0-b2ee-11e4-9636-c893d96d3e50.png)

Please revert (not in repository)  last RTL-related commit in searx.me so I would be able to take a screenshot of preferences using oscar theme.

EDIT: If there would not be smartphones, I would not bother on reporting this smaller-display issue.

Let me some time for that.

@GreenLunar could you check that these issues are solved?

Default Categories is not placed the same as the rest.
I will test again with a WebKit web browser and report.

P.S. there was a nicer new arrangement for this page a week ago or so.

RTL UI is fine.  When I would find problems, in mobile layouts, I guess, I would post about them here.

@GreenLunar thanks for the testing!

> [Be LTR (must not be affected by RTL)](#issuecomment-73941237).
- Table of Cookies (`tab_cookies`).

Theme: **Oscar** (no other theme has access to cookie table)


Resolving patch:
diff --git a/searx/webapp.py b/searx/webapp.py
--- a/searx/webapp.py
+++ b/searx/webapp.py
@@ -144,7 +144,7 @@
 
 babel = Babel(app)
 
-rtl_locales = ['ar', 'arc', 'bcc', 'bqi', 'ckb', 'dv', 'fa', 'glk', 'he',
+rtl_locales = ['ar', 'arc', 'bcc', 'bqi', 'ckb', 'dv', 'fa', 'fa_IR', 'glk', 'he',
                'ku', 'mzn', 'pnb', 'ps', 'sd', 'ug', 'ur', 'yi']
 
 # used when translating category names


Test patch: