mathjax
[SVG output] creating (reliable) CSS outlines on links
Usually, <a>'s inside <svg>s get a (user-agent default) CSS outline when put into focus, e.g., try the example at https://developer.mozilla.org/en-US/docs/Web/SVG/Element/a.
However, in mathjax(-node) output, this outline is not visible. If I manually set a high px value for the outline (e.g., 1em), it becomes visible.
I'm guessing some part of MathJax output is overlapping. I'm not sure which part and I don't really mind. I'm mostly wondering how to reliably style the link outline. Is a fixed outline value (even if it's 1em) going to look ok in all cases or does it depend on the position of the link within the larger expression?
(This is technically a question about MathJax proper but due to the tabindex on the outer expression, it's not easy to get a link into focus.)
Here are two approaches I've tried:
First, just an outline.
.mjx-svg-href:focus {
outline: dotted 4em black;
}
Here are some samples -- the first (simplest) one actually loses the vertical parts of the outline; not sure why. (Also, it doesn't work in WebKit.)
$$\href{#}{\bbox[5px]{1}}$$
$$\frac{\href{#}{\bbox[5px]{1}}}{2}$$
$$\href{#}{\bbox[5px]{1}}$$
$$\sum^\href{#}{\bbox[5px]{1}}_\href{#}{\bbox[5px]{1}}$$
$$\S^\href{#}{\bbox[5px]{1}}_{x_\href{#}{\bbox[5px]{1}}}$$
$a \overset{\href{#}{\bbox[5px]{1}}}{=} b$
An alternative approach leverages the rect, but now I'm guessing both stroke-width and strok-dasharray which seems worse. (This works in WebKit so that's a plus.)
.mjx-svg-href:focus > rect {
stroke: #000000;
stroke-width: 3em;
stroke-dasharray: 66;
}