RTL: use backslash to write fractions (grades)

[ARMBouhali]

TL;DR - This commit replaces the slash / for RTL languages with a backslash \ when it is used to write fractions for such as 2/5 (grades)

Background

• In fractions, the direction of the slash determines which number comes on top (numerator) and which is on the bottom (denominator). For example: 3 / 2 means "2 over 3, "2 divided by 3" or "2 out of 3"
• In RTL text, some characters are mirrored to match the writing direction, such as parentheses ( ) and comparison signs < >
• However, / is not mirrored in RTL, which introduces visual confusion when used to write fractions. For Example, 2 / 3 in English still shows as 2 / 3 in Arabic, while it should look 3 \ 2

What changed?

• We use 2 frontend-platform functions isRtl and getLocale to apply the fix only if the current user language is right-to-left.
• we replace / with \ for RTL languages in places where absolute grades are shown.
• The change is applied to each grade displayed in the progress tab's detailed grade table.

Screenshots (look at the grades)
The screenshots show the detailed grades table in the Arabic language for the DemoX course.

Before	After

[openedx-webhooks]

Thanks for the pull request, @ARMBouhali! Please note that it may take us up to several weeks or months to complete a review and merge your PR.

Feel free to add as much of the following information to the ticket as you can:

• supporting documentation
• Open edX discussion forum threads
• timeline information ("this must be merged by XX date", and why that is)
• partner information ("this is a course on edx.org")
• any other information that can help Product understand the context for the PR

All technical communication about the code itself will be done via the GitHub pull request interface. As a reminder, our process documentation is here.

Please let us know once your PR is ready for our review and all tests are green.

[natabene]

@ARMBouhali Thank you, we will review once the agreement is sorted out.

[natabene]

@ARMBouhali Great, your CLA check is green, our team can review now.

[ARMBouhali]

I updated the commit message to comply with commitlint rules

[codecov]

Codecov Report

Base: 84.13% // Head: 84.18% // Increases project coverage by +0.05% 🎉

Coverage data is based on head (d0cb0c6) compared to base (759d154).
Patch coverage: 100.00% of modified lines in pull request are covered.

Additional details and impacted files

@@            Coverage Diff             @@
##           master     #979      +/-   ##
==========================================
+ Coverage   84.13%   84.18%   +0.05%     
==========================================
  Files         264      264              
  Lines        4519     4521       +2     
  Branches     1158     1159       +1     
==========================================
+ Hits         3802     3806       +4     
+ Misses        697      695       -2     
  Partials       20       20              

Impacted Files	Coverage Δ
...tab/grades/detailed-grades/DetailedGradesTable.jsx	100.00% <100.00%> (ø)
...-tab/grades/detailed-grades/ProblemScoreDrawer.jsx	100.00% <100.00%> (ø)
...urseware/course/sidebar/SidebarContextProvider.jsx	100.00% <0.00%> (+9.09%)	⬆️

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report at Codecov.
📢 Do you have feedback about the report comment? Let us know in this issue.

[brian-smith-tcril]

part of me wishes we had a localizedSlash or something to use instead of needing to copy/paste {isLocaleRtl ? '\\' : '/'} into multiple places, but that feels like premature optimization.

LGTM!

[mphilbrick211]

@mattcarter - Hi Mat! Could you please allow actions / tests to run on this item?

[ARMBouhali]

I've rebased the branch for Codecov test to pass.

part of me wishes we had a localizedSlash or something to use instead of needing to copy/paste {isLocaleRtl ? '\\' : '/'} into multiple places, but that feels like premature optimization.

Concise ways to deal with this:

• Add RTL function(s) to frontend-platform/i18n to do RTL operations. e.g i18n.adjust('/')
• Render a translated percentage expression using intl.formatMessage or <FormattedMessage /> and let translators deal with each instance of / in every language.

[itsjeyd]

@ARMBouhali

I've rebased the branch for Codecov test to pass.

Thanks! Looks like this should be ready for merge, then :)

@brian-smith-tcril Since you had already reviewed and okayed these changes a couple weeks ago, would you mind re-approving them?

It looks like that's the only thing left to do before this PR can be merged.

CC @mphilbrick211 @mattcarter

[brian-smith-tcril]

still looking good!

[arbrandes]

+1

[openedx-webhooks]

@ARMBouhali 🎉 Your pull request was merged! Please take a moment to answer a two question survey so we can improve your experience in the future.