FS#45981 - RTL layout support

Attached to Project: AUR web interface
Opened by Safa Alfulaij (SafaAlfulaij) - Friday, 14 August 2015, 09:14 GMT
Last edited by Lukas Fleischer (lfleischer) - Sunday, 30 August 2015, 15:04 GMT
Task Type Feature Request
Category Backend
Status Unconfirmed
Assigned To No-one
Architecture All
Severity Low
Priority Normal
Reported Version 4.0.0-rc6
Due in Version Undecided
Due Date Undecided
Percent Complete 0%
Votes 2
Private No

Details

The AUR interface don't support RTL layout. I've attached a simple patch to support that (just minimal right now). I can view the pages that I have access to only, which means I can't decide wether other pages (like votes, charts, etc.) contains problems in the layout or not.
I'm not a web developer, so I couldn't change the header.php file and include (dir="rtl") in the html main object. Hopefully one can do it :)
The language codes that are RTL languages (from Django source code) are: ["he", "ar", "fa", "ur"]

Testing done only by Stylish add-on in Firefox.
   RTL_fix_1.diff (4.7 KiB)
This task depends upon

Comment by Lukas Fleischer (lfleischer) - Sunday, 16 August 2015, 06:41 GMT
Can't we simply use the CSS :lang() selector as used in 3d6c6cc (Support for langauges written right-to-left, 2011-02-15)?
Comment by Lukas Fleischer (lfleischer) - Sunday, 16 August 2015, 06:43 GMT
  • Field changed: Task Type (Bug Report → Feature Request)
It would also be nice if you could send a properly git-formatted patch (i.e. using git-send-email(1)) to the aur-dev mailing list instead. That makes it much easier to discuss specific parts of the diff.
Comment by Lukas Fleischer (lfleischer) - Sunday, 21 February 2016, 19:09 GMT
What's the status of this? Has this been resubmitted to the ML?
Comment by Yaron Shahrabani (yaron) - Tuesday, 13 August 2019, 15:19 GMT
Any news? Can I help?
Comment by Lukas Fleischer (lfleischer) - Friday, 31 January 2020, 08:08 GMT
Sorry for the late reply, I didn't see your comment. Feel free to pick it up, have a look at commit 3d6c6cc (Support for langauges written right-to-left, 2011-02-15), create a new patch and submit it to the ML.
Comment by Yaron Shahrabani (yaron) - Saturday, 01 February 2020, 14:33 GMT
Sure, I'm on it!

I may need a little guidance with Django though, where can I define an array of language with specially crafted CSS or enforcing "dir=rtl" when one of these languages is selected?

I found this file: https://github.com/lfos/aurweb/blob/master/web/lib/translator.inc.php
I'm not really sure where do I go from here.
Is this mailing list is still the way to go or a patch on GitHub is enough?
Comment by Lukas Fleischer (lfleischer) - Saturday, 01 February 2020, 14:43 GMT
aurweb does not use Django. It is written in PHP.

I don't think you need to make any changes to anything except for the CSS. As I suggested before, have a look at how this was implemented before, in commit 3d6c6cc (Support for langauges written right-to-left, 2011-02-15).

Patches should be sent to the aur-dev mailing list; see [1].

[1] https://lists.archlinux.org/listinfo/aur-dev
Comment by Yaron Shahrabani (yaron) - Saturday, 01 February 2020, 15:25 GMT
Hmmmm I can't find it, the first few commit entries for these files are from 2012, do you know if there's an older copy somewhere?

I'm terribly sorry for bothering you about this.
Comment by Lukas Fleischer (lfleischer) - Saturday, 01 February 2020, 16:49 GMT
Run `git show 3d6c6cc` in your local checkout of the Git repository. Alternatively, you can use the cgit web interface; see [1].

[1] https://git.archlinux.org/aurweb.git/commit/?id=3d6c6cc
Comment by Yaron Shahrabani (yaron) - Saturday, 01 February 2020, 19:56 GMT
Hey again,
I'm sorry for all the mess, GitHub web interface does not allow squashing the commits and it created all sorts of weird branch names, if you prefer I can resubmit this pull request in a more organised way:
https://github.com/lfos/aurweb/pull/7

I will also create a patch from it to present it to the list when we'll agree on the content.

Thank you and sorry for all the trouble.
Comment by Lukas Fleischer (lfleischer) - Sunday, 02 February 2020, 10:04 GMT
Thanks for working on this!

You should not modify archweb.css --- this file is synced with the archweb project and will be overwritten on the next update. Please add all modifications to aurweb.css instead.
Comment by Yaron Shahrabani (yaron) - Monday, 03 February 2020, 05:33 GMT
So it's better to move all these changes to aurweb.css and that's it?

I'll resubmit it in the next couple of days.
Comment by Lukas Fleischer (lfleischer) - Monday, 03 February 2020, 08:19 GMT
Yes. It's not just better, it's necessary. With the current implementation, the changes would be reverted when updating archweb.css the next time.
Comment by Yaron Shahrabani (yaron) - Friday, 07 February 2020, 07:05 GMT
So sorry to bother again, can you check the new pull request?
https://github.com/lfos/aurweb/pull/8
Comment by Lukas Fleischer (lfleischer) - Monday, 10 February 2020, 13:45 GMT
Did you even test the patch? Your language selector only matches the language "he-ar-ur-fa". I don't think this is what you intended. You cannot match multiple languages like that...
Comment by Yaron Shahrabani (yaron) - Tuesday, 11 February 2020, 08:07 GMT
Well I wasn't sure about this implementation and believed that this method works but it doesn't, sorry for that.

I've consulted some colleagues and apparently the only way to go is to set direction:rtl or dir=rtl, instead of specifying the language codes.

Is there a way to add those rules for specific languages?
Comment by Lukas Fleischer (lfleischer) - Tuesday, 11 February 2020, 08:18 GMT
You can match multiple language codes in CSS but you need to copy the selectors, e.g. "#lang_sub:lang(he), #lang_sub:lang(ar), #lang_sub:lang(ur), #lang_sub:lang(fa)" instead of "#lang_sub:lang(he-ar-ur-fa)".
Comment by Yaron Shahrabani (yaron) - Tuesday, 11 February 2020, 08:49 GMT
Are you sure it's a better approach than simply using RTL? I can probably build some quick regex to make this change.

If so I'll keep going that way.

Thanks, I'll create another commit soon.
Comment by Lukas Fleischer (lfleischer) - Tuesday, 11 February 2020, 09:19 GMT
Well, I don't understand what you mean by "simply using RTL"... We can use CSS to enable RTL but need to match languages somehow.
Comment by Lukas Fleischer (lfleischer) - Tuesday, 11 February 2020, 09:22 GMT
Reading your previous comment again, I think you are referring to setting dir="rtl" in the HTML code, then using the direction() selector in CSS for additional modifications. That sounds like a good solution to me, too.
Comment by Yaron Shahrabani (yaron) - Friday, 21 February 2020, 07:19 GMT
I gathered my regex skills to come up with a simple solution that might actually work.

This is the combined regex of both replacements done:
https://regex101.com/r/9eTBz1/1

The PRs are waiting patiently in line for their turn.

Thank you and feel free to reply if you think none of the solutions work nor optimal.
Comment by Lukas Fleischer (lfleischer) - Friday, 21 February 2020, 07:27 GMT
The replacements are incorrect. You need to separate the languages by commas. You also need to repeat prefixes, i.e. "div p:lang(he), div p:lang(ar), div p:lang(ur), div p:lang(fa)" instead of "div p:lang(he), p:lang(ar), p:lang(ur), p:lang(fa)".

The second PR also won't work since you don't set the direction anywhere.
Comment by Lukas Fleischer (lfleischer) - Friday, 21 February 2020, 07:39 GMT
I tried to fix your patch manually by adding code to set the dir attribute but it looks like even then, the CSS does not do what it should. I appreciate your work but with such a non-trivial change, it is highly unlikely that we will ever get something that works unless you start testing your changes locally before submitting them...
Comment by Yaron Shahrabani (yaron) - Friday, 21 February 2020, 09:21 GMT
Sure, sorry, let me get back to you once I'll put this all inside a container.
Comment by Lukas Fleischer (lfleischer) - Friday, 21 February 2020, 09:30 GMT
FWIW, I've always wanted to create a Docker image for testing. If you create a Dockerfile anyway, please do not hesitate to share it; we might want to add that to the source tree as well.
Comment by Yaron Shahrabani (yaron) - Friday, 21 February 2020, 09:45 GMT
Sure thing, I'd love that! :)

Loading...