Right to left language In Rise

Nov 17, 2016

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.

  1. Numbering and bullet list come left the text. As Arabic is a right-to-left language, it should be right.
  2. Text alignment also is left to right
  3. Navigation Bar is left
  4. No Arabic fonts available, I could only use the default one.

Could anyone help me solve the problem?

 

Regards

Sheikh Maawiya

138 Replies
Crystal Horn

Hey there.  Thanks for asking.  I checked with our team, and it looks like that function is still in development.  I can understand your need, however.  When we get further information to share, we'll be sure to update this discussion!  You can stay tuned with our What's New page for all the features that are added throughout Articulate 360.

Leslie McKerchie

Sorry for any confusion, but I wanted to come back to share a bit more information. You’ll see in the older discussion it was a feature we were targeting for Quarter 1, and that timing has been shuffled recently based on some changes to our product roadmap and other issues that surfaced. We’re still committed to getting RTL support in Rise, and we’ll keep you posted once the ETA is firmer. Thanks for your patience

Danit Isaacs

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…

Danit Isaacs

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!

Danit Isaacs

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

Danit Isaacs

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> tag

Write 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!

Dominik Ginthier

Hi Leslie,

Thank you for the update.

Storyline is unfortunately not the right tool this time. The training modules I am currently working on are mainly used on mobile devices (Smartphones and Tablets). So we need something responsive and Rise is the perfect tool.

Can you at least confirm that this feature will be released in 2018? That would help a bit with our planning.