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

href+mathcolor inconsistency #427

Closed
pkra opened this issue Apr 3, 2013 · 12 comments

Comments

Projects
None yet
3 participants
@pkra
Copy link
Member

commented Apr 3, 2013

Via David Carlisle at the User Group. I can reproduce the issue.

Test file http://monet.nag.co.uk/~dpc/mjlink.html In the HTML/CSS output (or native mathml in firefox) that produces a "red m = red n" with the m being a link to a paragraph at the bottom of the page.

In the SVG output (in all browsers I tried) The mathcolor setting on m is ignored and it comes out blue. (Our actual documentation has 77022 of these so goes very blue in svg mode:-)

David

The file is

<!DOCTYPE html>
<html>
<head>
<title>mj link test</title>
<script type="text/javascript"
  src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
</head>
<body>

<math>
 <mi href="#m" mathcolor="#EE0000" mathvariant="bold">m</mi>
 <mo>=</mo>
 <mi mathcolor="#EE0000" mathvariant="bold">n</mi>
 </math>.
<p>filler text</p><p>filler text</p><p>filler text</p>
<p>filler text</p><p>filler text</p><p>filler text</p>
<p>filler text</p><p>filler text</p><p>filler text</p>
<p>filler text</p><p>filler text</p><p>filler text</p>
<p>filler text</p><p>filler text</p><p>filler text</p>
<p>filler text</p><p>filler text</p><p>filler text</p>
<p id="m">An anchor for #m link to go to</p>
</body>
</html>
@dpvc

This comment has been minimized.

Copy link
Member

commented Apr 3, 2013

It seems that the CSS used to color the links blue seems to override the explicit attributes on the individual elements within the link. I'm surprised by that, and will have to look into it more.

In the meantime, you could use

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  SVG: {
    styles: {
      ".MathJax_SVG svg a > g, .MathJax_SVG_Display svg a > g": {
        fill: null, stroke: null
      }
    }
  }
});
</script>

to remove the CSS that colors links blue. Note that this will disable all link coloring, not just those with explicit colors. If you want to keep link color for the ones without explicit math color, you can try

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  SVG: {
    styles: {
      ".MathJax_SVG svg a > g, .MathJax_SVG_Display svg a > g": {
        fill: null, stroke: null
      },
      ".MathJax_SVG svg a > use, .MathJax_SVG_Display svg a > use": {
        fill: "blue", stroke: "blue"
      }
    }
  }
});
</script>

but I'm not certain it covers all the bases. I'll have to do more checking. Let me know if you find cases where this doesn't work.

@ghost ghost assigned dpvc Apr 15, 2013

@dpvc

This comment has been minimized.

Copy link
Member

commented Apr 17, 2013

The issue427 branch of my fork of MathJax should resolve this problem.

@fred-wang

This comment has been minimized.

Copy link
Contributor

commented Apr 19, 2013

That does not seem to work (Chrome and Firefox). It seems that in

<style type="text/css">
.mjx-svg-href {fill: blue; stroke: blue}
</style>
<svg width="100px" height="100px">
  <a xlink:href="#m">
    <g class="mjx-svg-href" id="m" stroke="red" fill="red">
       <circle cx="50px" cy="50px" r="50px"/>
    </g>
  </a>
</svg>

the CSS style is still "stronger" than the SVG attribute. I don't remember exactly what the SVG/CSS specs say, but putting the class on a node higher than the one that has the stroke/fill attribute would work.

I'll add a test

MathMLToDisplay/General/GenAttribs/href-1.html

which will essentially be David's one:

<mtext id="m" href="#m" mathcolor="red">RED</mtext>

=> In testsuite

@dpvc

This comment has been minimized.

Copy link
Member

commented Apr 19, 2013

The mjx-svg-href class was only supposed to be applied when the element didn't already have a fill attribute. There was code there to do that originally, but I guess it was lost when I went to the addClass routine. Hmmm.

I also thought I had tried out the class on the a element, but apparently not (or using a class name rather than styling the a directly works differently). In any case, that does seem to work properly, so I've made that change.

The test should include not only colored text, but also uncolored text (so that you can verify that it is blue). Some of my attempts to fix it lost the blue coloring. It might also be good to test coloring inside of a larger link, e.g.,

<mrow id="m" href="#m"><mi>x</mi><mo>+</mo><mi mathcolor="red">y</mi></mrow>
@fred-wang

This comment has been minimized.

Copy link
Contributor

commented Apr 19, 2013

OK, in the if-else that appends the <a>, I think I only test the else case. When is the if case supposed to happen? When the mathcolor is on the <math>?

@dpvc

This comment has been minimized.

Copy link
Member

commented Apr 19, 2013

When is the if case supposed to happen? When the mathcolor is on the <math>?

It is when the href is on the <math>. The color can also be there, or somewhere in the content.

@fred-wang

This comment has been minimized.

Copy link
Contributor

commented Apr 19, 2013

Yes, I meant the href.

@dpvc

This comment has been minimized.

Copy link
Member

commented Apr 19, 2013

What do you think should be the result for

<math>
<mstyle mathcolor="red">
<mrow href="xx.html">
<mi>x</mi>
</mrow>
</mstyle>
</math>

My reading is that the x should be red, since the <mstyle> should cause <mi>x</mi> to be treated as <mi mathcolor="red">x</mi>. This is how MathJax renders it (in both SVG and HTML-CSS output). But Firefox shows it blue (in NativeMML output).

On the other hand, I think

<math>
<mrow mathcolor="red">
<mrow href="xx.html">
<mi>x</mi>
</mrow>
</mrow>
</math>

should be blue, since the outer <mrow> is colored, but the <mi> is more closely tied to the href than the outer <mrow>. This also corresponds to how it would work in HTML text (if there is an link within colored text, it is blue, not the color of the text, unless the link is styled explicitly).

@fred-wang

This comment has been minimized.

Copy link
Contributor

commented Apr 19, 2013

I think the original idea from the MathML WG was to implement <mstyle mathcolor="red"> as you indicate. However, my position is that the mstyle feature is bad, it is a duplicate of the CSS that implements inheritance in an incompatible way and with less powerful selection rules. I personally think that only the CSS-like attributes should be preserved and based on CSS inheritance rules. I remember that Karl Tomlinson asked to modify the mathbackground behavior during the MathML3 release process, so <mstyle mathbackground="red"> will paint the whole mstyle background in red (like CSS) rather than each individual token elements (like the mstyle idea). I don't remember if he asked that for mathcolor.

Probably people are more likely to expect mathcolor to behave as CSS. However, I don't think we want to bother too much about <mstyle>, so I guess we can keep the current behavior.

@fred-wang

This comment has been minimized.

Copy link
Contributor

commented Apr 19, 2013

I've updated the test and checked that they pass with the updated version. So I guess we can merge that too.

@dpvc

This comment has been minimized.

Copy link
Member

commented Apr 19, 2013

I agree, <mstyle> does makes things very awkward, and it doesn't have the delicate control that CSS allows. BTW, MathJax does the mathbackground as you indicate Tomlinson requested, but does mathcolor via the <mstyle> approach.

dpvc pushed a commit to dpvc/MathJax that referenced this issue Apr 19, 2013

@dpvc

This comment has been minimized.

Copy link
Member

commented Apr 19, 2013

=> Merged

@dpvc dpvc closed this May 17, 2013

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.