4 ms·
Here is a use case: While MathML is a web standard since 1997, there is no support for it. Still, we want to write "x = y × ε + c". And we want th
by masswerk 4y ago
Here is a use case: While MathML is a web standard since 1997, there is no support for it. Still, we want to write "x = y × ε + c". And we want this to line up with another formula on the next line. Or you want to write down a simple matrix, where one of the elements is a Greek letter, but still would like numbers to line up vertically (it's a matrix!).
This works with any kind of pre-formatted text (like a "pre" element with the generic monospace font-family) in every browser, as it has, since there have been browsers, but not with Chrome. For Chrome, we have to put epsilon in a span element, make it display as inline-block, assign a width (0.6em), align the character inside this box, just to write a very basic formula! (I call this "training wheels for text".)
Repro:
x = y × ε + c
y = x × 1 + c
⎛ 1 −1 ⎞
⎜ ⎟
⎝ ε 1 ⎠
Writing the character "ε" for Chrome:
<span style="display: inline-block; width: 0.6em; text-align: center; overflow: visible; margin: 0; padding: 0; box-sizing: border-box;">ε</span>