Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[v3 SVG] .MathJax path #2618

Closed
pkra opened this issue Jan 27, 2021 · 6 comments
Closed

[v3 SVG] .MathJax path #2618

pkra opened this issue Jan 27, 2021 · 6 comments
Labels
Accepted Issue has been reproduced by MathJax team Browser Bug Fixed Test Needed v3 v3.1
Milestone

Comments

@pkra
Copy link
Contributor

pkra commented Jan 27, 2021

Just a random note after trying to reduce the stylesheet generated by the SVG output. At

https://github.com/mathjax/MathJax-src/blob/fbd71f3f7ca06dc71304e8a2c03f13be233ccac5/ts/output/svg/Wrappers/TextNode.ts#L49-L53

the stylesheet sets .MathJax path { stroke-width: 3}.

I believe this has no effect (except when disabling fontCache) since it will not match the path in a use element shadow DOM.

@dpvc dpvc added the v3 label Jan 27, 2021
@dpvc
Copy link
Member

dpvc commented Jan 27, 2021

I ran into this recently myself. It turns out that some browsers do match it and others don't. Firefox doesn't, but WebKit does, so it affects Safari and Chrome (and presumably Opera, and Blink-based Edge, though I didn't verify that), but doesn't affect Firefox. I'm not sure which is correct, but because the shadow DOM created by <use> is internal, I would expect the <use> to honor the styling of the original <path> (which is not in shadowDOM).

In any case, you are right that it doesn't affect Firefox output. Adding the same CSS for .MathJax use resolves the issue for Firefox.

@dpvc dpvc added Accepted Issue has been reproduced by MathJax team Ready for Development labels Jan 27, 2021
@pkra
Copy link
Contributor Author

pkra commented Jan 27, 2021

I ran into this recently myself. It turns out that some browsers do match it and others don't.

Ah, I didn't test carefully enough. I can confirm that Chrome honors it (though it doesn't show up in the dev tools styles list).

I'm not sure which is correct, but because the shadow DOM created by <use> is internal, I would expect the <use> to honor the styling of the original <path> (which is not in shadowDOM).

I think the SVG 2 spec agrees with you, https://svgwg.org/svg2-draft/struct.html#UseStyleInheritance

So this is then really just a browser bug.

(FWIW, I can't spot a difference to the default stroke-width of 1 on any of my displays.)

@dpvc
Copy link
Member

dpvc commented Jan 27, 2021

Yes, there is almost no difference between 1 and 3 when the em-size is 1000. The non-zero amount was to make some very thin areas (like in the italic lower-case "o") less likely to disappear, but I would guess 1 would do just as well. The idea was to have at least some stroke-width, and not just fill, since some areas get very thin.

@dpvc
Copy link
Member

dpvc commented Jan 27, 2021

Thanks for the pointer to the documentation. I've had a quick look, and I think Firefox may be doing the right thing in this case. Apparently "complex selectors" (ones that include parent elements, like our .MathJax path are not supposed to be transferred to the shadow DOM.

In any case, assigning .MathJax use as well as .MathJax path should take care of both situations.

@dpvc dpvc added this to the 3.1.3 milestone Jan 31, 2021
@dpvc dpvc self-assigned this Jan 31, 2021
@pkra
Copy link
Contributor Author

pkra commented Mar 3, 2021

Since I just stumbled upon this again, the naming of this rule still seems odd compared to other style rules.

dpvc added a commit to mathjax/MathJax-src that referenced this issue Mar 18, 2021
@dpvc
Copy link
Member

dpvc commented Mar 18, 2021

I have made a PR to use better selectors that are more specific and target both path and use elements.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Accepted Issue has been reproduced by MathJax team Browser Bug Fixed Test Needed v3 v3.1
Projects
None yet
Development

No branches or pull requests

2 participants