Mathup: Easy MathML authoring tool with a quick to write syntax

by runarberg • 1 year ago

126 37 1 year ago

you know what we need even less than another json alternative? another math-language alternative. more so than any other formal(ish) language, a representation (for math) benefits from network effects (because math is both older and broader than any/every other such language).

runarberg15• 1 year ago

This is for authoring math expressions which compiles to MathML. MathML has the explicit design goal of being hard to write, and is much more meant to be a compiler target rather than for humans to write.

This space is pretty dominated by LaTeX whom almost all professionals use, but is pretty verbose and not exactly easy to use for beginners (or even non-frequent users). Other than LaTeX we have Office Math, which is a GUI, and AsciiMath. This tool is a dialect of AsciiMath[1] and builds on top of that. If you know AsciiMath, you know this. There is also UnicodeMathML[2], but that has another goal than this or AsciiMath, where the focus is on readability of authored expressions, rather than writability here.

1: https://asciimath.org/

2: https://github.com/doersino/UnicodeMathML

zamadatix• 1 year ago

Casual users probably just want the GUI options with less care of what syntax that may eventually involve on the backend. People deep enough to care about writing everything in raw syntax probably want to stick with LaTeX and can have a program transform that to MathML or SVG whatever else they need for display. The "here's a special syntax which is neither all of A or B" is just a hard sell.

On specific tools I've also liked https://www.imatheq.com/imatheq/com/imatheq/math-equation-ed... for quick casual use since it's just a webpage but still a decent GUI editor.

Diti• 1 year ago

MathML has the explicit design goal of being hard to write

Wait, really? Do you have good primary sources to back up that claim?

lenkite• 1 year ago

What do you think of Typst https://typst.app/ ? They are planning a web target as well.

BenFranklin100• 1 year ago

I like this. It addresses a need for quickly writing math expressions with an intuitive syntax. I don’t have to write math expressions often enough to remember the more complex formatting from more powerful packages; and when I do use mathematical expressions, they are usually fairly simple. This will fill that niche.

runarberg15• 1 year ago

Thank you. That is exactly why I wrote this. I wanted users to be able to write math in a markdown document, but did not expect any of them to know LaTeX.

jpavel2• 1 year ago

I absolutely love this project - for years I'd been using a homegrown s-exp to MathML translator, but your project is both more intuitive and capable.

mathup's tiny, clean API makes it easy to integrate the project in all sorts of processing workflows, both in-browser and scripting.

runarberg15• 1 year ago

Thank you. I’m glad you like it.

spankalee• 1 year ago

I love that this publishes the <math-up> web component.

It's a great way to take content that's actually pretty humanly readable in the HTML, and translate it to an even better rendered format in the UI. It's good for progressive enhancement and framework support at the same time.

runarberg15• 1 year ago

Another nice thing about web components is that you can sniff the custom element registry (and even await a promised registration) for custom elements. I was writing a couple of markdown-it plugins yesterday[1][2] to render $dollar delimited math$ and simply places its content in either a <math-up> or a <la-tex>[3] element depending on what is already in the custom element registry. Meaning if you want to write LaTeX rather than AsciiMath all you have to do is import the webcomponent before you call the markdown-it render.

1: https://github.com/runarberg/markdown-it-mathblock

2: https://github.com/runarberg/markdown-it-mathspan

3: https://github.com/runarberg/temml-custom-element

oofbey• 1 year ago

Could pick a better homepage example. The demo code doesn't render very well in MathML. Kerning on the exponents is off. In "beta^alpha" the alpha character touches the beta. Looks better switching to MathJax.

runarberg15• 1 year ago

You are right. I hadn’t taken a close look at that expression in chromium (it looks fine on Firefox). I think this may be a Chrome rendering issue. I know Temml does a lot more than me to make sure the expressions look right (my primary concern is that the MathML markup is correct) and even Temml has the same problem[1].

Aside, I love this expression that you landed on. The Gamma distribution is one of the reason I started writing this library 10 years ago. The way the original AsciiMath can’t have arbitrary identifiers (only texts) was a deal breaker for me. The Gamma distribution is a very nice showcase for capabilities of an authoring tool like this because the name is usually written using latin letters `Gamma` while its density function also includes the gamma function which is usually written with a greek capital gamma (Γ). In the original AsciiMath writing Gamma just gives you the greek letter. The gamma distribution is also just a very cool distribution, or rather it contains some very cool distributions (in particular the Chi-squared distribution).

1: https://temml.org/#%5Cbeta%5E%5Calpha

Garlef• 1 year ago

Hmm... The mobile experience of that page is not very convincing on first contact

gnulinux• 1 year ago

I don't see any issues in Android Firefox, works pretty much the same as my OSX Chrome or Firefox. What is the problem you're having I wonder?

runarberg15• 1 year ago

Author here. I will admit that the labeling of the playground is a bit sloppy. The input comes before the output on desktop (as it should) but is flipped in mobile (for ... reasons), but I never wrote an addEventListiner on the matchMedia to change the labels to reflect the swapped order. As a front end engineer for 10 years this is pretty embarrassing.

Another missing feature which quite alot mobile users expect is jump to top. I personally never use it, but many mobile users do.

Code blocks also have kind of excessive margins, and I should probably shrink the font-size so that more users could read the entire thing without horizontal scrolling, though I think this is fairly minor.

Finally, what I can think of, is the content it self. I made the choice when writing the docs, to teach the reader a little about MathML as I demonstrate the project. I think this was a solid choice but it puts the simplest most unimpressive expressions at the top. On desktop this is fine because you can see more impressive expressions further down, but on mobile these are hidden in a horizontal scroll, so the user might be left unimpressed.

krick• 1 year ago

This is pretty much how I always wanted formulas in my notes to look like (but was too lazy to implement it myself, I guess). It's not even so much about fast input, it's about that it needs to be at least somewhat readable in plain text (not rendered), which LaTeX certainly isn't. Typing greek letters and stuff is not really a problem with XCompose, but TeX-based tools are too dumb to render "naïve" expressions pretty. I am not sure why: it seems not a huge computational task to figure out that ] is a `\right]`, and it's not like I often need to use `\left]` anyway. And while rendering `(a+b)/a` as a `\frac` is opinionated, honestly, the only reason why this occurs in my notes is when I was too lazy to type `\frac{}{}`.

I want this to be the default (or at least an option) in all markdown text editors (obsidian, github, etc.) I mean, as an intermediate: in the end MathJax rendering is much prettier than plain MathML.

jks• 1 year ago

it seems not a huge computational task to figure out that ] is a `\right]`

TeX's design was finalised in 1982, when the computational resources were different by a few orders of magnitude. There is a very strong culture of backward compatibility (search for "A torture test for TeX") and there are so many equations written in TeX documents that it would be impossible to change the parsing now.

That said, something like MathJax would be free to create their own TeX-like syntax where parentheses are automatically paired.

I for one often find myself wanting more control, writing `\bigr]` or `\biggr]` instead of `\right]` to get the rendered equation to look good.

And while rendering `(a+b)/a` as a `\frac` is opinionated, honestly, the only reason why this occurs in my notes is when I was too lazy to type `\frac{}{}`.

Plain TeX has the much nicer syntax `{a+b \over a}` but for some obscure reason LaTeX recommends against that.

t_mann• 1 year ago

At first glance it seems that it not only has functional whitespace, but has overloaded it (used for grouping numerator and denominator or for pre- and suffixes). Also, it seems inconsistent in how it handles commands, some seem to be reserved words while others seem to require \`X`. It might be the right choice for its intended use case of quick and easy math, but it seems like it might come with a few footguns if you use it for anything more than that. Any experiences?

runarberg15• 1 year ago

Author here. The intended use case is indeed quick and easy math expressions, and the target users are those that may or may not know LaTeX. I tried to make most expressions possible (I even added tensor notation a couple of weeks ago) but if you want to author complex equations you should probably use LaTeX. In my opinion very complex equations are much more manageable with LaTeX (this is also true of AsciiMath proper).

When your write LaTeX you maintain some structure for complex equations, while here you kind of take the quickest route possible and very quickly loose your footing in the equation’s complexity. In LaTeX you can very easily write out a very complex equation with nothing but your text editor, but here once you are maybe 6 or 7 terms deep you loose your place and will probably need to see a visual rendering to find your footing and continue. Mathup makes this problem worse than in AsciiMath proper, because in AsciiMath proper you are forced to at least parenthesize many of your sub-expressions, while here you are free to go wild with the whitespace.

The whitespace grouping is actually even more powerful than just for fractions, e.g. you can use it group terms around any infix (incl. sub- and superscripts) as well as after any prefix (such as sqrt): `e ^ -x^2/2 / sqrt 2pi` will give you the standard normal distribution. The rule is that if there is space between the operator and the operand it will operate on everything until the next applicable whitespace, the space between sqrt and 2pi applies the the sqrt prefix, and is not applicable to the fraction, but the space before slash is applicable to the ^ so the sqrt 2pi term are not apart of the superscript. I actually don’t recommend relying on this and just use parentheses for all but the simplest expressions (it is fine in sub-expressions though).

But like I said the target usecase is quick and easy expressions, so people that write a+b / c+d are favored over the ones that write `(e^(-(x^2)/2))/sqrt(2pi)` - but honestly I would write this as `e^(-(x^2)/2) / sqrt(2pi)`.

emmelaich3• 1 year ago

The example on first hit made no sense for me, the markup and the result were completely unrelated.

Maybe it's a server load issue.

runarberg15• 1 year ago

Probably not, this is a static website, I pick a random equation from a pool of 10 on load time. Do you remember which one it showed? or tried to show?

emmelaich3• 1 year ago

The markup was something like ai = bj + ck + dl where i,j,k,l were superscripts. But there was a theta in there somewhere.

Sorry, I should've taken a screenshot.

nullifidian• 1 year ago

If there had been something like this standardized in Markdown from the start, it might have had a chance for wide adoption. Right now, learning to see and use LaTeX math as easily as more ASCII-like notation is just more convenient since it is widely adopted (in GitHub, in VS Code, etc.). It's harder, but it also provides the added benefit of maintaining your LaTeX skills.

I think Google's Chrome team's choices of priorities bear a significant portion of the blame for this. They refused to implement MathML for the longest time, and even when it was implemented, it was partly done and financed by a third party. Without MathML, LaTeX-to-HTML JavaScript hacks became the norm, solidifying LaTeX as the standard even for non-typesetting use cases. Had MathML been implemented by Chrome early on, a more direct and easier translation from something ASCII-like to MathML would likely have been adopted.

runarberg15• 1 year ago

Its funny I started writing this tool over 10 years ago (show HN from March 2015 https://news.ycombinator.com/item?id=9235139) where I intended it to be used in Markdown. AsciiMath proper back then (just like AsciiMath today) didn’t compile to MathML so I was forced to write my own

adius• 1 year ago

Sounds cool! How is this different than https://asciimath.org?

runarberg15• 1 year ago

This is a dialect of AsciiMath. The major difference is in the implementation. AsciiMath proper is pretty tightly integrated with MathJax, while this just outputs standard MathML, and then you decide what to do with it.

Second difference is with supported MathML target output. Mathup is far more expressive (we even have tensor index notation in mathup). In mathup you can target your preferred MathML output in a way you can’t in AsciiMath. For example in mathup you can purposefully write any token element you want except <ms>. (`<mi>`, \`<mo>`, "<mtext>", and #`<mn>`), in AsciiMath if you want to wrote Gamma as an identifier (as opposed having it turn into the greek letter) or int as an operator (as opposed to an integral) you have to do it with <mtext>. Here you can do `Gamma` for <mi>Gamma</mi> or \int for <mo>int</mo>.

Thirdly is some differences in syntax. Most noticeable is matrix notation, in AsciiMath you write [(row, one), (row, two)], while in mathup you write [row, one; row, two]. Another major syntax difference is how whitespace works. In mathup you can group pars of your expression together with whitespace, so a+b / c+d is not the same as a + b/c + d. In AsciiMath, you have to use parenthesis to do this.

wy2010344• 1 year ago

I think all DSLs should be turned into function calls. Of course, function calls can be simpler, such as some infix and dictionary parameters.

Mathup: Easy MathML authoring tool with a quick to write syntax

Related Stories