Images in MathJax Equations
1,772 views
Skip to first unread message
Christopher Olah
Aug 16, 2014, 4:36:04 PM8/16/14
to mathja...@googlegroups.com
Hello,
I'd like to embed images in MathJax equations. I've been trying to accomplish this using \style and CSS.
You can see an example of my best attempt in this working draft of a blog post I'm writing: http://colah.github.io/posts/2014-07-Groups-Convolution/ (this is unpublished; please don't post it elsewhere). See the squares with an "F" in them in the fourth paragraph and onwards.
This works in Chrome (version 35 and others, under Ubuntu Linux), but not in Firefox (version 20 and others, under Ubuntu Linux). I don't know much about CSS or web development in general, and am pretty over my head when it comes to debugging this.
Here's the code used in my draft blog post:
\newcommand{sq}[1]{
~\raise{-1pt}{
\style{height: 15px; content: url('img/sqF-#1.png')}{
{~\over~}\over~
}
}~
}
I try to make an empty latex equation of the desired size with tildes and \over, and then use CSS to insert an image.
Thank you in advance for any help!
I'd like to embed images in MathJax equations. I've been trying to accomplish this using \style and CSS.
You can see an example of my best attempt in this working draft of a blog post I'm writing: http://colah.github.io/posts/2014-07-Groups-Convolution/ (this is unpublished; please don't post it elsewhere). See the squares with an "F" in them in the fourth paragraph and onwards.
This works in Chrome (version 35 and others, under Ubuntu Linux), but not in Firefox (version 20 and others, under Ubuntu Linux). I don't know much about CSS or web development in general, and am pretty over my head when it comes to debugging this.
Here's the code used in my draft blog post:
\newcommand{sq}[1]{
~\raise{-1pt}{
\style{height: 15px; content: url('img/sqF-#1.png')}{
{~\over~}\over~
}
}~
}
I try to make an empty latex equation of the desired size with tildes and \over, and then use CSS to insert an image.
Thank you in advance for any help!
Chris
Davide P. Cervone
Aug 17, 2014, 8:05:17 PM8/17/14
to mathja...@googlegroups.com
I think this is the wrong approach and will probably lead to problems in the long run. MathJax's support for CSS is limited, and this probably won't work in any but the HTML-CSS output, and not very well there. Since MathJax converts everything to MathML internally, a better solution would be to use MathML's mglyph tag to implement this, which is MathML's way of including images. Here is some code that adds an \img macro for inserting images into a MathJax expression. It takes 4 arguments: the URL for the image, the vertical alignment value, the width, and the height of the image. Any of the final there can be blank in order to use the default. WIth no vertical-align value, the image will sit on the baseline. With not width or height, the image will be its natural size. With one of the width or height specified, the image will be scaled to match that dimension while keeping the aspect ratio the same. If both are given, then image will be scaled to match both dimensions, without regard to the original aspect ratio.
<html>
<head>
<title>Add \img command</title>
<script type="text/x-mathjax-config">
MathJax.Hub.Register.StartupHook("TeX Jax Ready",function () {
var TEX = MathJax.InputJax.TeX,
MML = MathJax.ElementJax.mml;
var CheckDimen = function (dimen) {
if (dimen === "" ||
dimen.match(/^\s*([-+]?(\.\d+|\d+(\.\d*)?))\s*(pt|em|ex|mu|px|mm|cm|in|pc)\s*$/))
return dimen.replace(/ /g,"");
TEX.Error("Bad dimension for image: "+dimen);
};
TEX.Definitions.macros.img = "myImage";
TEX.Parse.Augment({
myImage: function (name) {
var src = this.GetArgument(name),
valign = CheckDimen(this.GetArgument(name)),
width = CheckDimen(this.GetArgument(name)),
height = CheckDimen(this.GetArgument(name));
var def = {src:src};
if (valign) {def.valign = valign}
if (width) {def.width = width}
if (valign) {def.height = height}
this.Push(this.mmlToken(MML.mglyph().With(def)));
}
});
});
</script>
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML"></script>
</head>
<body>
This is math with an image: \[x +
\img{http://www.math.union.edu/~dpvc/math/courses/MTH015/JPG/Hyperboloids.jpg}{-2em}{}{4.5em}
+ y\]
</body>
</html>
<head>
<title>Add \img command</title>
<script type="text/x-mathjax-config">
MathJax.Hub.Register.StartupHook("TeX Jax Ready",function () {
var TEX = MathJax.InputJax.TeX,
MML = MathJax.ElementJax.mml;
var CheckDimen = function (dimen) {
if (dimen === "" ||
dimen.match(/^\s*([-+]?(\.\d+|\d+(\.\d*)?))\s*(pt|em|ex|mu|px|mm|cm|in|pc)\s*$/))
return dimen.replace(/ /g,"");
TEX.Error("Bad dimension for image: "+dimen);
};
TEX.Definitions.macros.img = "myImage";
TEX.Parse.Augment({
myImage: function (name) {
var src = this.GetArgument(name),
valign = CheckDimen(this.GetArgument(name)),
width = CheckDimen(this.GetArgument(name)),
height = CheckDimen(this.GetArgument(name));
var def = {src:src};
if (valign) {def.valign = valign}
if (width) {def.width = width}
if (valign) {def.height = height}
this.Push(this.mmlToken(MML.mglyph().With(def)));
}
});
});
</script>
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML"></script>
</head>
<body>
This is math with an image: \[x +
\img{http://www.math.union.edu/~dpvc/math/courses/MTH015/JPG/Hyperboloids.jpg}{-2em}{}{4.5em}
+ y\]
</body>
</html>
To use this in your own site, take the first script tag an add it to your page just before the script that loads MathJax.js.
@pkra, perhaps this should be made into an extension for the contributed extensions repository?
Davide
--
You received this message because you are subscribed to the Google Groups "MathJax Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to mathjax-user...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
Christopher Olah
Aug 19, 2014, 12:38:36 AM8/19/14
to mathja...@googlegroups.com
Thank you Davide! That's lovely!
Chris
> You received this message because you are subscribed to a topic in the
> https://groups.google.com/d/topic/mathjax-users/SXjY3rQXOzc/unsubscribe.
> To unsubscribe from this group and all its topics, send an email to
Chris
> Google Groups "MathJax Users" group.
> To unsubscribe from this topic, visit
> https://groups.google.com/d/topic/mathjax-users/SXjY3rQXOzc/unsubscribe.
> To unsubscribe from this group and all its topics, send an email to
Peter Krautzberger
Aug 19, 2014, 4:19:17 AM8/19/14
to mathja...@googlegroups.com
@dpvc yes, was thinking the same thing. I'll take care of it.
Peter Krautzberger
Aug 30, 2014, 8:06:02 AM8/30/14
to mathja...@googlegroups.com
Added this https://github.com/mathjax/MathJax-third-party-extensions/pull/13 and pushed it to the CDN.
Peter.
Reply all
Reply to author
Forward
0 new messages