Docs: format the matrices

[ycw]

fix: #26812

This PR attempts to format the matrices in docs by using simple html/css

preview: http://raw.githack.com/ycw/three.js/mat-html/docs/index.html#api/en/math/Matrix4.extractBasis

usage

<!-- matrix 4x4 -->
<span class="matrix mat4">
  <i>1</i><i>0</i><i>0</i><i>0</i>
  <i>0</i><i>1</i><i>0</i><i>0</i>
  <i>0</i><i>0</i><i>1</i><i>0</i>
  <i>0</i><i>0</i><i>0</i><i>1</i>
</span>

<!-- matrix 3x3 -->
<span class="matrix mat3">
  <i>1</i><i>0</i><i>0</i>
  <i>0</i><i>1</i><i>0</i>
  <i>0</i><i>0</i><i>1</i>
</span>

<!-- matrix 3x1 -->
<span class="matrix mat3x1">
  <i>x</i>
  <i>y</i>
  <i>z</i>
</span>

example

<!-- children can be any inline elements like i, b, u, s, span, mark etc... -->
<span class="matrix mat4">
  <i>a</i><i>b</i><i>c</i><b>v.x</b>
  <i>e</i><i>f</i><i>g</i><b>v.y</b>
  <i>i</i><i>j</i><i>k</i><b>v.z</b>
  <i>m</i><i>n</i><i>o</i><i>p</i>
</span>

[Mugen87]

The new formatting looks great but this isn't MathML, right?

If so, it would be nice to see the same doc page updated with MathML so we can easier compare both approaches.

[ycw]

yup... no MathML, no JS, no precompiled step :D

[Mugen87]

This how a 4x4 matrix definition with MathML would look like. Just markup, no CSS:

https://jsfiddle.net/71w6yovn/

I personally would prefer MathML over a custom solution via HTML/CSS. Simply because MathML is intended for exact this purpose and I see no reason to build something custom next to it. Also search engines can easier understand this is actually math and not something else.

[ycw]

agree.. as long as the <math> has wider USER adoption, not just browser compat., e.g. your fiddle on latest chrome/andriod, the <mo>[</mo> is shown as fallback [ (literal, the char) :|

[Mugen87]

How does this version of the fiddle look on your Android device?

https://jsfiddle.net/6bvydfnL/5/show

It seems what we see on Android is a font issue, see https://stackoverflow.com/questions/75621629/issue-with-mathml-rendering-of-matrix-like-formulas-in-chrome-for-both-on-mac-an.

A solution for this is to include MathJax. It would be an additional dependency but at least we could use MathML to write math syntax. MathJax could be removed when the font issue has been resolved over the time.

[Mugen87]

Looking at the HTML source code though, MathJax creates custom HTML and CSS so it wouldn't be optimal for search engines anymore. Meaning one of the benefits of using MathML would be lost.

[Mugen87]

It seems the font stretching issues have been reported to the Chromium bug tracker. So there is hope this gets eventually fixed.

https://bugs.chromium.org/p/chromium/issues/list?q=mathml

[ycw]

https://jsfiddle.net/71w6yovn/

https://jsfiddle.net/6bvydfnL/5/show

[Mugen87]

After some more testing of MathML it seems the formatting is not as consistent as originally expected. Even Firefox on macOS does not render the brackets in the correct size. If we agree on using MathML, we have to be aware that style issues are inevitable.

BTW: I've realized now that most of the discussion in this PR should have happened in #26812. Anyway, the conclusion for me is that MathML is great but it's support across various browser is a bit inconsistent. IMO, nothing crucial that prevents a usage but one has to be aware of the limitations.

[Mugen87]

Even Firefox on macOS does not render the brackets in the correct size.

After upgrading to macOS 14.0 and Firefox 118, this isn't true anymore. Brackets have the correct size now.

[ycw]

closed; reason: use <math> instead, see PR #26887