zirc

Online Scruffy Bunny

Programmer, Artist, Rabbit
in their early 20s

 


 

📢 Don't wanna see shares?
Follow @zircus for less noise!


garak
@garak

Often (three times) I have seen the question recur on Cohost, can :eggbug:eggbug read LaTeX?

Official word is a sad "nope" to LaTeX, which makes sense if you know what's under the hood (50MB of text macros on top of Pascal written in 1978). MathML seems to be in the future though, as soon as Chromium re-supports it after a nine-year hiatus.

While we're waiting, we have CSS. I decided to find out what it takes to get some φ-assed ekwashuns up and running. Actually kind of some work! But hopefully some other math-inclined folk can take this work and plagiarize it use it with citations.

As a test case I've seen how well I can represent some scribbles which are related to how to derive Stoke's Theorem from Greens' Theorem. Equations immediately below, exegesis below the fold.

(1)
∫∫S∇ × 𝐅⋅𝐧̂ 𝑑S
=
dS𝐅⋅𝑑𝐫
(2)
=
C(𝐿, 𝑀, 0) ⋅ (𝑑𝑥, 𝑑𝑦, 𝑑𝑧)
(3)
=
C(𝐿 𝑑𝑥 + 𝑀 𝑑𝑦)

Aligned Equations

LaTeX uses \begin{align*} for this purpose, and hopefully MathML's <mtable> and <maligngroup> will act as an adequate replacement. (Depending on how well they work, the nickname "Malign Group" is right there.) I'm using CSS Grids for this purpose. The grid alignment for the equations above is achieved by a wrapping <div> around the whole thing, with the following column declarations:

display:                   grid; 
grid-template-columns:     20px   1fr   20px   2fr; 
row-gap: 1em; text-align: center;

The first line make it actually a grid, and the grid-template-columns property declares four columns by giving their widths. The two fixed-width columns of 20px each are for the "connective tissue" of numberings and the equal signs. The other two columns use fr as their unit to make them "flex columns" which expand to fill available space. The fr is a unit which defines how excess width is apportioned between the flex columns, in this case in a 1:2 ratio between the second & fourth columns.

The last line is just tinkering.

Mathematical Symbols

The symbols in your formulas have to look correct. There is a semantic difference between 𝐧 and 𝑛: one's a vector and one's a scalar. Well good news, Unicode has you covered!

*Channels Cheech Marin in From Dusk till Dawn (1996)*

Alright, symbols, symbols, symbols!
Come on in Symbol lovers!
Here at the Unicode Consortium we’re slashing symbols in half!
Give us an offer on our vast selection of mathemaical symbols, this is a symbols blow out!
Alright, we got 𝗯old letters, 𝘪talic letters, 𝙗old-italic letters, regular letters. We got Capital letters, lowercase letters. We got 𝔊othic letters. We got 𝒞aligraphy letters. We got serif letters, 𝗌ans-serif letters. We got 𝚖onospace letters. We got Latin letters, Greek letters, Hebrew letters. We even got mathematical operators, supplemental operators, miscellaneous symbols.
C'mon, you want symbols, come on in Symbol Lovers!
If we don’t got it, you don't want it!
Come on in mathematical symbol lovers!

Seriously though, if you want to put just about any math symbol into a webpage, it's probably in Unicode. Just take a gander through the list of Math Unicode symbols and it's probably there. Finding them might be difficult (I wouldn't know how to Google for "⧰"), but if you're writing it you probably know the actual name.

The list of alphanumeric math symbols is honestly kind of silly. When people complain that math notation is too dense I'm the first one to defend it that its density helps communicate with experts. But on the other hand... we have unicode symbols for the serif and sans-serif versions of the letter? Those are semantic serifs? Those are load-bearing sans-serif variations? Oh the plus side, you can guarantee that it's going to stay sans-seric and italicized when someone copy-pastes into Notepad.

Modifiers like circumflexes can be achieved with combining characters, which take a little more care to apply.

In-Line Formatting

There are unicode symbols for Integrals, ranging from ∫ all the way through ∰. But... they don't look right if they're the same size as text. So I made my bigger integral symbols C like so:

<span style="display: inline-block; transform: scaleY(2.5);">∮</span>
<sub style="vertical-align: -1em;">C</sub>

The span must be declared inline-block to use transform functions, that's apparently just a rule of CSS. The scaleY transform s t r e t c h e s the Integral symbol vertically but not horizontally, which will eventually cause visible distortion, especially with the circle on contour integrals. You can scale on both axes if you want, that's a personal choice. Since the integral extends down further, the subscript needs vertical-align to place it lower.

While not demonstrated here, I assume similar tricks with scale transforms will serve for when you need extra-big brackets.

Open Challenges

Probably the biggest thing I haven't figured out is arbitrary fractions.

Contributions and suggestions are welcome! I'm figuring this out as I'm going, which is guaranteed to arrive at a working-but-suboptimal solution.


@zirc shared with:

You must log in to comment.