When creating eLearning content in Right-to-Left (RTL) languages like Arabic, many course admins using Articulate Rise 360 encounter formatting challenges. Unfortunately, Rise 360 does not natively support RTL text, which can lead to misaligned content, disrupted layouts, and a less engaging learning experience for Arabic-speaking learners.
In this blog post, I’ll guide you through a simple and effective method to fix RTL issues in Rise 360 courses, allowing your content to look polished and professional.
Why Do RTL Issues Occur in Rise 360?
Rise 360 is primarily designed for Left-to-Right (LTR) languages, such as English. When you switch to RTL languages, text alignment, bullet points, and overall content flow can become disorganized. Without a proper fix, your learners might struggle with readability and comprehension.
The Solution: Implementing an RTL Fix
To resolve these issues, you can modify the exported SCORM package of your Rise 360 course. By adding a few lines of code and a custom CSS file, you can effectively switch the course layout to RTL. Here’s how to do it:
Steps to Apply the RTL Fix
1. Unzip the SCORM Package: Export your Rise 360 course as a SCORM package and unzip it using your preferred tool.
2. Edit the HTML File: Open the scormcontent/index.html file in a text editor such as Notepad or Notepad++. The screenshot below shows the location of the code snippets.
a. Set the Page Direction to RTL: Replace line 2 with the following code:
<html lang="ar" dir="rtl" class="">b. Add jQuery for RTL Fixing: Insert the following script inside the <head> section, before the <meta> tags:
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script>c. Include the RTL JavaScript Code: Add this code right below the jQuery script:
<script type="text/javascript"> var arabicFix = function() { $('p,h1,h2,h3,h4,h5,li,ol,ul,strong,a,span,.brand--ui,.lesson-header__top-wrap,.page-header-container,.overview-sidebar__title,.fr-view') .attr('dir','rtl') .attr('align','right'); $('blocks-tabs__container').children() .attr('dir','rtl') .attr('align','right'); $('.block-flashcards-slider__progress-text') .attr('dir','ltr') .attr('align','center'); } setInterval(arabicFix, 500); </script>d. Link the Custom CSS File: Add the following line to link the fix.css file:
<link type="text/css" rel="stylesheet" href="lib/fix.css">Make sure this line is the last in the CSS links list to avoid conflicts.
3. Add the fix.css File: Download the fix.css file and place it in the scormcontent/lib/ directory. This CSS file addresses common RTL styling issues and can be customized further if needed.
4. Repackage and Upload: Once all edits are complete, zip the SCORM package again and upload it back to your LMS.
Conclusion
By following these steps, you can seamlessly adapt your Rise 360 courses to support RTL languages, ensuring that Arabic-speaking learners enjoy a smooth and accessible learning experience. If you have any questions or need further assistance, feel free to Contact Me. I’m here to help!
Useful Resources
Rise 360 Community Guide: RTL Language Support
How to Format Your Rise 360 Course for Arabic