IDEMSInternational / open-app-builder

PLH App Frontend
GNU General Public License v3.0
5 stars 24 forks source link

[BUG] Curly quotes in Arabic #2397

Open esmeetewinkel opened 1 week ago

esmeetewinkel commented 1 week ago

Describe the bug It seems that the curly quotes displayed in the app (added by PR https://github.com/IDEMSInternational/open-app-builder/pull/2357) in Arabic are swapped.

Expected behaviour (found here) image

The internet seems to agree that smartypants is not very smart when it comes to quotation marks in RTL languages...

App version on master after v0.16.33

To Reproduce Navigate to https://early-family-math.web.app and change the _app_language field to kw_ar.

Example: Arabic string with straight quotes deployment: early_family_math template: efm_sb_Fathers_Advice image

imageimage

chrismclarke commented 1 week ago

Thanks for sharing @esmeetewinkel, really useful article link too.

I can see the package we use smarty-pants-lite actually is incredibly minimal, basically just 10 lines of find-replace using various text regex lookup and unicode characters

        // em-dashes
          .replace(/---/g, '\u2014')
        // en-dashes
          .replace(/--/g, '\u2013')
        // opening singles
          .replace(/(^|[-\u2014/(\[{"\s])'/g, '$1\u2018')
        // closing singles & apostrophes
          .replace(/'/g, '\u2019')
        // opening doubles
          .replace(/(^|[-\u2014/(\[{\u2018\s])"/g, '$1\u201c')
        // closing doubles
          .replace(/"/g, '\u201d')
        // ellipses
          .replace(/\.{3}/g, '\u2026');

https://github.com/calculuschild/marked-smartypants-lite/blob/main/src/index.js

So I think might make sense to actually just copy the code and store in our own util function and drop the external package. From there we should be able to adapt to address cases in a similar way to the python package referenced. Speficially I would probably recommend:

  1. Refactor replace statements to loop over an initial key-value map of source text and replacement (for easier override).
  2. Add a default override when RTL languages used to swap the opening/closing quotation marks
  3. Expose configuration option for additional text replacements, which will merge with the existing list