Math cant be selected in any major browser even if rendered in HTML-CSS

[Yonderz]

I remember that I used to select texts from math formula rendered by Mathjax 2.75, but on my new website using mathjax 3.0 I can't do that any more using Firefox/Chrome/Safari on MacOS 10.15.1.

The website is rendered using tex-chtml.js and I can comfirm that in the context menu of mathjax the render mode is set to chtml.

The website in question:https://www.eurekz.com/post/steinitz-exchange-lemma/

[dpvc]

You are correct that MathJax output can't be copied directly from the page in version 3. Version 3 uses CSS with content properties in order to insert the characters into the page, and content text is not selectable in the page.

In general, copying MathJax output would only be reliable with the simplest of expressions (nothing involving super- or subscripts, fractions, roots, arrays, multi-character stretchy delimiters, accents, etc.), so this was never a supported feature for MathJax.

On the other hand, it would be possible for MathJax to insert the characters directly rather than use content CSS, and an extension to implement that would be possible. I'm marking this as a feature request for that reason.

[Lakedaemon]

I was hoping to select some math from a MathJax rendered expression and to map this selection back to the original (TeX or MathMl) expression. Is there a way to achieve that with MathJax

For example, given \int_1^{a+b}\cos(2\times t)d t
I would like to be able to select a+b with a mouse or to be able to select the whole integral, or just the cos(2\times t) part...

I can achieve that with javascript with normal text by adding lots of tags with ids and using mouseenter/mouseexit events.

For example, could we get a map between parts of an equation and bounding boxes coordinates.
That would make it possible.

[thisiscam]

@dpvc Would you like to share more details on your comment:

On the other hand, it would be possible for MathJax to insert the characters directly rather than use content CSS, and an extension to implement that would be possible. I'm marking this as a feature request for that reason.

?

If this is a simple fix, I can look into this and give a PR.

Letting MathJax formulas copyable is really desirable in a chat-like context.

[dpvc]

@thisiscam:

If this is a simple fix, I can look into this and give a PR.

It's not an easy fix, but I did make a post about it a couple years ago. It includes code for two different approaches (depending on whether you want to copy the original TeX code, or the characters in the typeset formula). The second approach may need some tweaking, as the functions that it modifies may have changed since then, but that is the right idea.

I'm planning to make such a change as part of the font update that we are planning for the end of the summer.

[thisiscam]

@dpvc Many thanks!
I adapted your post's first solution to SVG output and it appears to work.
Curiously though, the addCopyText function is called twice, therefore causing the un-rendered tex to be copied twice too.
I wasn't able to figure out why that is happening so I used this hack:

addCopyText(math, doc) {
        const adaptor = doc.adaptor;
        // For some reason, if we don't use this attribute hack the mjx-copytext
        // will be injected twice.
        // TODO: investigate why addCopyText is called twice.
        if(!adaptor.hasAttribute(math.typesetRoot, "injected_copyable_text")) {
            const text = adaptor.node('mjx-copytext', {'aria-hidden': true}, [
              adaptor.text(math.start.delim + math.math + math.end.delim)
            ]);
            adaptor.append(math.typesetRoot, text);
            adaptor.setAttribute(math.typesetRoot, "injected_copyable_text", "done");
        }
    },

Also, your second solution will only work for CHTML output am I right?

[dpvc]

Curiously though, the addCopyText function is called twice

If an extension needs to be loaded for some equation on the page, then the rendering is halted until the extension loads, and then the rendering is performed again. MathJax's internal render actions keep track of this and don't redo work that has already been done, but the simple example that I put together doesn't do that. You could make this more sophisticated by using the MathDocument processed bit-field to record when the text has been added, and the MathItem state variable to record which items have been processed.

your second solution will only work for CHTML output am I right?

Yes, that is CHTML only. The SVG output is not text based (it is path based) so there is no text to select. That would not be easy to change.

[thisiscam]

@dpvc Thanks! That is very helpful.

[dpvc]

Here is a version that implements the processed and state bits:

    MathJax = {
      options: {
        renderActions: {
          addCopyText: [156,
            (doc) => {
              if (!doc.processed.isSet('addtext')) {
                for (const math of doc.math) MathJax.config.addCopyText(math, doc);
                doc.processed.set('addtext');
              }
            },
            (math, doc) => MathJax.config.addCopyText(math, doc)
          ]
        }
      },
      addCopyText(math, doc) {
        if (math.state() < MathJax.STATE.ADDTEXT) {
          const adaptor = doc.adaptor;
          const text = adaptor.node('mjx-copytext', {'aria-hidden': true}, [
            adaptor.text(math.start.delim + math.math + math.end.delim)
          ]);
          adaptor.append(math.typesetRoot, text);
          math.state(MathJax.STATE.ADDTEXT);
        }
      },
      startup: {
        ready() {
          const {newState, STATE} = MathJax._.core.MathItem;
          const {AbstractMathDocument} = MathJax._.core.MathDocument;
          const {CHTML} = MathJax._.output.chtml_ts;
          newState('ADDTEXT', 156);
          AbstractMathDocument.ProcessBits.allocate('addtext');
          CHTML.commonStyles['mjx-copytext'] = {
            display: 'inline-block',
            position: 'absolute',
            top: 0, left: 0, width: 0, height: 0,
            opacity: 0,
            overflow: 'hidden'
          };
          MathJax.STATE = STATE;
          MathJax.startup.defaultReady();
        }
      }
    }

[thisiscam]

@dpvc Wow thanks! I was just about to do it myself.

One thing I noticed though, is that since you allocated the "mjx-copytext" to be custom block level elements, in my case all the pasted un-rendered TeX items will have a newline appended at the end. This doesn't happen if I paste to my system's text editor, but only when I paste to the same webpage (which contains the equations)'s input box.

I used this to create an inline span node instead:

adaptor.node('span', {'aria-hidden': true, 'class': 'mjx-copytext'}, [
  adaptor.text(math.start.delim + math.math + math.end.delim)
]);

Then I added a global style

.mjx-copytext {
    font-size: 0;
}

Not sure if you have suggestions to handle this better.

Update:
I realized that

MathJax._.output.svg_ts.SVG.commonStyles['.mjx-copytext'] = {
    'font-size': 0
};

works fine!

[thisiscam]

Another minor issue is that the solution doesn't seem to respect processEscapes=true. If I type \$ x, the $ sign will be copied twice (one for regular text, and one for the one inside mjx-copytext.

But since this is a really small problem, I'm satisfied for now.