Skip to content

Rendering LaTeX syntax in attributes like buttons and alt tags

Jump to bottom Edit New page
Davide P. Cervone edited this page May 28, 2013 · 2 revisions

From https://groups.google.com/d/msg/mathjax-users/lJ3oNpewl7A/yVRVEKev16UJ

Hello,

Is it possible to convince MathJax to render LaTeX syntax that is written in HTML buttons and in HTML images? For example

<input type="button" value="$x+y$" />
<img src="...." alt="$x+y$" />

Regards, Branko

Part of the yoga of html (and, more generally, all sgml and xml languages) is that attribute values cannot contain markup.

So, absent a major shaking of the foundation, the answer is NO.

Bill

But javascript shakes that foundation. I think it's fairly safe to assume any page using MathJax has access to javascript so any attribute value can be extracted at will and stuck in some div somewhere and rendered. The div could be styled like a button and react to the same events as the original button.

David Carlisle

The design of markup organizes the way it is processed. Chaotic markup leads to chaotic processing.

I suppose mathjax could do something like this, but are you saying it should? That is, are you saying it should search for paired $ chars inside quoted attribute value strings ...

Notwithstanding the fact that for the particular example some conventional markup might accomplish the purpose intended, perhaps markup reminiscent of

style="color: rgb(555,777,999);"

like

   <input type="button" value="mathjax($x+y$)" />

would be tolerable markup, not that I'm suggesting it.

-- Bill

Branko,

There is a "button" example at the bottom of the page here (not sure it is described in any spec, but this page is valid HTML5). So you can probably do

<button> 
$x+y$ 
</button>

(edit the skipTags tex2jax configuration parameter if necessary)

I'm not sure what you want to do with your image example. The alt parameter is supposed to provide alternate text for an image not a complex math formula. Do you mean to use a formula as a tooltip instead (title attribute)? MathML has maction@actiontype=tooltip for that and there is a MathJax extension action.js to write <maction> from LaTeX. But I'm not sure how they can be mixed with HTML.

BTW, <input value="$x+y$" /> would essentially be

<maction actiontype="input"> 
<mi>x</mi><mo>+</mo><mi>y</mi> 
</maction>

However, maction@actiontype=input is not supported I think. Many people have asked this kind of editing feature and many people have been able to write such a MathJax-based editor. We have a basic example. So I think it would not be too difficult to implement maction@actiontype=input and allow it in action.js.

Frédéric Wang

As an example, the page I mentioned above uses images in formula using a background-image property on a <mspace> (maybe that can be done via <mglyph> but Firefox does not implement it and <mglyph> is not really intended to be the equivalent of <img> anyway).

MathML can be included in HTML and SVG (see [here](http://www.mozilla.org/projects/mathml/demo/extras.html but AFAIK there isn't a standard way to do the reverse inclusion (although I think some people use to do that).

Frédéric Wang

MathML3 suggests that the token elements are extended in any compound document type to allow the host markup.

HTML5 does this and most inline html is allowed inside <mtext> so <mfrac><mtext><svg>....</svg></mtext><mtext><img...></mtext></mfrac> is valid html5 with html and svg in mathml.

Of course, saying it is valid isn't necessarily the same as saying it works everywhere:-)

David

MathJax doesn't allow the mixing of HTML or SVG within MathML (except within <semantics> elements). Perhaps it can be done in the future, but currently it isn't.

Davide

Fred beat me to the <button> suggestion. That should work for you, and does not require any change to skipTags.

@Fred, you are right that actiontype="input" isn't implemented, mostly because it is difficult to support in all input modes. For example, in NativeMML mode it would require the native MathML implementations to support it, and I don't think any do yet. For SVG output, it would require the use of foreignObject in order to embed some HTML form elements within the SVG, but IE doesn't support foreignObject in its implementation (and apparently isn't going to), and as I recall there were problems using it in Opera. So it is not clear to me how easy it would be to add support for actiontype="input" at this point.

There is an experimental extension that provides this type of functionality in the browsers that support it.

Davide

Thank you for the information, David. I think that works in Firefox. The Mozilla MathML demo pages have recently been rewritten to remove the invalid markup, but I guess this could now be fixed with the MathML3 syntax you mentioned.

Fred

David,

The old mixing HTML-in-MathML demos are back. There is also a new SVG-in-MathML demo here:

The pages validate with http://validator.w3.org/nu/ except for the title attribute that should be changed to maction@tooltip when Firefox supports it.

Add a custom sidebar
Clone this wiki locally