RTL support

[JalalSordo]

Hello,

Happy new year,

Does Scoold support rtl languages like Arabic ? If No, please elaborate a little bit on what I should focus on in terms of components that needed to be altered to implement the rtl support.

Cordially.

[albogdano]

Hi @JalalSordo! Thanks for the suggestion, I'll try to add rtl support this week. I've translated the whole language file to Arabic with Google translate just for testing and I'll have to add some custom CSS rules. It's not hard, just takes a lot of time.

[JalalSordo]

I did some effort here sa9si.ma Only one issue is with simplemde compatibility with rtl.

although this one (https://github.com/Houfeng/mditor) works amazingly with rtl but when I submit new/editited Answer I get a strange response from the server (TEXT instead of HTML).

[albogdano]

Ok I'll have a look at your site. Did you create a new lang_ar.properties file for Arabic? I saw that you've translated 97% of it https://sa9si.herokuapp.com/translate/ar

The language file I created is here: https://github.com/Erudika/scoold/blob/master/src/main/resources/lang_ar.properties

I'm not familiar with RTL websites - is the logo supposed to be in the top right of the page? In other words, do you prefer a mirrored CSS style or just RTL for the questions and answers elements?

[JalalSordo]

Ok I'll have a look at your site. Did you create a new lang_ar.properties file for Arabic? I saw that you've translated 97% of it https://sa9si.herokuapp.com/translate/ar

I didn't use the translation front end to do it, I translated the lang_en.properties to Arabic myself and created a new file lang_ar.properties instead , because I faced a few bugs while doing the Arabic translation from Scoold's front end.

The language file I created is here: https://github.com/Erudika/scoold/blob/master/src/main/resources/lang_ar.properties

I can update this file myself if you are willing to approve the commit.

I'm not familiar with RTL websites - is the logo supposed to be in the top right of the page? In other words, do you prefer a mirrored CSS style or just RTL for the questions and answers elements?

Truth is Yes, Arabic sites need to be completely RTL, you can try this by going to facebook for example and switch to an RTLlanguage you will see that the UI kinda gets mirrored.

Cordially.

[albogdano]

I've just committed the initial support for RTL in Scoold. It would be great if you could modify lang_ar.properties and create a pull request, or just send me the whole file so I can replace the one I translated through Google.

[JalalSordo]

I will test this revision and let you know.

[JalalSordo]

After the initial exploratory tests, I observed that the posts editor is rtl but there is editing text issues in the editor(simplemde) , when I use the right left arrows to navigate between the letters and select text and back space its somehow reverted.

[albogdano]

Hm, I wonder if there is a CSS solution to this or does it have to be implemented by simpleMDE itself?

[JalalSordo]

This editor is great, test it and let me know : https://github.com/Houfeng/mditor

[albogdano]

It seems the same to me. I don't see how Mditor supports RTL. Is there an option to enable it?

[JalalSordo]

add dir="rtl" to the parent html tag of the text area in scoold front end.

[albogdano]

dir=rtl is automatically added when you switch to Arabic. I've tried to enable this in CodeMirror yesterday but for some reason I couldn't make SimpleMDE behave like the demo here.

[JalalSordo]

I made it work, but when I sumbit the post the response is fuzzy html with no imgaes, it's like it has been filtred somehow, do you have any idea ?

[albogdano]

Can you send me the exact markdown that you tested this with? Also what do you think about codemirror.options.rtlMoveVisually = false? Do you prefer left/right arrows to be inverted also?

EDIT: I also made it work by cloning SimpleMDE and building it with the latest CodeMirror. I didn't realize that it needs text in Arabic in order to work (I only tried latin text yesterday).

[JalalSordo]

codemirror.options.rtlMoveVisually = false? Do you prefer left/right arrows to be inverted also? yes they have to be inverted in order to navigate properly.

[albogdano]

OK, I have pushed these changes to https://live.scoold.com so you can test them. Tell me what you think.

[JalalSordo]

Same issue with the navigation between letters using the left and right keyboard arrows, they are inverted. You can grab Arabic text from google translate and test it yourself.

[albogdano]

Did you refresh the page with Shift-F5 (full refresh). It contains a new simpleMDE script. Also if you look at https://live.scoold.com/scripts/scoold.js you'll see there's:

if (RTL_ENABLED) {
    mde.codemirror.options.direction = "rtl";
    mde.codemirror.options.rtlMoveVisually = false;
}

You said you wanted rtlMoveVisually = false so that when you press left arrow < the cursor goes right.

[JalalSordo]

still the same issue, did you test it yourself ?

[JalalSordo]

You said you wanted rtlMoveVisually = false so that when you press left arrow < the cursor goes right. the opposite.

[albogdano]

Ok, so rtlMoveVisually = true, it's the default - left moves left, right moves right. I did test it but I don't know what is the correct behavior.

[albogdano]

Keep in mind that scoold.js is probably cached in your browser and you might not see any changes but now it's rtlMoveVisually = true. The cache expires:Tue, 09 Jan 2018 00:45:52 GMT

[albogdano]

@JalalSordo If you're done translating Scoold into Arabic, could you please share your Arabic language file so I can add it as an official translation? I've added a table in the README.md to track all translations.