Add built-in support for RTL languages

[loayamin]

Feature Request

For website with RTL and LTR languages.

[gcushen]

Good point on adding better support for RTL languages!

Our CSS framework, Bootstrap, has an issue open to add built-in support for RTL here: https://github.com/twbs/bootstrap/issues/24807

In the meantime, perhaps we could add an rtl class to the body that can be controlled by the config/_default/languages.toml file. Then you'd be able to add RTL alignment overrides using the existing custom SCSS approach (e.g. creating customisations like body.rtl {...} in custom.scss)?

[loayamin]

Yes, that would be good. I added global body {direction: rtl;} and for LTR I'm adding custom class for the content. I couldn't find a fix for the navbar though.

[azeezx]

I really would love to see Hugo-academic support RTL languages soon....

[gcushen]

I don't believe anyone has actually contributed an RTL interface language yet - https://github.com/gcushen/hugo-academic/blob/master/data/i18n/languages.yaml ?

Arabic, Hebrew, Persian, and Urdu are the most popular RTL languages but we don't appear to have any contributions for these. Feel free to contribute an RTL language pack.

[gcushen]

Based on your feedback, initial RTL support has been added for Arabic, Hebrew, Persian, and Urdu in update 2d63a0090aba1e09f09d19a93beb8702999a5e8c . By updating to the latest master version of Academic, you'll pick up this change.

A custom style file can then be added to your site, using the html[dir="rtl"] selector as a parent selector to override other CSS selectors. For example,

html[dir="rtl"] {
  body {
    text-align: right;
  }
}

Feel free to contribute an RTL language pack and/or RTL CSS styles for Academic.

[loayamin]

Great! I will add Arabic and Persian in the language pack and the RTL CSS styles. Thanks a lot.

[azeezx]

I will do my best on the language pack :)

[azeezx]

Hi, @gcushen when you think we can start using the RTL language on our sites?

and Many thanks for your time :)

[mkhoshbin1]

1. For an RTL language, the columns in the about widget (interests and education) need to be reversed.
2. In my RTL website, the language picker goes out of screen bounds.

[alsaibie]

Re: https://github.com/gcushen/hugo-academic/issues/1639#issuecomment-623109781

1. For an RTL language, the columns in the about widget (interests and education) need to be reversed.

Yes. Also, how to right align the text in those columns?

2. In my RTL website, the language picker goes out of screen bounds.

The language picker as well as the last network icon under the author name, have a 0 margin. To fix, adjust the margin to 10px in: ul.nav-icons li:last-of-type (in _nav.scss) and .network-icon li:last-of-type (in _widgets.scss)

I didn't see that this change affects the English LTR display.

[mkhoshbin1]

1. For an RTL language, the columns in the about widget (interests and education) need to be reversed.

Yes. Also, how to right align the text in those columns?

I added text-align: right; to the body element and it seemed OK. Will investigate. Update: Messed up items that need to be in English, namely publications. I think we need:

1. Some facility to cherry pick direction, such as a shortcode. Too much work for the user.
2. Force some content to be always LTR. This doesn't work for publications that are actually RTL, for instance a book in Farsi.
3. Force the user to choose RTL or LTR for some content, and the rest is global. I think the last one should work best, but it's too big a change and we need input from @gcushen.

[alsaibie]

What worked for me regarding text alignment is just adding text align to body in this manner to custom.scss

body:lang(ar) { direction: rtl; text-align: right; }

And yes, it would be nice to have the option to mix ltr/rtl.

[gcushen]

Closing this as initial support for RTL was added in bd8062f and there's been no further feedback.

If someone would like to contribute a more complete RTL style, it might be best to create a dedicated repo for it where those familiar with RTL can contribute, and package it up as a Hugo Module (aka a plugin for Academic).

To get started, you would just need to wrap RTL styles in the RTL html[dir="rtl"] { ... } style block within a Custom Style file as described in https://github.com/gcushen/hugo-academic/issues/1639#issuecomment-612517437 .

[mkhoshbin1]

@gcushen, It seems that there has been a development in Bootstrap and twbs/bootstrap#24807 has been merged. Will Academic be moving towards built-in RTL, or at least a functional module? I personally don't know much css/sass, but could test the features and maybe help out a little.

[paazca]

@mkhoshbin1 I've created my own module for RTL support using RTLCSS. https://github.com/paazca/wowchemy-rtl-module

It increases Hugo's build time by a bit but it seems to properly modify the stylesheets for right-to-left usage.