GNIP 76 - Add RTL Support

[t-book]

GNIP 76 - Add RTL Support

Overview

GeoNode currently supports 31 languages. (Hebrew might soon follow as no. 32)
From these languages, the following are written from right to left:

('ar', 'Arabic')
('he','Hebrew')
('fa', 'Persian')

https://meta.wikimedia.org/wiki/Template:List_of_language_names_ordered_by_code
This GNIP suggest enabling right-to-left support for named languages

Proposed By

[email protected]

Assigned to Release

This proposal is for GeoNode 3.1.

State

• Under Discussion
• In Progress
• Completed
• Rejected
• Deferred

Motivation

The benefits should be clear, a correct reading direction for rtl languages.

Proposal

Technically this is quite simple.

base.html

{% get_current_language_bidi as LANGUAGE_BIDI %}
{% if LANGUAGE_BIDI %}
<link rel="stylesheet" href="//cdn.rawgit.com/morteza/bootstrap-rtl/v3.3.4/dist/css/bootstrap-rtl.min.css">
<link rel="stylesheet" type="text/css" href="{% static "lib/css/rtl_overwrite.min.css" %}">
{% endif %}

The if statement uses get_current_language_bidi (https://docs.djangoproject.com/en/3.0/topics/i18n/translation/#get-current-language-bidi)
in case the language is RTL two more stylesheets are loaded.

The first loads the general rtl-overwrite for bootstrap from a public cdn.
The second line will load custom styles that will handle margins for example geonode specific items like icons. Further the later will make sure the viewer section will stay LTR.

Backwards Compatibility

Will be fully compatible until templates inherit from base.html. Further this will fail gracefully as all what will happen is that an RTL language is rendered LTR

Future evolution

The use of RTL Templates could be set by a new settings variable USE_RTL=False|True

Feedback

Update this section with relevant feedbacks, if any.

Voting

Project Steering Committee:

• Alessio Fabiani: ✓
• Francesco Bartoli: ✓
• Giovanni Allegri:
• Simone Dalmasso: ✓ by mail
• Toni Schoenbuchner: ✓
• Florian Hoedt: ✓

[giohappy]

@t-book is the UI horizontal flip intentional or a side effect of the RTL support?

[t-book]

@giohappy I see this with respect to the reading direction or what get's into focus first.
For Example at a layer detail page:

LTR: Map -> Tools (Right hand side)
RTL: Map -> Tools (Left hand side)

I do not speak arabic but our arabic userbase agrees with it. From what I further see this flip happens on other RTL pages as well: F.e.: https://arabic-media.com/arabicnews.htm look at the home button at the menu bar. However, I would be happy to hear opinions from native speakers as well.

[giohappy]

thanks @t-book I never noticed that RTL languages used flipped GUIs....

[francbartoli]

+1 thanks @t-book

[afabiani]

very cool +1