AlmaLinux / almalinux.org

almalinux.org official web site sources.
https://almalinux.org
Creative Commons Attribution Share Alike 4.0 International
39 stars 50 forks source link

Adding rtl support #498

Closed Noam-Alum closed 3 months ago

Noam-Alum commented 3 months ago

Hello, I am currently working on translating the website to Hebrew, while viewing the website in Hebrew I noticed the text is not in the right form when writing both in Hebrew and English I the same sentence, for example: image Is translated in Hebrew to "AlmaLinux OS On" instead of "On AlmaLinux OS".

I came up with a quick solution to this issue using the fact that while using other languages than English the URL contains /LangCode/ at the start of it. The following snippet of code was tested on a local installation of the website on my behalf: layouts/partials/common/scripts.html:

const UrlPrefix = window.location.pathname;
const htmlTag = document.querySelector('html');
if (UrlPrefix.includes('/he/') || UrlPrefix.includes('/ar/')) {
    htmlTag.setAttribute('lang', UrlPrefix.slice(1, -1));
    htmlTag.setAttribute('dir', 'rtl');
}

I am by no means a web developer, I do this as a hobby. This solution was the best one I could come up with, if you think you have a better solution use it.

Results: image

bennyvasquez commented 3 months ago

This is a great find, @Noam-Alum. I wonder if this is actually deeper than just how the text is displayed on our website specifically.

@codyro, @jonathanspw is there an upstream that this should be reported to? I don't remember (or maybe never really knew) if we're using a Hugo plugin or some feature of Weblate itself to manage this.

Noam-Alum commented 3 months ago

This is a great find, @Noam-Alum. I wonder if this is actually deeper than just how the text is displayed on our website specifically.

@codyro, @jonathanspw is there an upstream that this should be reported to? I don't remember (or maybe never really knew) if we're using a Hugo plugin or some feature of Weblate itself to manage this.

That's what I thought, but I had to get a POC or a solution in a case where there is no superior alternative available. I know that rtl formatting is quite common and from my testing it seems to work fine. But I'd love to learn how to fix this in another way ;)

codyro commented 3 months ago

As someone who barely speaks English fluently, I hadn't even considered this! We can fix this for all languages requiring left-to-right/right-to-left by defining it in the configuration by setting the languageDirection.

https://github.com/AlmaLinux/almalinux.org/blob/master/config.yaml#L28

EX:

    he: {weight: 2, languagename: עברית, languageDirection: rtl}

I haven't tested this yet, but if you'd like to give it a whirl/adjust this PR we can get it merged in :).

Reference: https://gohugo.io/content-management/multilingual/

codyro commented 3 months ago

Looks good to me. Want to verify this is now displaying properly now (preview of your PR #504): https://24ba2fe9.almalinux-org.pages.dev/he/