Resizing Math Equations Not Working

Jump to solution
BradAdmin
Community Member
‎01-31-2024 08:12 AM

I had an instructor come to me with the following issue:

The instructor had created math equations in a quiz and resized the math equation using the handles on the box that surrounds the equation.  He then saved the changes he made to the question and republished the quiz.  The problem arose when he checked the quiz in the student view.  When he opened the quiz he noticed that the equations defaulted back to the original size.

Does anyone have a fix to this issue, such as changing the coding in the quiz?

Thank you

0 Likes
1 Solution

Jump to solution
James
Community Champion
‎02-01-2024 05:42 PM

@BradAdmin 

To answer @Chris_Hofer's question, this is absolutely by design and not a bug.

I'm going to give a couple of different solutions here, but I want to start with why resizing the img doesn't work.

The img element is a fallback for older technology. Modern browsers never see the img element. Canvas uses MathJax and looks for an img element with an equation_image class. It intercepts it within the browser and rewrites it  to use MathJax.

For example, HTML view for the Rich Content Editor shows this:

 

<div><img class="equation_image" title="x+\alpha" src="/equation_images/x%252B%255Calpha?scale=1" alt="LaTeX: x+\alpha" data-equation-content="x+\alpha" data-ignore-a11y-check="" /></div>

 

But when I open the browser developer tools and inspect the DOM from the Elements tab, it gets rendered in the Chrome browser as this:

 

<div>
   <span class="math_equation_latex fade-in-equation" style="null">
      <span class="MathJax_Preview" style="color: inherit;"></span>
      <span class="MathJax_SVG" id="MathJax-Element-1-Frame" tabindex="0" style="font-size: 100%; display: inline-block; position: relative;" data-mathml="<math xmlns=&quot;http://www.w3.org/1998/Math/MathML&quot;><mi>x</mi><mo>+</mo><mi>&amp;#x03B1;</mi></math>" role="presentation">
         <svg xmlns:xlink="http://www.w3.org/1999/xlink" width="5.658ex" height="1.861ex" viewBox="0 -639.9 2435.9 801.3" role="img" focusable="false" style="vertical-align: -0.375ex;" aria-hidden="true">
            <g stroke="currentColor" fill="currentColor" stroke-width="0" transform="matrix(1 0 0 -1 0 0)">
               <use xlink:href="#MJMATHI-78" x="0" y="0"></use>
               <use xlink:href="#MJMAIN-2B" x="794" y="0"></use>
               <use xlink:href="#MJMATHI-3B1" x="1795" y="0"></use>
            </g>
         </svg>
         <span class="MJX_Assistive_MathML" role="presentation">
            <math xmlns="http://www.w3.org/1998/Math/MathML">
               <mi>x</mi>
               <mo>+</mo>
               <mi>α</mi>
            </math>
         </span>
      </span>
      <script type="math/tex" id="MathJax-Element-1">x+\alpha</script>
   </span>
</div>

 

Note that there is no longer an img element.

This is why resizing the image doesn't work. It's not really an image for most modern browsers.

If you try to paste that into the HTML view, the SVG portion gets stripped out and you're just left the the MathJax. Furthermore, the script element isn't allowed in the editor, so it is stripped as well. It also mangled all the quotes in the spans. So don't have your instructor do that.

There was some oddity pasting it, too. At first, it didn't show up. Then I edited it and it showed up, but gave a warning that there was auto-saved content (when there wasn't). The content only shows up when editing, not viewing, which makes it of limited use.

You can paste just the MathML code. This works in view mode:

 

<div><math xmlns="http://www.w3.org/1998/Math/MathML">
    <mi>x</mi>
    <mo>+</mo>
    <mi>&alpha;</mi>
</math></div>

 

You can add style="font-size:36pt;" to the math element to make it larger, but don't.

That only works in edit mode. In view mode, it gets reset back to the Canvas default. Why? Because Canvas/MathJax does the same thing with MathML that it did with the image and adds the spans and svg and that's what is getting displayed. It adds the original math element within that script element's content, where it is ignored.

What does work, though is adding the font-size attribute to the wrapping element. In my example, that's the div around the math element.

Generating MathML, switching to the HTML view to edit, adding a div element and then setting the style on it seems excessive.

Thankfully, changing the font-size on the div also works around an equation object image, so you don't have to even mess with MathML.

 

<div style="font-size: 36pt;"><img class="equation_image" title="x+\alpha" src="https://richland.instructure.com/equation_images/x%252B%255Calpha?scale=1" alt="LaTeX: x+\alpha" data-equation-content="x+\alpha" data-ignore-a11y-check="" /></div>

 

It turns out that it can be done without using HTML view at all.

If you change the font size on the paragraph from the Rich Content Editor toolbar before you create the equation, then the equation will show up with the adjusted size while you're in the editor.

If you select the equation object and then change the font size, it does not show up with the altered font-size until you save it. But it does show up then.

Canvas adds a span element, even if it's the only item in the paragraph. It then remembers that span when you start a new paragraph. I'm not a fan of that and have a script that strips out all spans when I run it. I would much rather edit the HTML and add the style to the parent element rather than a span. But not all people are comfortable that way.

By the way, you can use inline LaTeX now and don't have to rely on the equation editor. You can change the font size with the tool, then type your question. When you get to the LaTeX portion, use \( and \) to wrap it. Then both the text and the image are the same size, rather than just the image being larger.

Edit: the community software looks like interpreted the content as math and the tags were not displayed. That should have said to wrap it with \ ( and \ ) but without the space between the backslash and parentheses. That makes me wonder if the community software now understands things like \(\frac{1}{3}\)? It doesn't in the preview, but maybe once the page is reloaded? If so, that would be a nice improvement.

 

Solve \(\tan\theta=\frac{3}{4}\) for \(\theta\).

 

If you want the equation larger without making the rest of the text larger, you can potentially use /displaymode.

You can also use the LaTex sizing to make just the math content. For example, this uses the \Large size.

 

\(\Large\sqrt{x^2}=\lvert x \rvert\)

 

Allowed sizes are \tiny, \scriptsize, \footnotesize, \small, \normalsize, \large, \Large, \LARGE, \huge, and \Huge.

Note that in LaTeX, those size commands may only work in text mode. However, MathJax supports them, which is why they work in Canvas.

View solution in original post