Issue with brackets when highlighted.

[korirdesmond]

Issue Summary

Hello. I'm experiencing an issue with curly brackets when highlighted, some parts aren't visible. When not highlighted, the brackets are rendered correctly. This is mostly visible on expressions with 4 rows. Here is the link to a test sandbox code .

Steps to Reproduce:

Check the MathML sample code here then highlight the equation.

Technical details:

• MathJax Version: 2.7.9 (https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.9/MathJax.js?config=TeX-MML-AM_CHTML)
• Client OS: Mac OS Monterey 12.2.1
• Browser: Chrome (99.0.4844.51), safari

Supporting information:

• Here is a test sandbox https://codesandbox.io/s/mathjax-v2-forked-kg3i22?file=/index.html:430-517

[dpvc]

MathJax uses multi-character assemblies when creating brackets and other stretchy delimiters when the size is larger than any of the single-character sizes that it has available. It looks like the selection background for these are overlapping each other and obscuring the other pieces.

I don't think there is much that can be done about this. While selecting the expressions is possible, it is not something that MathJax strives to support, as copying and pasting a layout like this is not generally very effective (what one usually needs is the underlying TeX or MathML notation, not the HTML output).

[korirdesmond]

@dpvc thanks for the response. we don't need this for copying and pasting, however, we need the highlighting feature. Our organization is none profit and this feature (highlight) is available to million users of our app. We are interested if you can solve this issue or at least put it on your radar. Thank you

[dpvc]

we need the highlighting feature

Does that mean you need users to be able to drag-select the math, or that you will be highlighting the math programmatically yourselves? If the user selects, is it important to be able select sub-expressions, or is selecting the whole expression sufficient? Will the user be selecting the math as part of a larger text?

The underlying problem is that the characters used for the assembly are taken from the font that has the largest sizes of the delimiters, so it has an unusually large ascent and descent (i.e., it is tall and deep). The selection highlighting sets the background for the height and depth of the font, not just the characters involved in the assembly. That means the selection highlighting is much larger than needed, and since the extender is made by multiple overlapping characters, that makes for even more extensive overlapping. In the case of the braces, the character involved is actually rather small, and so many copies are needed. Even though the highlighting is partly transparent, when that many overlap, they add up to being more solid.

There are a couple of approaches that can help, but not completely resolve the issue. One is to use CSS to clip the excess selection background when possible. For example

<style>
span.mjx-delim-v,
span.mjx-delim-v > span:nth-child(1),
span.mjx-delim-v > span:nth-child(3),
span.mjx-delim-v > span:nth-child(5) {
  overflow: clip
}
</style>

will help, as it reduces the overlap. Unfortunately, the extender itself can't be clipped in this way, as that will prevent the pieces of the assembly from connecting properly. But this does improve the selection somewhat.

Another possibility is to reduce the opacity of the selection for the multi-character delimiters. Unfortunately, that also requires setting the selection color, and since that varies from operating system to operating system, you probably need to set the selection background color for the entire page in order to have it be consistent. Something like

<style>
span.mjx-delim-v span::selection {
  background: rgba(63,127,255,.2);
}
::selection {
  background: rgba(63,127,255,.5);
}
</style>

might do it for you.

Neither solution is ideal, and you can use them together for best results. But perhaps that is sufficient for your needs.

[korirdesmond]

Does that mean you need users to be able to drag-select the math, or that you will be highlighting the math programmatically yourselves? If the user selects, is it important to be able select sub-expressions, or is selecting the whole expression sufficient? Will the user be selecting the math as part of a larger text?

We highlighting the math as part of a larger text programmatically with a text to speech feature we have.

The hacks seems to work but not the ideal approach.

[dpvc]

We highlighting the math as part of a larger text programmatically with a text to speech feature we have.

OK, thanks. Is the math highlighted all at once, or do you step through the different parts of the math individually?

If it is all at once, perhaps using something like

.in-selection .mjx-math {
  background-color: Highlight;
  user-select: none;
}

with applying class="in-selection" to the span with id="MathJax-Element-x-Frame" (where x is a number) when you add it to the selection would work out better for you. That takes extra work during the selection process, but the result is perhaps better than regular selection for the math.

[korirdesmond]

OK, thanks. Is the math highlighted all at once, or do you step through the different parts of the math individually?

It's highlighted all at once.

Will try your suggestion and revert. Thanks once again

[dpvc]

Good luck. Let us know how it turns out.