MathJax
MathJax copied to clipboard
mathjax
Mathjax doesn't for a certain equation in Safari browser
Issue Summary
Mathjax doesn't for a certain equation in Safari browser , the equation is $$ 605 \cdot 0.7071 = 427.7955 $$ It doesn't have anything to do with configuration as other equation work normally
Steps to Reproduce:
- Just try to use that certain expression and somehow try to see the result in an Iphone safari browser
Technical details:
- MathJax Version: latest
- Client OS: (e.g., Iphone any)
- Browser: (e.g., Safari any)
I am using the following MathJax configuration:
MathJax = {
svg: {
mtextInheritFont: true,
},
chtml: {
mtextInheritFont: true,
},
tex: {
inlineMath: [
["$", "$"],
["\\(", "\\)"],
],
processEscapes: true,
macros: {
dblcol:
"\\!\\rt{0.1}\\mathrel{\\raise.13ex{\\substack{\\small \\circ \\\\ \\small \\circ}}}",
hc: "\\!\\rt{0.1}\\mathrel{\\raise.13ex{\\substack{\\small \\circ \\\\ \\small \\circ}}}",
rr: "\\mathbb{R}",
zz: "\\mathbb{Z}",
nn: "\\mathbb{N}",
ww: "\\mathbb{W}",
qq: "\\mathbb{Q}",
te: "\\text",
dom: "\\text{dom}\\,",
degree: "\\text{deg}\\,",
f: "\\Rule{0.12em}{0.8pt}{-0.8pt}f",
fsp: "\\hspace{0.06em}\\Rule{0.12em}{0.8pt}{-0.8pt}f",
sp: "\\Rule{0.08em}{0.8pt}{-0.8pt}",
ra: "\\rightarrow",
back: "\\backslash",
sqt: "{\\color{white} *\\!\\!\\!}",
up: ["\\rule{0pt}{#1em}", 1], // vspace doesn't seem to work / exist ?
dn: ["\\Rule{0pt}{0em}{#1em}", 1],
rt: ["\\hspace{#1em}", 1],
hlfbk: "\\!\\hspace{0.1em}",
fl: ["\\lfloor #1 \\rfloor", 1],
cl: ["\\lceil #1 \\rceil", 1],
FL: ["\\left\\lfloor #1 \\right\\rfloor", 1],
CL: ["\\left\\lceil #1 \\right\\rceil", 1],
implies: "\\Longrightarrow",
psa: "{}\\!\\hspace{0.0691em}",
psb: "{}\\!\\hspace{0.06901311249137em}",
ncdot: "\\re\\cdot\\re",
re: "\\!\\hspace{0.1em}",
bk: "\\!\\hspace{0.1em}",
gbk: "\\!\\hspace{0.15em}",
fw: "\\hspace{0.1em}",
hfbk: "\\!\\hspace{0.2em}",
deg: "\\circ",
km: "[\\text{km}]",
ddx: "{d \\over dx}\\hspace{0.1em}",
ddt: "{d \\over dt}\\hspace{0.1em}",
ddu: "{d \\over du}\\hspace{0.1em}",
ddz: "{d \\over dz}\\hspace{0.1em}",
ov: ["\\overline{#1}", 1],
floor: ["\\lfloor{#1}\\rfloor", 1],
faketextelement: "{\\color{white}\\text{*}}\\!\\!\\!\\rt{0.1}",
},
},
options: {
enableMenu: false,
},
loader: {
load: ["[tex]/color"],
},
startup: {
ready: () => {
MathJax.startup.defaultReady();
MathJax.startup.promise.then(() => {
document.querySelectorAll(".hidden-on-startup").forEach((elem) => {
elem.classList.remove("hidden-on-startup");
elem.classList.add("animate-appear");
});
});
},
},
};
and loading MathJax via
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
Supporting information:
open https://little-bo-peep-leptos-v2.fly.dev/article/ch_1 search for this string "for example, say," , you'll find the equation under it
Safari on iOS tends to mark long strings of numbers as a phone number and inserts a link so that you can call the number. That inserts HTML into the math string, and MathJax won't process it since it doesn't think math should contain HTML. I suspect that the 427.7955 is being detected as a telephone number. Does it show up as a link for you?
One solution is to insert {} in the middle of the number (e.g., 427{.}7955) so that iOS won't think it is a phone number, but this has the disadvantage of disrupting the accessibility of the page for those using screen readers. Another would be to use a fake CDATA comment so that iOS will leave the contents alone:
$<!--[CDATA[
605 \cdot 0.7071 = 427.7955
]]-->$
Finally, if it is a site that you control, and you don't want auto detection of phone numbers, then you can add
<meta name="format-detection" content="telephone=no" />
to the document <head> section to prevent Safari from looking for telephone numbers and making links out of them.
Either of these should resolve the problem for you, I think.
