Communities

Writing
Writing
Codidact Meta
Codidact Meta
The Great Outdoors
The Great Outdoors
Photography & Video
Photography & Video
Scientific Speculation
Scientific Speculation
Cooking
Cooking
Electrical Engineering
Electrical Engineering
Judaism
Judaism
Languages & Linguistics
Languages & Linguistics
Software Development
Software Development
Mathematics
Mathematics
Christianity
Christianity
Code Golf
Code Golf
Music
Music
Physics
Physics
Linux Systems
Linux Systems
Power Users
Power Users
Tabletop RPGs
Tabletop RPGs
Community Proposals
Community Proposals
tag:snake search within a tag
answers:0 unanswered questions
user:xxxx search by author id
score:0.5 posts with 0.5+ score
"snake oil" exact phrase
votes:4 posts with 4+ votes
created:<1w created < 1 week ago
post_type:xxxx type of post
Search help
Notifications
Mark all as read See all your notifications »
Q&A

Welcome to Codidact Meta!

Codidact Meta is the meta-discussion site for the Codidact community network and the Codidact software. Whether you have bug reports or feature requests, support questions or rule discussions that touch the whole network – this is the site for you.

Comments on MathML and the math tag - MathJax without JavaScript

Post

MathML and the math tag - MathJax without JavaScript

+4
−0

What is MathJax?

Some Codidact communities have MathJax enabled, which allows displaying mathematical notation within a post. This is not enabled for all communities, partly because displaying it involves downloading additional JavaScript, and also a small delay while that JavaScript runs. The page is not displayed correctly until both of those steps have completed, which can be particularly noticeable on a slow connection or a slow device.

What is MathML?

Another way of displaying mathematical notation is with the <math> HTML tag, which allows including MathML which tells the browser what to display directly, requiring no JavaScript to be downloaded or run. As this is built in to all modern browsers, the mathematical notation can be viewed by anyone, even if they have JavaScript disabled.

Currently this is blocked for Codidact, but only because all HTML tags are blocked by default until added to the list of allowed tags.

Does MathML work on my device?

I've made a simple example using the <math> tag which you can use to find out whether it displays correctly on your browser/device. If you want to see the best your device can show, view the third link in the example.

I'll relegate my testing results to a footnote[1], but the summary is that including mathfonts (still no JavaScript) makes a significant improvement to appearance across all browsers and devices I tested (second link in the example), and Firefox seems ready (desktop and mobile) and Chromium based browsers seem almost ready (based on the small sample of mathematical notation I tried). Further reading suggests the only problem I found (Chromium browsers don't display blackboard bold) is a MathJax problem rather than a Chromium problem[2], so it should be possible to produce MathML that works for all browsers (third link in the example).

Let's keep MathJax

I'm not suggesting that we stop using MathJax. Many people are already familiar with its syntax (which is significantly less verbose than the MathML used in a <math> tag). MathJax is also necessary in order to display all of the past MathJax based posts.

Uses for the <math> tag

This post is to start a discussion about whether the <math> tag might have a place alongside MathJax. Should we give users both options, in the same way that we currently allow both Markdown and HTML in posts?

There might also be the possibility of a compromise approach that could give us some of the benefits of each. MathJax supports conversion to MathML[3], so I wonder if it would be possible to use MathJax to display mathematical notation in the preview during editing, but store a second copy as MathML in a <math> tag when it is saved. This way editing would be easy for people familiar with MathJax, but there would be no delay in displaying it for anyone reading rather than editing, and it would display even with JavaScript disabled.

Posts are already stored in duplicate on the server, as both Markdown (for editing) and HTML (for display), which means there is no rendering delay when reading a (non-MathJax) post. This would simply be applying the same approach to mathematical notation, so there would be no rendering delay even for MathJax posts.

What are your thoughts?

The <math> tag and MathML are new to me, so these are just my initial thoughts. I'd like to hear from people who have a better idea of how it could work, and any concerns from people who currently use MathJax (or even from people who don't want mathematical notation to be possible in their Codidact community - should this be a community level option like MathJax currently is?).


  1. I've tested on the following:

    • Firefox on Fedora Linux: displays clearly and scales correctly.
    • Chromium on Fedora Linux: displays clearly, scales correctly, missing double-struck section on the black board bold N, slightly oversized start and end values on the product (upper case pi), and the double height parentheses are displayed as single height, but still readable.
    • Firefox on Android: displays clearly, scales correctly, but the upper case pi is using a sans serif font which looks unusual but is still readable.
    • Chrome on Android: displays the individual symbols clearly, but does not align them correctly so they overlap and are difficult to read, and the alignment is different for the 2 different display sizes in the example. Same sans serif pi as Firefox on Android. Missing double-struck section on the black board bold N and the double height parentheses are displayed as single height, both similar to Chromium on Fedora Linux.
    • Edge on Windows 11: Same missing double-struck section on the black board bold N, presumably due to being Chromium based, but everything else looks good. The pi is large and has serifs and the double height parentheses are displayed correctly.

    The sans serif pi is due to the lack of a suitable font already installed on the phone. If Codidact used MathML, a suitable font could be included. This would only slow down loading on the first visit, and the fall back would still be readable mathematical notation, rather than the current fall back during a slow load, which is raw MathJax markup.

    Testing the same browsers with the same page except including mathfonts (the second link in the example):

    • Firefox on Fedora Linux: looks very similar.
    • Chromium on Fedora Linux: looks much better. The pi is bigger, making the start and end values look less out of place, and the double height parentheses are now displayed at the correct height. Still missing the double-struck section on the black board bold N.
    • Firefox on Android: the upper case pi is now using a serif font which looks much more recognisable and is also bigger so it fits better with the double height parentheses.
    • Chrome on Android: now much easier to read, with no overlap between symbols. The pi is now serif and is much larger and double height parentheses are now displayed at the correct height. Still missing the double-struck section on the black board bold N.
    • Edge on Windows 11: looks very similar. The missing double-struck section on the black board bold N does not appear to be a font problem but a Chromium bug (since it continues even when a font is supplied).

    I haven't tested on any MacOS or iOS browsers. I'd be interested to hear from anyone who does. ↩︎

  2. The failure to display blackboard bold in Chromium based browsers was raised as a bug and closed as WONTFIX because there is a more recently specified way to markup blackboard bold, and this does work in Chromium. The third link in my example shows how this looks, which works in all Chromium based browsers. If a later or future version of MathJax outputs MathML compatible with the latest MathML Core specification then Chromium based browsers will work fine. Otherwise we could use an alternative library to produce MathML, so this doesn't seem like an obstacle to saving a copy of the post as MathML to avoid the delay in displaying a post. ↩︎

  3. Try right clicking on any of the mathematical notation in a MathJax enabled Codidact post such as my Prime factor pattern in numbers one less than a power of 2 to see it automatically converted to MathML. That's how I got the MathML for the example page. ↩︎

History
Why does this post require attention from curators or moderators?
You might want to add some details to your flag.
Why should this post be closed?

1 comment thread

Documentation? (9 comments)
Documentation?
Olin Lathrop‭ wrote 3 days ago

Is there a good description somewhere of HTML equation writing and how to use it? I'm no HTML whiz, and the problem I usually run into is that the standard only defines things in a way that is ultimately correct and definitive, but really hard to parse. Other places give you small snippets at a time and are more focused on how to get something done instead of explaining how things work. I'd like to read the 10-page or so description of how the math engine works and what the tags do, without it being fragmented into 50 three-second sound bites you have to individually click thru.

trichoplax‭ wrote 2 days ago

The nearest I could find to a basic overview is Getting started with MathML, which gives an idea of how things nest inside each other to give different arrangements of symbols on the page.

For occasions when you just want to get the relevant markup to paste in, you can write it in MathJax on a Codidact site that supports it and then in the preview you can right click on the resulting mathematical notation and select "Show Math As > MathML Code". You don't even need to save the post - once you have copied the MathML from the preview you can discard the draft.

Olin Lathrop‭ wrote 2 days ago

I never did learn MathJax, so figure I'd just learn to use the HTML math features directly, assuming they aren't too difficult. I don't use Markup either. The HTML it replaces is hardly more complicated than Markup, and I can then use it in any HTML document. Since MS Word has gotten ever harder to use with each release, I've lately been writing documents in HTML. Much of what I do doesn't have Markup or MathJax available, so learning the direct HTML is useful. It's really not that hard. It reminds me of using a "runoff" style program from the 1980s, except that I can see the result immediately in another window where the browser is displaying the document I'm editing in a text editor.

trichoplax‭ wrote 2 days ago

For someone who isn't already accustomed to MathJax, the easiest way might be to find something similar to what you want in an existing post and copy it as MathML and edit that to suit your needs.

trichoplax‭ wrote 2 days ago · edited 2 days ago

Since you're already comfortable with HTML you'll probably find MathML sufficiently similar, especially when you can see the output immediately and get a feel for what each change does to the layout. The only potential problem with that is that you may end up doing things in a way not intended by the standards (similarly with HTML). Whether this matters to you depends on your intention. If you're writing a paper you might care more about precise layout than in an aside where the mathematical notation is not the main focus.

For example, the following all display as "1+1=2" but the spacing is different:

<p>1+1=2</p>
<math>1+1=2</math>
<math>
  <mn>1</mn>
  <mo>+</mo>
  <mn>1</mn>
  <mo>=</mo>
  <mn>2</mn>
</math>

The third one is the standards compliant way.

For more complex expressions accessibility becomes relevant because assistive technology such as a screen reader might not know how to describe non-standard usages.

Olin Lathrop‭ wrote 2 days ago

I just took a quick look at the MathML tutorial you linked to. It doesn't look bad at all. Granted, I haven't tried to write a fancy equation with it yet, but the basic concept seem straight forward and reasonably well thought out.

One thing that bothered me in that writeup is how they say you have to be careful with the font and code pages. Surprisingly, there was no mention of using HTML entities, like &, Ω, Θ, etc.

trichoplax‭ wrote 2 days ago

Indeed. Similarly to HTML, you can get started before you learn everything. You can use HTML to write a blog post without having to learn how to make an HTML table with merged cells. In the same way you can write clear, readable fractions in MathML without having to learn all the obscure notations of niche fields.

trichoplax‭ wrote 2 days ago

I think the problem they are describing with fonts is that even if you know the correct HTML entity for something (like &amp; for &) the fonts present on your system may not cover all of the obscure symbols you might want to use, so the HTML entity will just be displayed as a meaningless box like □.

This won't be a problem for common symbols that your system already has fonts for, but if you're not sure if your reader's device will already have a font that can display for example &#x02115; as ℕ then you might need to include a font file in your page.

Apart from such obscure cases, if you're used to using HTML entities then MathML may be quite natural for you. In MathJax, you would use \Omega or \Theta for Ω or Θ (or \omega or \theta for lower case ω or θ). In MathML you would use the HTML entities &Omega;, &Theta;, &omega;, or &theta;.