Labeling equation terms

37 views
Skip to first unread message

Gökhan Sever

unread,
Apr 19, 2011, 10:48:29 AM4/19/11
to MathJax Users
Hi,

This is my first post and cross-posted at sphinx-dev (http://
groups.google.com/group/sphinx-dev/t/b55d4bb82e94ab0d)

As I asked there, is there a way to link to the mathjax rendered
equation "terms" (create an html link, or popup a tooltip right over a
specific term in an equation)

Thanks.

Frédéric WANG

unread,
Apr 20, 2011, 11:02:12 AM4/20/11
to mathja...@googlegroups.com
Hi,

With the MathML input, you can use the "href" attribute to make a link on any part of the formula. I don't know if MathJax has a command to do that in the LaTeX mode, although I guess it should not be to difficult to add this feature.

Otherwise, I suppose you'll have to use the MathJax API to attach event to a "term" and write some Javascript code to display a popup or something. Not sure how you can do that, particularly how you can select a "term" of the formula, other people probably know more about that.
--
Frédéric Wang.
Website - Weblog

Davide P. Cervone

unread,
Apr 20, 2011, 3:30:56 PM4/20/11
to mathja...@googlegroups.com
Fred has mentioned that you can use href attributes on MathML elements if you are using MathML input, but for TeX input, you can use the \href macro:

\href{url}{math}

to make the specified math expression link to the given url.  

As for tool tips, if you are using MathML input, you can attach a tool tip using 

<maction actiontype="tooltip"><mrow>(exrpession)</mrow><mrow>(tooltip)</mrow></maction>

to make the given tooltip expression (it could be <mtext>...</mtext> or other mathematics) to the given expression.

MathJax doesn't have a built-in hook to this mechanism, but it is not hard to add one yourself.  You could include

    MathJax.Hub.Register.StartupHook("TeX Jax Ready",function () {
      var TEX = MathJax.InputJax.TeX,
          MML = MathJax.ElementJax.mml;
      TEX.Definitions.macros.tooltip = "myToolTip";
      TEX.Parse.Augment({
        myToolTip: function (name) {
          var arg = this.ParseArg(name), tip = this.ParseArg(name);
          this.Push(MML.maction(arg,tip).With({actiontype: MML.ACTIONTYPE.TOOLTIP}));
        }
      });
    });

as part of your configuration in order to define a \tooltip macro that you can call as in

$ x + \tooltip{y}{\text{This is a \(y\)}}{y} $

or

$ x + \tooltip{1}{= \sum_{n=1}^\infty \frac{1}{2^n}} $

Note that you get textual tooltips using \text{...} in the tooltip.  You can simplify this by adding

    MathJax.Hub.Config({
      TeX: {
        Macros: {texttip: ["\\tooltip{#1}{\\text{#2}}",2]}
      }
    });

to your configuration so that $\texttip{x}{this is an x}$ will give you a textual tooltip (saving you from having to enter \text{...} yourself).

Hope that does what you need.

Davide

Gökhan Sever

unread,
Apr 20, 2011, 4:31:24 PM4/20/11
to MathJax Users
Hello,

Thanks for the explanations. However I am not even a beginner in JS.
Could you please do a quick demo on an html illustrating these points?

projetmbc

unread,
Apr 21, 2011, 9:55:08 AM4/21/11
to MathJax Users
Hello.

Is it possible to do the following definition directly using
JavaScript ?

====================================================

MathJax doesn't have a built-in hook to this mechanism, but it is
not
hard to add one yourself. You could include

MathJax.Hub.Register.StartupHook("TeX Jax Ready",function () {
var TEX = MathJax.InputJax.TeX,
MML = MathJax.ElementJax.mml;
TEX.Definitions.macros.tooltip = "myToolTip";
TEX.Parse.Augment({
myToolTip: function (name) {
var arg = this.ParseArg(name), tip = this.ParseArg(name);
this.Push(MML.maction(arg,tip).With({actiontype:
MML.ACTIONTYPE.TOOLTIP}));
}
});
});

as part of your configuration in order to define a \tooltip macro....

projetmbc

unread,
Apr 21, 2011, 10:20:57 AM4/21/11
to MathJax Users
Indeed, I've tried the following code without success.

====================================================

<!-- Source : http://www.mathjax.org/resources/docs/?typeset.html -->
<html>
<head>
<title>MathJax Dynamic Math Test Page</title>

<script
type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-
AMS-MML_HTMLorMML">
</script>
<script>
// http://groups.google.com/group/mathjax-users/browse_thread/thread/e8c9ac4aa5e0be98
MathJax.Hub.Register.StartupHook("TeX Jax Ready",function () {
var TEX = MathJax.InputJax.TeX,
MML = MathJax.ElementJax.mml;
TEX.Definitions.macros.tooltip = "myToolTip";
TEX.Parse.Augment({
myToolTip: function (name) {
var arg = this.ParseArg(name), tip = this.ParseArg(name);
this.Push(MML.maction(arg,tip).With({actiontype:
MML.ACTIONTYPE.TOOLTIP}));
}
});
});

-</script>
</head>

<body>
\( x + \tooltip{y}{\text{Bla, bla...}}{y} \)
</script>
</body>
</html>

Davide P. Cervone

unread,
Apr 21, 2011, 12:17:19 PM4/21/11
to mathja...@googlegroups.com
> Is it possible to do the following definition directly using
> JavaScript ?

I'm not sure I understand what you are asking, because the definition
below IS using javascript.

Can you be more precise about what you want to do?

Davide P. Cervone

unread,
Apr 21, 2011, 12:27:02 PM4/21/11
to mathja...@googlegroups.com
Indeed, I've tried the following code without success.

Your code works for me except for two things:  the line break at

...?config=TeX-
AMS-MML_HTMLorMML">

must be removed (I assume that was added by a mailer somewhere along the line, and isn't in your original), and second, the minus sign at

-</script>

at the end of the script must be removed.  That will cause the script to not compile, and so not be run (so \tooltip will not get to be defined).  You also have an extra </script> at the end of the body, but that doesn't impede the function of the program.  There is also an extra {y} in the TeX code, but that is my fault as it was in the original example I gave above.  It is not needed and just confuses the issue, but doesn't cause problems.

Finally, you should really follow the configuration guidelines at


and put your MathJax.Hub.Config call in a script with type="text/x-mathjax-config" that appear BEFORE the script that loads MathJax in order to guarantee that it is run at the proper time.  It probably won't affect this particular case, but it is bad practice to do it the way you have it as there are other cases where it wouldn't work.

So a complete example would be
_________________________________________________

    <html>
    <head>
    <title>Add Tooltip Macro</title>


    <script  type="text/javascript"
       src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
    </script>
    <script>
    MathJax.Hub.Register.StartupHook("TeX Jax Ready",function () {
      var TEX = MathJax.InputJax.TeX,
          MML = MathJax.ElementJax.mml;
      TEX.Definitions.macros.tooltip = "myToolTip";
      TEX.Parse.Augment({
        myToolTip: function (name) {
          var arg = this.ParseArg(name), tip = this.ParseArg(name);
          this.Push(MML.maction(arg,tip).With({actiontype: MML.ACTIONTYPE.TOOLTIP}));
        }
      });
    });
    </script>
    </head>
    <body>
      \( x + \tooltip{y}{\text{Bla, bla...}} \)
    </body>
    </html>
_________________________________________________

Hope that works better for you.  If not, please be as precise as you can about what actaully DOES happen.  "Without success" is not very specific (it doesn't tell if you are getting an error message, or no output, or output without a tooltip, or what).

Davide

Davide P. Cervone

unread,
Apr 21, 2011, 12:29:38 PM4/21/11
to mathja...@googlegroups.com
Sorry forgot to move the configuration script when I was fixing your code.  Try:

_________________________________________________

    <html>
    <head>
    <title>Add Tooltip Macro</title>

    <script type="text/x-mathjax-config">

    MathJax.Hub.Register.StartupHook("TeX Jax Ready",function () {
      var TEX = MathJax.InputJax.TeX,
          MML = MathJax.ElementJax.mml;
      TEX.Definitions.macros.tooltip = "myToolTip";
      TEX.Parse.Augment({
        myToolTip: function (name) {
          var arg = this.ParseArg(name), tip = this.ParseArg(name);
          this.Push(MML.maction(arg,tip).With({actiontype: MML.ACTIONTYPE.TOOLTIP}));
        }
      });
    });
    </script>
    <script  type="text/javascript"
       src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
    </script>
    </head>
    <body>
      \( x + \tooltip{y}{\text{Bla, bla...}} \)
    </body>
    </html>

_________________________________________________

Davide

Davide P. Cervone

unread,
Apr 21, 2011, 12:30:09 PM4/21/11
to mathja...@googlegroups.com
> Thanks for the explanations. However I am not even a beginner in JS.
> Could you please do a quick demo on an html illustrating these points?

I just posted one in response to another message in this thread. See
if that helps.

Davide

projetmbc

unread,
Apr 21, 2011, 1:21:30 PM4/21/11
to MathJax Users
Thank you Davide for the corrections, and also for the advise about
the way to configure MathJax ! I'm going to correct all my snippets
(maybe I'll put some of it on my site in september).

Christophe.

PS: I'm ashamed for the stupid mistakes in my HTML-JS example. I'm not
a beginner...

Davide P. Cervone

unread,
Apr 21, 2011, 1:40:18 PM4/21/11
to mathja...@googlegroups.com
> Thank you Davide for the corrections, and also for the advise about
> the way to configure MathJax ! I'm going to correct all my snippets
> (maybe I'll put some of it on my site in september).

OK, great. Let us know if you do.

> PS: I'm ashamed for the stupid mistakes in my HTML-JS example. I'm not
> a beginner...

No problem. We all have to start somewhere. Glad we were able to
straighten it out.

Davide

Gökhan Sever

unread,
Apr 21, 2011, 4:21:29 PM4/21/11
to MathJax Users
Thanks Davide for the tool-tip example worked.

Could you give an example for the term referencing? as you explained
before:

Gökhan Sever

unread,
Apr 21, 2011, 4:25:01 PM4/21/11
to MathJax Users
Silly me, the usage is bluntly obvious:

\( k + \href{http://www.google.com}{y} \)

There clicking y goes to boogle :)

Davide P. Cervone

unread,
Apr 21, 2011, 4:28:10 PM4/21/11
to mathja...@googlegroups.com
There is nothing special about the HTML, as this is now purely in the
TeX code. For example:

... $ x \href{equality.html}{=} y $ ...

would cause the equal sign to be a link to the file equality.html
(relative to the directory containing the page you are viewing),
presumably an explanation of why the equality is true. On the other
hand,

... $ x \href{http://www.mathjax.org}{=} y $ ...

would link it to the MathJax home page.

Davide

Davide P. Cervone

unread,
Apr 21, 2011, 4:28:43 PM4/21/11
to mathja...@googlegroups.com
Right. Glad you figured it out.

Davide

dayalp...@gmail.com

unread,
Apr 21, 2011, 4:41:16 PM4/21/11
to mathja...@googlegroups.com
Davide, you pop these tricks like a magician. How can I learn or discover all the tricks? Is there some kind of documentation out there that I am missing?

I was experimenting with the code that can go inside <script type="text/x-mathjax-config"></script>. I noticed that you can insert actual javascript code unrelated to MathJax. Just wanted to know how MathJax handles the unrelated javascript code inside this config section.

d^3p


On Apr 21, 2011 12:27pm, "Davide P. Cervone" <dp...@union.edu> wrote:
> Indeed, I've tried the following code without success.
>
>
>
> Your code works for me except for two things:  the line break at
>
>
> ...?config=TeX-
> AMS-MML_HTMLorMML">
>
>
> must be removed (I assume that was added by a mailer somewhere along the line, and isn't in your original), and second, the minus sign at
>
>
> -
>
>
> at the end of the script must be removed.  That will cause the script to not compile, and so not be run (so \tooltip will not get to be defined).  You also have an extra at the end of the body, but that doesn't impede the function of the program.  There is also an extra {y} in the TeX code, but that is my fault as it was in the original example I gave above.  It is not needed and just confuses the issue, but doesn't cause problems.
>
>
> Finally, you should really follow the configuration guidelines at
>
>
> http://www.mathjax.org/docs/1.1/configuration.html#using-in-line-configuration-options
>
>
> and put your MathJax.Hub.Config call in a script with type="text/x-mathjax-config" that appear BEFORE the script that loads MathJax in order to guarantee that it is run at the proper time.  It probably won't affect this particular case, but it is bad practice to do it the way you have it as there are other cases where it wouldn't work.
>
>
> So a complete example would be
> _________________________________________________
>
>
>     
>     
>     Add Tooltip Macro
>
>     javascript"
>        src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
>     
>     
>     MathJax.Hub.Register.StartupHook("TeX Jax Ready",function () {
>       var TEX = MathJax.InputJax.TeX,
>           MML = MathJax.ElementJax.mml;
>       TEX.Definitions.macros.tooltip = "myToolTip";
>       TEX.Parse.Augment({
>         myToolTip: function (name) {
>           var arg = this.ParseArg(name), tip = this.ParseArg(name);
>           this.Push(MML.maction(arg,tip).With({actiontype: MML.ACTIONTYPE.TOOLTIP}));
>         }
>       });
>     });
>     
>     
>     
>       \( x + \tooltip{y}{\text{Bla, bla...}} \)
>     
>     
>

Gökhan Sever

unread,
Apr 21, 2011, 4:43:27 PM4/21/11
to MathJax Users


On Apr 21, 2:28 pm, "Davide P. Cervone" <d...@union.edu> wrote:
> There is nothing special about the HTML, as this is now purely in the  
> TeX code.  For example:
>
>         ... $ x \href{equality.html}{=} y $ ...
>
> would cause the equal sign to be a link to the file equality.html  
> (relative to the directory containing the page you are viewing),  
> presumably an explanation of why the equality is true.  On the other  
> hand,
>
>         ... $ x \href{http://www.mathjax.org}{=} y $ ...
>
> would link it to the MathJax home page.
>
> Davide

OK, This part was easy. How to reference within the same page?

Say our equation and the descriptions are shown as:
x + y = \rho

x : special constant
y : more special constant
\rho : the meaning of life.

all are linked from the given equation.

One use I see in this, I can automatically create a list of terms in
one html page.

CJVF

unread,
Apr 21, 2011, 9:00:50 PM4/21/11
to MathJax Users
Here's a page that might be useful:
http://www.onemathematicalcat.org/MathJaxDocumentation/toolTips.htm

The math-content tooltips (the first two examples) are positioned
quite far from the cursor, though;
so, some fix is required here.

-- Carol

Davide P. Cervone

unread,
Apr 23, 2011, 8:21:01 AM4/23/11
to mathja...@googlegroups.com
> Davide, you pop these tricks like a magician. How can I learn or
> discover all the tricks?

I'm not sure quite what you mean. Do you mean how to define your own
macros through JavaScript? Unfortunately, there is not documentation
on that at this point, so you would have to go with the examples I
gave, and looking at the source code for unpacked/jax/input/TeX/jax.js
or the extensions in unpacked/extensions/TeX.

> Is there some kind of documentation out there that I am missing?

If you mean the javascript macros, then no. If you mean the
configuration details, then there is a lot of documentation for that.
See

http://www.mathjax.org/docs/1.1/options/index.html

> I was experimenting with the code that can go inside <script
> type="text/x-mathjax-config"></script>. I noticed that you can
> insert actual javascript code unrelated to MathJax. Just wanted to
> know how MathJax handles the unrelated javascript code inside this
> config section.

Yes, the configuration block is normal JavaScript, and can include any
JavaScript that you want. The reason it is marked as text/x-mathjax-
config is so that MathJax can execute it at the correct time in its
startup process. But it runs as plain old JavaScript at that point.

Davide

Davide P. Cervone

unread,
Apr 23, 2011, 8:25:38 AM4/23/11
to mathja...@googlegroups.com

This is no longer a MathJax question but an HTML one. Internal links
within a page are done via URLs that contain "#name" where "name" is
the name of an anchor within the page. For example

<p> This is the equation $\href{#x-def}{x} + \href{#y-def}{y} =
\href{rho-def}{\rho}$.</p>
<p> And these are the definitions:</p>
<p><a name="x-def">$x$: Special constant.</a></p>
<p><a name="y-def">$y$: More special constant.</a></p>
<p><a name="rho-def">$\rho$: The meaning of life.</a></p>

But with such short definitions, a tooltip would probably be better.

Davide


Gökhan Sever

unread,
Apr 24, 2011, 5:27:00 PM4/24/11
to MathJax Users
Thanks for the help again.

For some reason $ signs aren't rendered on the screen.

This seems to work for me:

<html>
<head>
<title>Equation Term Referencing</title>
<script type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?
config=TeX-AMS-MML_HTMLorMML">
</script>
</head>
<body>
<div style="font-size: 500%;">
\( \href{#x-def}{x} + \href{#y-def}{y} = \href{#rho-def}{\rho} \)
<p><a name="x-def">\(x\): Special constant.</a></p>
<p><a name="y-def">\(y\): More special constant.</a></p>
<p><a name="rho-def">\(rho\): The meaning of life.</a></p>
</div>
</body>
</html>

Davide P. Cervone

unread,
Apr 25, 2011, 2:16:04 PM4/25/11
to mathja...@googlegroups.com
On Apr 24, 2011, at 5:27 PM, Gökhan Sever wrote:
> Thanks for the help again.
>
> For some reason $ signs aren't rendered on the screen.

This is because dollar signs are common enough in plain text that
using them for math delimiters could cause problems for people who are
not writing mathematics. So the default settings for the characters
to use for math-mode delimiters just include \(...\) and not $...$. See

http://www.mathjax.org/docs/1.1/upgrade.html#change-in-default-tex-delimiters
and
http://www.mathjax.org/docs/1.1/options/tex2jax.html

for details, and for examples of how to enable the single dollar sign
as a math delimiter.

Davide

Reply all
Reply to author
Forward
0 new messages