Add MathML tutorial

[fred-wang]

Summary

An introduction to basic MathML constructions.
This only introduces the "first steps" module but
more advanced topics may be added in the future.

Motivation

Chromium is expected to ship MathML soon, and it is likely that
developers read the documentation as suggested in the
Intent-to-ship thread [1]. Although we've been updating existing
MDN documentation it may still be difficult for people new to MathML
to learn about it. This PR addresses that by following the same
structure as HTML, CSS and JavaScript tutorials.

Supporting details

[1] https://groups.google.com/a/chromium.org/g/blink-dev/c/n4zf_3FWmAA

Related issues

Metadata

• Adds a new document
• Rewrites (or significantly expands) a document
• Fixes a typo, bug, or other error

[fred-wang]

I'll be off for one week but I wanted to make people aware of that. Probably more tweaks are needed (like copying some examples to https://github.com/mdn/learning-area).

cc @bkardell @teoli2003

[github-actions]

Preview URLs

• https://pr19467.content.dev.mdn.mozit.cloud/en-US/docs/Learn/MathML/First_steps/Fractions_and_roots
• https://pr19467.content.dev.mdn.mozit.cloud/en-US/docs/Learn/MathML/First_steps/Getting_started
• https://pr19467.content.dev.mdn.mozit.cloud/en-US/docs/Learn/MathML/First_steps/Scripts
• https://pr19467.content.dev.mdn.mozit.cloud/en-US/docs/Learn/MathML/First_steps/Tables
• https://pr19467.content.dev.mdn.mozit.cloud/en-US/docs/Learn/MathML/First_steps/Text_containers
• https://pr19467.content.dev.mdn.mozit.cloud/en-US/docs/Learn/MathML/First_steps/Three_famous_mathematical_formulas
• https://pr19467.content.dev.mdn.mozit.cloud/en-US/docs/Learn/MathML/First_steps
• https://pr19467.content.dev.mdn.mozit.cloud/en-US/docs/Learn/MathML

Flaws

None! 🎉

External URLs

URL: /en-US/docs/Learn/MathML
Title: Writing mathematics with MathML
on GitHub

• https://en.wikipedia.org/wiki/Graphical_user_interface (1 time) (Note! This may be a new URL 👀)
• https://en.wikipedia.org/wiki/Lightweight_markup_language (1 time) (Note! This may be a new URL 👀)
• https://fr.wikipedia.org/wiki/LaTeX (1 time) (Note! This may be a new URL 👀)
• https://fr.wikipedia.org/wiki/TeX (1 time) (Note! This may be a new URL 👀)

---

URL: /en-US/docs/Learn/MathML/First_steps
Title: MathML first steps overview
on GitHub

• https://glitch.com/ (1 time) (Note! This may be a new URL 👀)
• https://jsbin.com/ (1 time) (Note! This may be a new URL 👀)

---

URL: /en-US/docs/Learn/MathML/First_steps/Tables
Title: MathML tables
on GitHub

• https://en.wikipedia.org/wiki/Legendre_symbol (1 time) (Note! This may be a new URL 👀)

---

URL: /en-US/docs/Learn/MathML/First_steps/Getting_started
Title: Getting started with MathML
on GitHub

No new external URLs

---

URL: /en-US/docs/Learn/MathML/First_steps/Scripts
Title: MathML scripted elements
on GitHub

No new external URLs

---

URL: /en-US/docs/Learn/MathML/First_steps/Text_containers
Title: MathML Text Containers
on GitHub

• https://en.wikipedia.org/wiki/Mathematical_Alphanumeric_Symbols (1 time) (Note! This may be a new URL 👀)
• https://en.wikipedia.org/wiki/Mathematical_operators_and_symbols_in_Unicode (1 time) (Note! This may be a new URL 👀)
• https://w3c.github.io/mathml-core/ (2 times) (Note! This may be a new URL 👀)

---

URL: /en-US/docs/Learn/MathML/First_steps/Fractions_and_roots
Title: MathML fractions and roots
on GitHub

• https://en.wikipedia.org/wiki/Combination (1 time) (Note! This may be a new URL 👀)
• https://en.wikipedia.org/wiki/Legendre_symbol (1 time) (Note! This may be a new URL 👀)

---

URL: /en-US/docs/Learn/MathML/First_steps/Three_famous_mathematical_formulas
Title: Three famous mathematical formulas
on GitHub

• https://en.wikipedia.org/wiki/LaTeX (1 time) (Note! This may be a new URL 👀)
• https://en.wikipedia.org/wiki/Mathematical_operators_and_symbols_in_Unicode (1 time) (Note! This may be a new URL 👀)
• https://fred-wang.github.io/TeXZilla/ (1 time) (Note! This may be a new URL 👀)
• https://validator.w3.org/nu/ (1 time) (Note! This may be a new URL 👀)

(this comment was updated 2022-09-03 05:35:19.799760)

[Josh-Cena]

@fred-wang Thank you so much for this PR! I'm excited. I've run the formatter on these files. Some general points:

• _ for italic and - for bullet points
• The style guide says no typography in headings—not even inline code (yeah...)
• The prose should not be wrapped. Some may do a line break after every full stop—but we never break within a sentence.

The content is great. I learned a lot.

[fred-wang]

Thanks @Josh-Cena ! One silly question: how I can run the formatter myself?

[Josh-Cena]

I don't think we have tooling in the repo itself yet. I'm using Prettier—you can run npm i -g prettier, and then prettier -w files/en-us/learn/mathml/. Or if you are using VS Code, you can also right click and select "format document". Prettier by default doesn't cancel prose wrapping, so if you want to collapse wrapped prose, you have to pass prettier -w files/en-us/learn/mathml/ --prose-wrap never. But don't worry about formatting too much in general.

[fred-wang]

@bkardell mentioned that using "display mode" (which is a LaTeX term) is a bit confusing since in CSS you have a property called display and it has inline|block, and even MathML Core has the display attribute which is inline|block and not inline|display. So I tweaked the text to not use inline/display modes.

[fred-wang]

An additional question / remark that is recurrent for MathML articles: the content does not seem to show up in the sidebar. Not sure what is missing to make that happen.

[Rumyra]

Hi @fred-wang - the {{LearnSidebar}} which these pages use is here: https://github.com/mdn/yari/blob/main/kumascript/macros/LearnSidebar.ejs

It can be updated with these pages once they are merged. Maybe between Accessibility and Tools & Testing?

[bkardell]

I also left some review comments - most of them very minor and probably even debtable/opinionated. Other than that, lgtm!

[fred-wang]

@bkardell @Rumyra Thanks for your feedback. I believe I've addressed all (most?) of them. Please take a look again, thanks!

[fred-wang]

Thanks @teoli2003

It seems this is still blocked on @Rumyra's approval. I believe the only change not address is the question about the copyright, which I explained is not a concern.

[caugner]

@fred-wang FYI The MathML tutorial is not mentioned in the Topics covered section of the Learn web development page yet.

The Web performance guide, on the other hand, is listed there but not yet in the sidebar.

[fred-wang]

@caugner Thanks, will check that.

[fred-wang]

I opened #20349