RTL languages doesn't render correctly

[akamfoad]

The application (as far as I explored) contains no handlers to change the layout entirely or a portion of it in response of Right To Left text. That is why it renders all types of texts as Left to Right without taking the locale in consideration.

See the below (Git-It in Kurdish language)

Not just that, But there is a mix of English and Kurdish words to deliver the context and preserve some terminology as it is which makes more sense in English, so the text got mixed as well, especially when the EN words are in the middle of the sentence.

See the below (Git-It in Kurdish Language - Using Terminal Section as example)

[jotoeri]

Hey Akam,

The application (as far as I explored) contains no handlers to change the layout entirely or a portion of it in response of Right To Left text. That is why it renders all types of texts as Left to Right without taking the locale in consideration.

Hm, yeah. I thought about that already, i was just not sure, if kurdish is really written as rtl. I'll have a look into.

Not just that, But there is a mix of English and Kurdish words to deliver the context and preserve some terminology as it is which makes more sense in English, so the text got mixed as well, especially when the EN words are in the middle of the sentence.

How do you think about this? Do you have another way in mind? Do you know how such stuff is handeled on other applications, that refer to some other english text? Or was that just meant as kind of an information? Until now i thought this is a quite good way, i also did it similar in german translations (Just with the difference, that german uses the same letters as english...).

Greets, :)
Jonas

[akamfoad]

Hey Jonas,

Hm, yeah. I thought about that already, i was just not sure, if Kurdish is really written as rtl. I'll have a look into.

Yeah Kurdish actually is rtl, because it uses Arabic letters and some other Kurdish specific letters which are collectively rtl.

How do you think about this? Do you have another way in mind? Do you know how such stuff is handeled on other applications, that refer to some other english text? Or was that just meant as kind of an information? Until now i thought this is a quite good way, i also did it similar in german translations (Just with the difference, that german uses the same letters as english...).

I explored some options, one was setting direction: rtl on the html tag of the pages, but that messed some layout, like the language select element. Tried to change some containers to direction: rtl and the result seems good, and it looks like just changing the direction to rtl solves the sentence with mixed direction words problem. for instance look at below if you can notice I changed the parent of Using Terminal section's direction to rtl:

And then I noticed there is a div.content inside div.wrapper so You can set the direction: rtl and only the content changes and the layout remains good looking.

but there is one more issue with both ways, if you noticed, the code parts are changed to rtl because they inherit direction property from their parents which changed to rtl.

I think one workaround is setting code's parent elements to be direction: ltr maybe in the CSS because it is ltr all the time as they wont be translated anyway.

Cheers ☕

[jotoeri]

I explored some options, one was setting direction: rtl on the html tag of the pages, but that messed some layout, like the language select element. Tried to change some containers to direction: rtl and the result seems good, and it looks like just changing the direction to rtl solves the sentence with mixed direction words problem. for instance look at below if you can notice I changed the parent of Using Terminal section's direction to rtl:

Thank you for this - that helped me a lot not to have to search for this...
And now i also recognized, what you meant with the mixed directions... I just didn't recognize, as i don't know at all, what is written there :D

• Concerning the code sections, see the PR, i right-aligned them now additionally, is that the proper layout for rtl-language?

[akamfoad]

Thank you for this - that helped me a lot not to have to search for this...
And now i also recognized, what you meant with the mixed directions... I just didn't recognize, as i don't know at all, what is written there :D

Glad, that helped you :D

* Concerning the code sections, see the PR, i right-aligned them now additionally, is that the proper layout for rtl-language?

Nice job, I checked it out, and confused where to discuss it you mentioned me on PR and here, I decided to reply here and discuss the things as we started here, anyway.

that is okay to be right aligned to me, but in my opinion, code sections are nice to be left aligned as they show up everywhere like that, especially in the terminal. Also I just commented out align: right portion of the code and it looks much better for me and looks "cleaner" , also there is no norm in Kurdish language forcing to right align all non-kurdish texts just because the language itself written from right to left.
you can look at this to screen shots, you wrote codes in JS but I show you in CSS as it better looking than JS strings :D

• your PR set this

div.code {
direction: ltr;
text-align: right;
}

---

• I changed to this

div.code {
direction: ltr;
}

[jotoeri]

Nice job, I checked it out, and confused where to discuss it you mentioned me on PR and here, I decided to reply here and discuss the things as we started here, anyway.

Haha, sorry. 🙈

that is okay to be right aligned to me, but in my opinion, code sections are nice to be left aligned as they show up everywhere like that, especially in the terminal.

Ok, good to me. To me that looked properly, but just as i only know it like everything beeing left-aligned. This is why i ask you - I just don't have any glue on this. ;)
-> I'll remove it 👍

[akamfoad]

Ok, good to me. To me that looked properly, but just as i only know it like everything beeing left-aligned. This is why i ask you - I just don't have any glue on this. ;)

Yeah, that is okay.

Please notify me anytime you need reviewing things like that, I loved the app and I'm happy to keep it great.