Automatic Line Breaks for Text in 2.7

[Andrew Murdza]

I know that automatic line breaks are not available in 3.2 so I temporarily moved my website from 3.2 to 2.7 until automatic line breaks get updated to Mathjax 3. Automatic line breaks are a must-have for me because I want my website to work on both computers and phones which have very different screen sizes.

However, I have an issue with the line breaks. The line breaks don't seem to work on things like this:

$\text{The formula used to calculate the dependent variable using the value of the input variable}$. This is an issue for me because I have math tips that have long sentences inside of the tip that appears (this issue is not related to mathtips though, line breaks work in mathtips for stuff like x+x+... and they don't work for \text{} even when not in mathtips).

$\text{The formula}\ \text{used to calculate the dependent variable using the value of the input variable}$ doesn't work but

$\text{The formula}\, \text{used to calculate the dependent variable using the value of the input variable}$ does but only breaks between "fomula" and "used". The automatic line breaks work by doing

$\text{The}\,\, \text{formula}\,\,\text{used}\,\,\text{to}\,\,\text{calculate}\,\,\text{the}\,\, \text{variable}\,\,\text{using}\,\,\text{the}\,\,\text{value}\,\,\text{of}\,\,\text{the}\,\,\text{input}\,\,\text{variable}$

The method works but takes a very long time to type and the code is hard to read due to taking up more space. Is there to make the line break at spaces between words inside of text in Mathjax 2.7? If not that's ok I will write Java code that converts strings like "\text{The formula used to calculate the dependent variable using the value of the input variable}" into strings like "\text{The}\,\,\text{formula}\,\,\text{used}\,\,\text{to}\,\,\text{calculate}\,\,\text{the}\,\,\text{variable}\,\,\text{using}\,\,\text{the}\,\,\text{value}\,\,\text{of}\,\,\text{the}\,\,\text{input}\,\,\text{variable}".

Also, some of the CSS and configuration broke when downgrading to 2.7.

The below, code, which I used to make bolder plus, minus, and equal signs doesn't work because MacroMap doesn't exist in Mathjax 2.7 but I ok without this while I wait for automatic line breaking to come to Mathjax 3

const { MacroMap } = MathJax._.input.tex.SymbolMap;

            const { Configuration } = MathJax._.input.tex.Configuration;

            const BaseMethods = MathJax._.input.tex.base.BaseMethods.default;

            new MacroMap('bold-chars', {

                '=': ['Macro', String.raw`\mathrel{\vcenter{\rlap{\Rule{2ex}{3px}{0px}}\raise9px{\Rule{2ex}{3px}{0px}}}}`],

                '-': ['Macro', String.raw`\mathrel{\vcenter{\Rule{20px}{2px}{0px}}}`],

                '+': ['Macro', String.raw`\mathrel{\vcenter{\rlap{\kern7px\Rule{2px}{9px}{7px}}\Rule{16px}{2px}{0px}}}`]

            }, BaseMethods);

            Configuration.create('bold-chars', { handler: { character: ['bold-chars'] } });

More importantly, the CSS code used to change the position of the tooltips doesn't work either. I have hired someone to fix the CSS code (which apparently has to be done by editing one of the Mathjax .js files since the mathtip positioning in 2.7 is set there and .css cannot override .js. I thought it could be done with https://docs.mathjax.org/en/v2.3-latest/CSS-styles.html#css-style-objects and 

#MathJax_Tooltip but the person I hired said you use that to change the color but not the positioning) but if it's not possible then I might have to choose between automatic line breaking and tooltip positioning.

mjx-maction>mjx-tool>mjx-tip {

    box-shadow: none;

    border: none;

    padding: 0;

    display: flex;

    align-items: center;

  }

 

  mjx-maction>mjx-tool>mjx-tip>* {

    border: 4px solid #555;

    padding: 15px 15px 15px 15px;

    border-radius: 18px;

    background-color: beige;

    /* color: white; */

  }

 

 

  mjx-maction.tip-top>mjx-tool {

    bottom: auto ! important;

    right: auto ! important;

    left: 50%;

    top: calc(-100% - 9px);

    height: auto;

    z-index: 1;

  }

 

  mjx-maction.tip-top>mjx-tool>mjx-tip {

    flex-direction: column;

    width: 0;

  }

 

  mjx-maction.tip-top>mjx-tool>mjx-tip::after {

    content: "";

    position: absolute;

    top: 100%;

    border-width: 9px 4px 0 4px;

    border-style: solid;

    border-color: #555 transparent transparent transparent;

  }

 

  mjx-maction.tip-bot>mjx-tool {

    /* bottom: auto; */

    right: auto ! important;

    left: 50%;

    top: calc(100% + 10px) ! important;

    height: auto;

    z-index: 1;

  }

 

  mjx-maction.tip-bot>mjx-tool>mjx-tip {

    flex-direction: column;

    width: 0;

  }

 

  mjx-maction.tip-bot>mjx-tool>mjx-tip::after {

    content: "";

    position: absolute;

    bottom: 100%;

    border-width: 9px 4px 0 4px;

    transform: rotate(180deg);

    border-style: solid;

    border-color: #555 transparent transparent transparent;

  }

 

  mjx-maction.tip-right>mjx-tool {

    bottom: auto ! important;

    left: calc(100% + 7px) ! important;

    top: 50%;

    width: auto;

    height: auto;

    z-index: 1;

  }

 

  mjx-maction.tip-right>mjx-tool>mjx-tip {

    flex-direction: row;

    height: 0;

    width: 1200px;

  }

 

  mjx-maction.tip-right>mjx-tool::after {

    content: "";

    position: absolute;

    left: -9px;

    top: -4px;

    border-width: 4px 9px 4px 0;

    border-style: solid;

    border-color: transparent #555 transparent transparent;

  }

 

  mjx-maction.tip-left>mjx-tool {

    bottom: auto ! important;

    right: calc(100% + 15px) ! important;

    top: 50%;

    width: auto;

    height: auto;

    z-index: 1;

  }

 

  mjx-maction.tip-left>mjx-tool>mjx-tip {

    flex-direction: row;

    height: 0;

  }

 

  mjx-maction.tip-left>mjx-tool::after {

    content: "";

    position: absolute;

    right: -9px;

    top: -4px;

    border-width: 4px 9px 4px 0;

    border-style: solid;

    border-color: transparent #555 transparent transparent;

    transform: rotate(180deg);

  }

 

  mjx-maction.tip-left>mjx-tool {

    bottom: auto ! important;

    right: auto ! important;

    left: calc(0% - 45px);

    top: calc(50% - 13px);

    width: auto;

    height: auto;

    z-index: 1;

  }

 

  mjx-maction.tip-left>mjx-tool::after {

    content: "";

    position: absolute;

    right: -9px;

    top: 8px;

    border-width: 4px 9px 4px 0px;

    transform: rotate(180deg);

    border-style: solid;

    border-color: transparent #555 transparent transparent;

  }

As a last note, I really appreciate you replying to all my messages and fixing my Mathjax problems for free.

[David Farmer]

Why did you want line breaks instead of a horizontal scroll that lets the
reader see the equation in the way it was intended to appear?

In the specific case of

"used to calculate the dependent variable using the value of the input variable"

it may be better to have that outside of math mode. But you
did not include a link to your content, so I can't tell if that is
a reasonable comment in your particular application.

> --
> You received this message because you are subscribed to the Google Groups "MathJax Users" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to
> mathjax-user...@googlegroups.com.
> To view this discussion on the web visit
> https://groups.google.com/d/msgid/mathjax-users/e749023c-4148-46ad-81a2-04565765c2bbn%40googlegroups.com.
>
>

[Davide Cervone]

The line-breaking algorithm in v2.7 does not break \text{}, as you have found out.  The next release of MathJax will include linebreaking, and does break text blocks (in some circumstances).  There will also be macros for creating fixed-size boxes that break the containing text at the given width, and so on.  We are hoping to have a beta release at the end of the month.

Version 3 and version 2 work very differently internally (v3 is a complete rewrite from the ground up), and so v3 configurations don't work with v2, and vice versa.  You can use

<script type="text/x-mathjax-config">

  MathJax.Hub.Config({

    TeX: {Augment: {

      Definitions: {

        special: {

          '=': 'BoldOp',

          '-': 'BoldOp',

          '+': 'BoldOp'

        },

      },

      Parse: {prototype: {

        _BoldOps: {

          '=': String.raw`\mathrel{\vcenter{\rlap{\Rule{2ex}{3px}{0px}}\raise9px{\Rule{2ex}{3px}{0px}}}}`,

          '-': String.raw`\mathrel{\vcenter{\Rule{20px}{2px}{0px}}}`,

          '+': String.raw`\mathrel{\vcenter{\rlap{\kern7px\Rule{2px}{9px}{7px}}\Rule{16px}{2px}{0px}}}`

        },

        BoldOp: function (c) {

          this.string = this._BoldOps[c] + this.string.slice(this.i);

          this.i = 0;

        }

      }}

    }}

  });

</script>

somewhere BEFORE the script that loads MathJax.js itself to get the bold operators that you had before.

As for the CSS for tooltips, it is probably possible to work something out for that, but it took me a while to do that for v3, and I'm not planning to do it again for v2.7, especially with linebreaking being available in the next release.  

Davide

[Davide Cervone]

David:

Just FYI, the next release of MathJax will support the MathML overflow attribute values of "linebreak", "scroll", "scale", and "truncate", so it will be possible to use scrolling automatically for wide equations, or use linebreaking if you wish. The page author can set the default, but it also will be controllable by a menu setting, so the user can select which they want.

Davide

> To view this discussion on the web visit https://groups.google.com/d/msgid/mathjax-users/alpine.LRH.2.21.2208210656320.3975%40li375-150.members.linode.com.

[Andrew Murdza]

Dear Davide,

That is awesome news that the line-breaking beta will be released in the next month! And even better than that it might support line breaking for text blocks!

To view this discussion on the web visit https://groups.google.com/d/msgid/mathjax-users/D450A84F-0BCF-4628-B1B4-C7951B7B0A80%40gmail.com.

[Andrew Murdza]

Dear Davide,

Is it possible for you can send a message when the beta is out and in the message include where I can find the beta? It would be great to know when I can do the line breaking.

[Davide Cervone]

Yes, I will post on the users list and the dev list.  We have been dealing with a few small issues that are nearly finished.  That and my starting back to teaching this fall has delayed the release, but it should be soon.

Davide

To view this discussion on the web visit https://groups.google.com/d/msgid/mathjax-users/CAN3JszxcXSsPfNhVaMaSTAacF3p8HXwjh2tmWtxJYxtg%2BXy%2B7w%40mail.gmail.com.

[Jeff Witt]

Hi Davide,

Just checking: is this paused or deferred for v2.x?  Or is it to be in v4 only?  Is it implemented there already?

Thanks,

Jeff Witt

Accessibility Specialist for edX

[Davide Cervone]

Jeff:

Line breaking and the other overflow attributes are in the v4.0.0-alpha release that we made last year.  We are currently working on the formal v4.0 release, fixing some bugs that the alpha release produced, and cleaning up some other issues.

Version 2 already has automatic line breaking, but does not have support for the other overflow values.  Version 2 is not being enhanced further, and is only getting maintenance releases, so this feature will not be back ported to v2.

Davide

To view this discussion on the web visit https://groups.google.com/d/msgid/mathjax-users/7bddcdbf-a150-4d8b-8471-118d4dd5782cn%40googlegroups.com.