the text is flipped (ltr) when I use \ar #22

osman-mohamad · 2019-10-23T07:45:20Z

I have a problem with the extension . it is flipping the text from left to right.

like in the photo

how to fix it ?

thank you very much

shadinaif · 2019-10-23T09:11:45Z

Hi @osman-mohamad , it is very hard to guess the reason like this. Can you please give more details and code, or create a codepen to show the issue

Please check the following codepen which is showing your equation rendered correctly
https://codepen.io/shadinaif/pen/NWWpvwZ

osman-mohamad · 2019-10-24T15:57:05Z

@shadinaif . I will post codepen soon contains my code.

thank you

osman-mohamad · 2019-10-25T19:34:23Z

first I use rtl page .

like

<html dir="rtl" lang="ar">

.....
</html>

second I use vuejs to wait for user input and re-render the equation after each key down event.

https://codepen.io/osman-mohamad/pen/RwwVaGv?editors=1010

this is my example and it is working fine (because the direction is ltr in the codepen)

third if this codepen will not present my problem . I will post github repository to preview it to you.

and I want to host my own version of the lib (not to use cdn)

@shadinaif

thank you in advance

osman-mohamad · 2019-10-26T10:16:59Z

I found the bug . it seams it is only work with the unpacked version of mathjax 2.6.1 .

when it is used with 2.7.6 (latest 2.* version) unpacked version from npm . it is not working.

shadinaif · 2019-10-26T15:14:50Z

Thank you @osman-mohamad for your feedback, I tried my best to reproduce but I had no luck!

This is a very simple and single HTML file that uses dir="rtl" lang="ar" but still showing correct render. Can you please amend this code to reproduce your issue?

<!DOCTYPE html>
<html dir="rtl" lang="ar">
<head>
  <title>MathJax TeX Test Page</title>

  <script type="text/javascript" id="MathJax-script" async
    src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.6/MathJax.js?config=TeX-AMS_CHTML-full&amp;delayStartupUntil=configured">
  </script>

  <link href="https://cdn.jsdelivr.net/gh/OmarIthawi/amiri@master/webfonts/Amiri.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/gh/OmarIthawi/arabic-mathjax@master/dist/arabic.css" rel="stylesheet">

  <script>
    function initMathjax() {
      var MathJax = window.MathJax;
      MathJax.Ajax.config.path["arabic"] = "https://cdn.jsdelivr.net/gh/OmarIthawi/arabic-mathjax@master/dist";

      MathJax.Hub.Config({
        skipStartupTypeset: true,
        jax: ['output/CommonHTML'],
        tex2jax: {
          inlineMath: ["$$","$$"]
        },
        TeX: {
          extensions: ["[arabic]/arabic.js"]
        },
        CommonHTML: {
          minScaleAdjust: 121,
          scale: 121,
          undefinedFamily: 'AmiriWeb'
        },
      });

      MathJax.Hub.setRenderer('CommonHTML');
      MathJax.Hub.Configured();
      let el = document.getElementById('math-output');
      MathJax.Hub.Queue(["Typeset",MathJax.Hub, el]);
    }

    window.onload = function() {
        initMathjax();
    }
  </script>

</head>

<body>
    $$ \alwaysar{x = {-b \pm \sqrt{b^2-4ac} \over 2a}.} $$
</body>

</html>

osman-mohamad · 2019-11-04T06:27:05Z

I used local resources :

downloaded mathjax 2.7.6 from github
downloaded arabic-mathjax master from github
downloaded amiri-font master from github

extract them and used this code (your example but from local libs)

<!DOCTYPE html>
<html dir="rtl" lang="ar">
<head>
  <title>MathJax TeX Test Page</title>

  <script type="text/javascript" id="MathJax-script" async
    src="/mathjax/MathJax.js?config=TeX-AMS_CHTML-full&delayStartupUntil=configured">
  </script>

  <link href="/amiri/webfonts/Amiri.css" rel="stylesheet">
  <link href="/arabic-mathjax/dist/arabic.css" rel="stylesheet">

  <script>
    function initMathjax() {
      var MathJax = window.MathJax;
      MathJax.Ajax.config.path["arabic"] = "/arabic-mathjax/dist";

      MathJax.Hub.Config({
        skipStartupTypeset: true,
        jax: ['output/CommonHTML'],
        tex2jax: {
          inlineMath: ["$$","$$"]
        },
        TeX: {
          extensions: ["[arabic]/arabic.js"]
        },
        CommonHTML: {
          minScaleAdjust: 121,
          scale: 121,
          undefinedFamily: 'AmiriWeb'
        },
      });

      MathJax.Hub.setRenderer('CommonHTML');
      MathJax.Hub.Configured();
      let el = document.getElementById('math-output');
      MathJax.Hub.Queue(["Typeset",MathJax.Hub, el]);
    }

    window.onload = function() {
        initMathjax();
    }
  </script>

</head>

<body>
    $$ \alwaysar{x = {-b \pm \sqrt{b^2-4ac} \over 2a}} $$
</body>

</html>

the output in:

firefox 70.0.1 ubuntu 18.04
google-chrome 78.0.3904.87 ubuntu 18.04

I was always using chrome in my past tests . some times it worked good . some times not at all . some times show flipped equations like in this image.

and I think the processing of the equation is slow in chrome than in firefox. maybe the slow rendering it is related to mathjax more than it is related to this plugin.

osman-mohamad · 2019-11-05T05:09:42Z

NOTE

I tested the example in chrome incognito mode . and it is work fine . I disabled all the extensions (in normal window) . but it is the same (not working).

shadinaif · 2019-11-05T17:13:22Z

@osman-mohamad looks like CSS cache. Without incognito mode; please try Ctrl+F5 to refresh page with (enforce assets reload)

osman-mohamad · 2019-11-09T18:27:36Z

@shadinaif it does not work

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

the text is flipped (ltr) when I use \ar #22

the text is flipped (ltr) when I use \ar #22

osman-mohamad commented Oct 23, 2019

shadinaif commented Oct 23, 2019

osman-mohamad commented Oct 24, 2019

osman-mohamad commented Oct 25, 2019 •

edited

Loading

osman-mohamad commented Oct 26, 2019

shadinaif commented Oct 26, 2019

osman-mohamad commented Nov 4, 2019 •

edited

Loading

osman-mohamad commented Nov 5, 2019 •

edited

Loading

shadinaif commented Nov 5, 2019

osman-mohamad commented Nov 9, 2019

the text is flipped (ltr) when I use \ar #22

the text is flipped (ltr) when I use \ar #22

Comments

osman-mohamad commented Oct 23, 2019

shadinaif commented Oct 23, 2019

osman-mohamad commented Oct 24, 2019

osman-mohamad commented Oct 25, 2019 • edited Loading

first I use rtl page .

second I use vuejs to wait for user input and re-render the equation after each key down event.

this is my example and it is working fine (because the direction is ltr in the codepen)

third if this codepen will not present my problem . I will post github repository to preview it to you.

and I want to host my own version of the lib (not to use cdn)

osman-mohamad commented Oct 26, 2019

shadinaif commented Oct 26, 2019

osman-mohamad commented Nov 4, 2019 • edited Loading

osman-mohamad commented Nov 5, 2019 • edited Loading

NOTE

shadinaif commented Nov 5, 2019

osman-mohamad commented Nov 9, 2019

osman-mohamad commented Oct 25, 2019 •

edited

Loading

osman-mohamad commented Nov 4, 2019 •

edited

Loading

osman-mohamad commented Nov 5, 2019 •

edited

Loading