search

getgrav / grav

Modern, Crazy Fast, Ridiculously Easy and Amazingly Powerful Flat-File CMS powered by PHP, Markdown, Twig, and Symfony
https://getgrav.org
MIT License
14.59k stars 1.41k forks source link

How to enable support for Arabic? #3594

Open shoorlyne opened 2 years ago

shoorlyne commented 2 years ago

I need to translate posts into Arabic but am having issues.

Here is what I did: Enabled ar language code in system.yaml; Created an Arabic version item.ar.md in the post directory; I was able to access the post and the post appeared translated;

However, the layout was LTR, instead of supposed RTL.

What can I do to change it into the correct RTL for Arabic?

Thanks!

yankl commented 2 years ago

The content in Arabic must be marked as such in the HTML. You can adjust this from the template. E.g., if you want to mark the whole page as being in arabic, then in whatever template sets the page header you could have something like <html lang="{{ grav.language.getActive|e }}" dir="{{ (grav.language.getActive == 'ar') ? 'rtl' : 'ltr' }}">

CarlSinclair commented 5 months ago

The content in Arabic must be marked as such in the HTML. You can adjust this from the template. E.g., if you want to mark the whole page as being in arabic, then in whatever template sets the page header you could have something like <html lang="{{ grav.language.getActive|e }}" dir="{{ (grav.language.getActive == 'ar') ? 'rtl' : 'ltr' }}">

So Grav's built-in multi-language features don't work for RTL languages? We have to make dedicated webpages that bypass the built-in logic just to have RTL support? That doesn't seem right.

rhukster commented 5 months ago

Grav itself doesn't care about the LTR or RTL nature of the language, the template controls how things are displayed, so the template needs to to support flipping the dir option in the HTML tag. It's a very easy thing to do as @yankl showed.

CarlSinclair commented 5 months ago

Can you set that header within the frontmatter for the translated version of the page? Or do you need a dedicated template for the RTL pages? If it's the latter then like I said, it cannot be configured through Grav's built-in multilingual functionality.

Update: The above line of code does indeed automatically switch the direction when the detected page language is Arabic, but it's not actually flipping the text. It's only messing up the CSS while the text (which also has dir="rtl" tags in every tag) is not correctly flipping.

Update 2: The best way I have found is just to manually set "text-align: right" in in-line styles or using div# in stylesheets. That way you don't have to worry about RTL messing up your page layout and you still have your correct text direction.