RTL support about scoold HOT 23 CLOSED

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.

from scoold.

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).

from scoold.

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?

from scoold.

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 RTL language you will see that the UI kinda gets mirrored.

Cordially.

from scoold.

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.

from scoold.

I will test this revision and let you know.

from scoold.

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.

from scoold.

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

from scoold.

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

from scoold.

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

from scoold.

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

from scoold.

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.

from scoold.

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 ?

from scoold.

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).

from scoold.

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.

from scoold.

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

from scoold.

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.

from scoold.

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.

from scoold.

still the same issue, did you test it yourself ?

from scoold.

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

from scoold.

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.

from scoold.

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

from scoold.

@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.

from scoold.