[ARCHIVED] Odd behavior in announcements with MathJAX

[maguire]

I have recently been making some tools so that I can automate some processes, one of these is making an announcement for a Bachelor's or Master's thesis presentation.  To do this I extract some information constructed using a LaTeX temple and then create an announcement and a course calendar entry. Normally when I generate the announcement just one line of the announcement (with an ellipsis, i.e., "..." at the end of it) shows up on the page listing all of the announcements, but when I include equations in the abstract, then the block/display equations start appearing! Fortunately, the inline equations do not appear.

You can see examples of these two behaviors at https://canvas.kth.se/courses/11/announcements 

Does anyone know why this happens?

[James]

Chip ( @maguire ),

When I try the link you provided, it says that page (Announcements) has been disabled for the course.

I don't use announcements much, so I may not have followed. I created an announcement using an inline equation in the body of the message and it seemed to work.

That was with just an inline equation, so I added a display equation as well and both displayed.

Maybe I'm misunderstanding what you're trying?

[maguire]

I did not know that the announcements have been disabled for this course.

I get in the summary listing for announcements:

When the full announcement shows:

The in-line equations that first appear in the abstract do not appear in the summary, but once there is a display equations then all the equations seem to be appearing.

[maguire]

Here is the HTM for the page:

<pre><span lang="en_us">Student</span>: Fake A. Student &amp; Fake B. Student
<span lang="en_us">Title</span>: This is the title in the language of the thesis: An subtitle in the language of the thesis
<span lang="sv_se">Titel</span>: Detta &auml;r den svenska &ouml;vers&auml;ttningen av titeln: Detta &auml;r den svenska &ouml;vers&auml;ttningen av undertiteln
<span lang="en_us">Place</span>/<span lang="sv_se">Plats</span>: via Zoom https://kth-se.zoom.us/j/ddddddddddd, Isafjordsgatan 22 (Kistag&aring;ngen 16), Stockholm
<span lang="en_us">Examiner</span>/<span lang="sv_se">Examinator</span>: Gerald Q. Maguire Jr.
<span lang="en_us">Academic Supervisor</span>/<span lang="sv_se">Handledare</span>: A. Busy Supervisor &amp; Another Busy Supervisor &amp; Third Busy Supervisor
Opponent: A. B. Normal &amp; A. X. E. Normal&egrave;
<span lang="en_us">Language/<span lang="sv_se">Spr&aring;k</span>: English
</span></pre>
<div style="display: flex;">
<div>
<h2 lang="en">Abstract</h2>
<p>All theses at KTH are required to have an abstract in both <i>English</i> and <i>Swedish</i>.</p>
<p>Keep in mind that most of your potential readers are only going to read your <tt>title</tt> and <tt>abstract</tt>. This is why it is important that the abstract give them enough information that they can decide is this document relevant to them or not. Otherwise the likely default choice is to ignore the rest of your document.</p>
<p>A abstract should stand on its own, i.e., no citations, cross references to the body of the document, acronyms must be spelled out, &hellip; . Write the abstract early and revise as necessary. This will help</p>
<p>keep you focused on what you are trying to do.</p>
<p>Since the Canvas release of 2021-02-20, it i possible to have MathJAX (<a href="http://docs.mathjax.org/en/latest/input/tex/macros/index.html">http://docs.mathjax.org/en/latest/input/tex/macros/index.html</a>) automatically included with a Canvas page and to include mathematical expressions in many places. We will take advantage of this to include such expressions in a thesis abstract. The program that makes the Canvas announcement and Canvas calendar entry makes use of the MATHML snippet highlighted in <a href="https://chalmers.instructure.com/courses/2/pages/math-slash-latex-in-canvas-pages">https://chalmers.instructure.com/courses/2/pages/math-slash-latex-in-canvas-pages</a>.</p>
<p>For testing of formulas in abstract a number of example formulas have been included below. Note that the syntax with single dollar signs around an equation is not supported. However, an acceptable inline equation can use the back slash parenthesis syntax, such as <span class="math-tex">\(area = \int_{a}^b f(x)dx\)</span> and <span class="math-tex">\(c=2 \cdot \pi \cdot r\)</span>
</p>
<p>Some examples from <a href="https://s3.amazonaws.com/tr-learncanvas/docs/CanvasEquationEditorAdvanced.pdf">https://s3.amazonaws.com/tr-learncanvas/docs/CanvasEquationEditorAdvanced.pdf</a>
</p>
<p>Intervals: <span class="math-tex">\(\left(x,y\right]\)</span>, <span class="math-tex">\(\left[x,y\right)\)</span>, <span class="math-tex">\(\left(-\infty,4\right]\)</span>, <span class="math-tex">\(\left(\sqrt{5} ,\frac{3}{4}\right]\)</span>
</p>
<p>Block examples:</p>
<p>
<span class="math-tex">\[y = ax + b\]</span>
</p>
<p>
<span class="math-tex">\[c=2 \cdot \pi \cdot r\]</span>
</p>
<p>
<span class="math-tex">\[\int_{a}^{b} x^2 \,dx \]</span>
</p>
<p>
<span class="math-tex">\[x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}\]</span>
</p>
<p>For all <span class="math-tex">\(\mathbb R^n\)</span> there is an <span class="math-tex">\(\alpha\)</span>...</p>
<p>Result: For all Rn there is an &alpha;...</p>
<p>
<span class="math-tex">\[\sum_{i=0}^n i^2 = \frac{(n^2+n)(2n+1)}{6}\]</span>
</p>
<p>Piecewise function: <span class="math-tex">\[ f(x)=\left\{ \begin{array}{lr} 1+x &amp; \text{if } x&lt;3 \\ 2 &amp; \text{if } x=3 \\ 1-x &amp; \text{if } x&gt;3 \end{array} \right. \]</span>
</p>
<p>Augmented matrix:</p>
<p>
<span class="math-tex">\[\left(\begin{array}{ccc|c} 1 &amp; 2 &amp; 3 &amp; \pi \\ 4 &amp; 5 &amp; 6 &amp; \sqrt{5} \\ 7 &amp; 8 &amp; 9 &amp; -3 \end{array}\right)\]</span>
</p>
<p>Two chemical formulas: H₂O or <span class="math-tex">\((C_5O_2H_8)_n\)</span>
</p>
<p>Some of the symbols and superscripts and subscripts that can be handled include: copyright symbol: &copy; Maguire 2021, and some superscripts: ^99mTc, A^*, A^&reg;, and A&trade;.</p>
<p><strong>Keywords:</strong> <em>Canvas Learning Management System, Docker containers, Performance tuning </em></p>
</div>
<div>
<h2 lang="sv">Sammanfattning</h2>
<p>Alla avhandlingar vid KTH m&aring;ste ha ett abstrakt p&aring; b&aring;de <i>engelska</i> och <i>svenska</i>.</p>
<p>Om du skriver din avhandling p&aring; svenska ska detta g&ouml;ras f&ouml;rst (och placera det som det f&ouml;rsta abstraktet) - och du b&ouml;r revidera det vid behov.</p>
<p><strong>Nyckelord:</strong> <em>Canvas L&auml;rplattform, Dockerbeh&aring;llare, Prestandajustering Nyckelord som beskriver inneh&aring;llet i uppsatsrapporten </em></p>
</div>
</div>

[maguire]

James (@James),

Thanks for your response.

It is great that the Math JAX is rendering in the announcements itself. However, it is the block/display equations appearing in the summary on the list of all of the announcements that seem strange and that once the block equations appear, even the inline equations that were not displaying earlier in the summery are now appearing.

There is a document Some_reasons_for_a_standard_thesis_template.docx (in DOCX format) and code at https://github.com/gqmaguirejr/E-learning showing how one can generate an announcement from a LaTeX template shown at https://www.overleaf.com/read/xmrfhcchgnvq - this greatly decreases the work in announcing a thesis defense and making the cover and dealing with the final thesis.

Unlike my approach about 18 months ago, this new solution does not require an LTI interface and therefore can be done pretty much by any of the faculty who are examiners for a degree project. Instead, it uses some very cool libraries in LaTeX (specifically contents to collect information and then code in the class file to output the collected information at the end of the thesis). Once this information is in the PDF file, it can be extracted by a tool to produce a JSON file and then this JSON file can be used to produce announcements and calendar entries and later can be used to produce the color cover and apply the cover to the thesis (after removing the added information pages that are not part of the thesis).

[James]

Chip ( @maguire )

Strange. I don't have a good answer, but at least I know what you're talking about now.

It seems that the blocks are messing up handling of the equation display. I am seeing multiple sentences cut off by ellipsis, so it's almost like the presence of the blocks resets the notion that it has already done the first ellipsis.

This could be an oversight in the equation handling, it's relatively new and perhaps they didn't consider this use.

I tried some quick things to see if I could find something (kids are pressuring me to go to the pool, so I didn't get to do an in-depth analysis). I removed the span elements and they didn't make any difference. Changing the pre to a div didn't make a difference. Removing the display="flex' didn't fix things. Removing the nested divs didn't make a difference. Removing the divs didn't matter. It seems related to the equations and then only the \[ \], not the \( \).

I was able to replace \[ \] with \( \) and then center the paragraph and it was hidden. Of course, \( \) and \[ \] have different sizing so adding a \displaystyle could help. Still, that sounds like a huge hack for something that appears broken.

I also noticed what looks like an improperly nested span for the language (the Sweedish span is inside the English) in the pre at the top, but fixing that didn't fix the problem.

[maguire]

James @James 

Thanks for your help. Hopefully, everyone had fun at the pool. 

I have reduced the HTML to an even smaller example that shows the problem and in this case it has both expressions in a math-tex class span. Only the one with \[ causes the problem.

<h2 lang="en">Abstract</h2>
<p>All theses at KTH are required to have an abstract in both <i>English</i> and <i>Swedish</i>.</p>
<p>Exchange students many want to include one or more abstracts in the language(s) used in their home institutions to avoid the need to write another thesis when returning to their home institution.</p>
<p><span class="math-tex">\(\pi \cdot r\)</span> or <span class="math-tex">\[ \int_{a}^{b} x^2 \,dx \]</span></p>
<p>Some more text: A^*, A^&reg;, and A&trade;.</p>
<p><strong>Keywords:</strong> <em>Canvas Learning Management System, Docker containers, Performance tuning </em></p>

[maguire]

@James had the correct insight ("it's almost like the presence of the blocks resets the notion that it has already done the first ellipsis.") that it is because the ellipse function does not continue to work when the block equation appears as it is due to the browser's handling of the properties of the division where the announcement is placed which has the CSS style:

element.style {

}

.ic-item-row__content-col p, .ic-item-row__content-col h4, .ic-item-row__content-col .ic-announcement-row__content {

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

}

When were get to the block example:

  Block examples:
  <span class="MathJax_Preview" style="color: inherit;"></span>
  <div class="MathJax_Display" style="text-align: center;">
    <span class="MathJax" id="MathJax-Element-7-Frame" tabindex="0" style="text-align: center; position: relative;"
      data-mathml="<math xmlns=&quot;http://www.w3.org/1998/Math/MathML&quot; display=&quot;block&quot;>
             <mi>y</mi><mo>=</mo><mi>a</mi><mi>x</mi><mo>+</mo><mi>b</mi></math>" role="presentation">

we can see that the division with the class "MathJax_Display" sets the style to be "text-align: center;" which causes the browser to start rendering it - since it is no longer going off the right side of the container; hence this ends the inline rightward progress (From the URLhttps://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow: "The text-overflow property only affects content that is overflowing a block container element in its inline progression direction (not text overflowing at the bottom of a box, for example)."). The results is that since it is no longer inline and not overflowing to the right - it gets rendered!

Mystery solved.

Note that there is nothing Instructure can do to change this behavior - short of not taking all of the announcement HTML in, since the overflow behavior is being done by the browser itself. However, all of the announcement is taken in  --- as can be seen in the source code at ui/shared/announcements/react/components/AnnouncementRow.js

So the behavior is not due to any preprocessing of the content, but simply due to the way that the text-overflow property works in the browser.