Forum Discussion
Right to left language In Rise
Hi
I am developing courses in Arabic Language. I just started using Articulate 360. I tried to add content using Rise. I could add Arabic text, but I faced many issues.
- Numbering and bullet list come left the text. As Arabic is a right-to-left language, it should be right.
- Text alignment also is left to right
- Navigation Bar is left
- No Arabic fonts available, I could only use the default one.
Could anyone help me solve the problem?
Regards
Sheikh Maawiya
145 Replies
Thanks for checking in, Muge. We don't have an ETA nailed down just yet, but rest assured it's coming! You can keep up with everything we release in Rise right here.
Hello, do you have any updates on this feature?
Thanks Danit for reposting!
Oops! 😱 I've accidently deleted my post on how to make right to left content work with Rise,
so here it is again:Export and download your Rise project.
In the "index.html" file, change the <HTML> tag from this:
<html lang="en" class="">
To this:
<html lang="he" class="" dir="rtl">
"he" sets the language to Hebrew, and "rtl" sets the direction right to left
If you're using a language that's not supported by the default font used by Rise, you must add the font file to the directory: lib\fonts,
and changed the font in the "index.html" file, using the <STYLE> tagWrite your font instead of the bolded ones below:
.brand--head, .brand--head * { font-family: Open Sans !important; }
.brand--body, .brand--body * { font-family: Open Sans !important; }
.brand--lhead, .brand--lhead * { font-family: Open Sans !important; }
.brand--lbody, .brand--lbody * { font-family: Open Sans !important; }
.brand--ui, .brand--ui * { font-family: Lato !important; }
.brand--beforeHead:before { font-family: Open Sans !important; }
.brand--afterHead:after { font-family: Open Sans !important; }
Save the "index.html" file, and you're done!
Hello Amr - I do not have an estimated time frame to share with you at this time, but it is on the radar.
Hello, I was just wondering if you have any RTL updates? An approximate time frame will be really helpfull.
Thanks for sharing the steps Danit! I had another team member who was looking to share this as an example and it's really well done!
Thank you
Hi guys,
I'd like to give credit to my friend and co-worker Lior – he's the one who actually did what I've bragged about before – making rise work RTL, and he's been so kind and shared how he did it:In the index.html file, he changed the <HTML> tag from this:
<html lang="en" class="">
to this:
<html lang="he" class="" dir="RTL">
("he" sets the language to Hebrew, and "rtl" sets the direction right to left)
That took care of the direction of the text.Next he changed the font to one that looks better with Hebrew text, using the <STYLE> tag that appears further on in the file.
This is what the original looks like:
.brand--head, .brand--head * { font-family: Open Sans !important; }
.brand--body, .brand--body * { font-family: Open Sans !important; }
.brand--lhead, .brand--lhead * { font-family: Open Sans !important; }
.brand--lbody, .brand--lbody * { font-family: Open Sans !important; }
.brand--ui, .brand--ui * { font-family: Lato !important; }
.brand--beforeHead:before { font-family: Open Sans !important; }
.brand--afterHead:after { font-family: Open Sans !important; }
And this is Lior's version:
.brand--head, .brand--head * { font-family: Arial, Helvetica, sans-serif !important; }
.brand--body, .brand--body * { font-family: Arial, Helvetica, sans-serif !important; }
.brand--lhead, .brand--lhead * { font-family: Arial, Helvetica, sans-serif !important; }
.brand--lbody, .brand--lbody * { font-family: Arial, Helvetica, sans-serif !important; }
.brand--ui, .brand--ui * { font-family: Arial, Helvetica, sans-serif !important; }
.brand--beforeHead:before { font-family: Arial, Helvetica, sans-serif !important; }
.brand--afterHead:after { font-family: Arial, Helvetica, sans-serif !important; }
I'm attaching these instructions in color (it's more clear)
Hope you find this helpful
And thank you Lior!
Hi guys,
Something important I've left out it the post above - if you're using a language that's not supported by the default font used by Rise,
you must add the font file to the directory: lib\fonts
and of course, you must change the index.html file accordingly...
Interesting method Danit - thank you for sharing that here! We'll keep you posted about any changes in the Rise RTL support and timeline as well!
Thanks! I'd appreciate that! 🙏
I'm also eagerly waiting for Rise to support RTL
Meanwhile I've exported the files of the course I've created, and made off line changes to the CSS file so the text direction will be from right to left.
This took care of most the text but of course graphic elements stayed aligned to the left…I think that as a temporary workaround it's not too bad…
