Server-size SVG command line tool?
1,465 views
Skip to first unread message
Belleve Invis
May 9, 2012, 9:58:32 AM5/9/12
to mathja...@googlegroups.com
Now Mathjax has the SVG output so that I can make a server-side node-based command line tool now?
node jax <equation>
node jax --display <equation>
Davide P. Cervone
May 10, 2012, 7:06:25 AM5/10/12
to mathja...@googlegroups.com
This could potentially be done, provided your equations don't use
characters outside of the MathJax fonts, but it would probably take
some work on your part to get it to go. In particular, MathJax
expects there to be a DOM to work with, and I don't think node.js has
that by default. There are some libraries for that, but I'm not sure
of the implications for them. The DOM access is very heavily tied to
the way the MathJax Hub works, so what you probably need to do is pull
out the TeX input jax and the SVG output jax and combine them "by
hand" rather than through the HUB. But that would require some pretty
intimate knowledge of the internals of MathJax, so is not a straight-
forward process. It certainly could be done, but is not as simple as
just running MathJax in node.js, I think.
Davide
characters outside of the MathJax fonts, but it would probably take
some work on your part to get it to go. In particular, MathJax
expects there to be a DOM to work with, and I don't think node.js has
that by default. There are some libraries for that, but I'm not sure
of the implications for them. The DOM access is very heavily tied to
the way the MathJax Hub works, so what you probably need to do is pull
out the TeX input jax and the SVG output jax and combine them "by
hand" rather than through the HUB. But that would require some pretty
intimate knowledge of the internals of MathJax, so is not a straight-
forward process. It certainly could be done, but is not as simple as
just running MathJax in node.js, I think.
Davide
Peter Krautzberger
May 14, 2012, 9:50:43 AM5/14/12
to MathJax Users
@Belleve: you could look into http://phantomjs.org/ which is a
headless webkit browser with javascript API.
It's extra easy to use with pjscrape (https://github.com/nrabinowitz/
pjscrape). Here's an example configuration for scraping the MathML
from the test TeX-sample that comes with MathJax:
pjs.config({
format: 'raw'
});
pjs.addSuite({
url: 'http://cdn.mathjax.org/mathjax/latest/test/sample-tex.html',
ready: function() {
return $('#MathJax-Span-19').length > 0;
},
scraper: function() {
return $('#MathJax-Element-3-Frame').html();
}
});
I hope this can get you started. There is a node.js bridge for
phantom.js at https://github.com/sgentle/phantomjs-node, but I haven't
tried it.
You might also want to look at https://github.com/tmpvar/jsdom (a dom
implementation for node.js) and https://github.com/nick/ZombieJS (a
headless browser for node.js).
I didn't have any luck getting either of them to work though, so
please share if you do.
Peter.
headless webkit browser with javascript API.
It's extra easy to use with pjscrape (https://github.com/nrabinowitz/
pjscrape). Here's an example configuration for scraping the MathML
from the test TeX-sample that comes with MathJax:
pjs.config({
format: 'raw'
});
pjs.addSuite({
url: 'http://cdn.mathjax.org/mathjax/latest/test/sample-tex.html',
ready: function() {
return $('#MathJax-Span-19').length > 0;
},
scraper: function() {
return $('#MathJax-Element-3-Frame').html();
}
});
I hope this can get you started. There is a node.js bridge for
phantom.js at https://github.com/sgentle/phantomjs-node, but I haven't
tried it.
You might also want to look at https://github.com/tmpvar/jsdom (a dom
implementation for node.js) and https://github.com/nick/ZombieJS (a
headless browser for node.js).
I didn't have any luck getting either of them to work though, so
please share if you do.
Peter.
Peter Krautzberger
May 14, 2012, 9:37:43 PM5/14/12
to MathJax Users
I experimented with zombie.js a bit more (needed the latest node.js to
get the latest zombie.js...)
I threw the following at node.js:
var zombie = require("zombie");
var browser = new zombie.Browser({ debug: true, runScripts: true});
browser.visit("http://cdn.mathjax.org/mathjax/latest/test/sample-
tex.html").
then(function() {
return browser.wait(10000);
}).
then(function() {
console.log(browser.html())});
This got me to an html output that had (what seemed like) the right
kind of css added but the following body:
<body> <p>
When $a \ne 0$, there are two solutions to \(ax^2 + bx + c = 0\) and
they are
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
</p>
<div id="MathJax_Font_Test" style="">() [] {} </div>
</body>
which leaves me confused :( How come I get this far, but no further?
(increasing the browser.wait does not help, but some waiting seems
necessary)
Peter.
On May 14, 9:50 am, Peter Krautzberger <p.krautzber...@googlemail.com>
wrote:
> @Belleve: you could look intohttp://phantomjs.org/ which is a
get the latest zombie.js...)
I threw the following at node.js:
var zombie = require("zombie");
var browser = new zombie.Browser({ debug: true, runScripts: true});
browser.visit("http://cdn.mathjax.org/mathjax/latest/test/sample-
tex.html").
then(function() {
return browser.wait(10000);
}).
then(function() {
console.log(browser.html())});
This got me to an html output that had (what seemed like) the right
kind of css added but the following body:
<body> <p>
When $a \ne 0$, there are two solutions to \(ax^2 + bx + c = 0\) and
they are
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
</p>
<div id="MathJax_Font_Test" style="">() [] {} </div>
</body>
which leaves me confused :( How come I get this far, but no further?
(increasing the browser.wait does not help, but some waiting seems
necessary)
Peter.
On May 14, 9:50 am, Peter Krautzberger <p.krautzber...@googlemail.com>
wrote:
> @Belleve: you could look intohttp://phantomjs.org/ which is a
> headless webkit browser with javascript API.
>
> It's extra easy to use with pjscrape (https://github.com/nrabinowitz/
> pjscrape). Here's an example configuration for scraping the MathML
> from the test TeX-sample that comes with MathJax:
>
> pjs.config({
> format: 'raw'
>
> });
>
> pjs.addSuite({
> url: 'http://cdn.mathjax.org/mathjax/latest/test/sample-tex.html',
> ready: function() {
> return $('#MathJax-Span-19').length > 0;
> },
> scraper: function() {
> return $('#MathJax-Element-3-Frame').html();
> }
>
> });
>
> I hope this can get you started. There is a node.js bridge for
> phantom.js athttps://github.com/sgentle/phantomjs-node, but I haven't
>
> It's extra easy to use with pjscrape (https://github.com/nrabinowitz/
> pjscrape). Here's an example configuration for scraping the MathML
> from the test TeX-sample that comes with MathJax:
>
> pjs.config({
> format: 'raw'
>
> });
>
> pjs.addSuite({
> url: 'http://cdn.mathjax.org/mathjax/latest/test/sample-tex.html',
> ready: function() {
> return $('#MathJax-Span-19').length > 0;
> },
> scraper: function() {
> return $('#MathJax-Element-3-Frame').html();
> }
>
> });
>
> I hope this can get you started. There is a node.js bridge for
Davide P. Cervone
May 15, 2012, 7:14:56 PM5/15/12
to mathja...@googlegroups.com
Well, the presence of the MathJax_Font_Test div at the bottom suggests
that the HTML-CSS Jax is running and trying to locate a font (and the
string that it is using says it is one of the stretchy delimiter
fonts, presumably for the square root surd, which I believe is the
Size1 version). So it may be that MathJax is failing at that point
for some reason. Perhaps zombie doesn't handle web fonts?
Maybe you want to try using the SVG output jax instead of the HTML-CSS
one, since that will not have to deal with font issues, and is what
Belleve is looking for in the end anyway. There isn't a predefined
sample file for that, so you will need to make one yourself that uses
the TeX-AMS-MML_SVG configuration, for example.
Davide
that the HTML-CSS Jax is running and trying to locate a font (and the
string that it is using says it is one of the stretchy delimiter
fonts, presumably for the square root surd, which I believe is the
Size1 version). So it may be that MathJax is failing at that point
for some reason. Perhaps zombie doesn't handle web fonts?
Maybe you want to try using the SVG output jax instead of the HTML-CSS
one, since that will not have to deal with font issues, and is what
Belleve is looking for in the end anyway. There isn't a predefined
sample file for that, so you will need to make one yourself that uses
the TeX-AMS-MML_SVG configuration, for example.
Davide
Peter Krautzberger
May 15, 2012, 8:05:01 PM5/15/12
to mathja...@googlegroups.com
Ah, sorry. I should have mentioned that I tried SVG and NativeMML output as well -- with the same result (well, without the MathJax_Font_Test-div). I'll experiment some more when I have time.
Peter.
Peter.
Peter Krautzberger
May 15, 2012, 8:05:13 PM5/15/12
to mathja...@googlegroups.com
Oh, and thanks, Davide :)
Davide P. Cervone
May 18, 2012, 6:18:21 PM5/18/12
to mathja...@googlegroups.com
Belleve:
While Peter is working on a node.js version of the script you want, I
decided to try a phantom.js version, and was able to get it to work
out pretty easily. I'm not sure if that fits your bill or not, but
I've attached it in case it helps. The syntax is
phantom.js jax.js [--display] 'TeX code' > file.svg
where 'TeX code' is the math to be processed, and file.svg is a stand-
alone SVG file that will contain the typeset math.
There are a couple of issues that you need to be aware of if you try
to do something similar in node.js. These are taken care of in the
onAlert function in this script, so look there for details. The first
issue is that MathJax uses a hidden svg element at the top of the page
to store the character paths, and then refers to these within the
individual equations (in order to not have to duplicate paths). That
means you have to combine the two pieces in order to form a single svg
file. You also need to add the xmlns attribute for the svg element
since MathJax uses createElementNS to associate the namespace and
apparently WebKit doesn't attach the namespace in its innerHTML
output. Finally, the references to the character paths use xlink, but
in HTML5, namespaces are removed, so you have to put back the "xlink:"
in front of all the hrefs in the <use> elements in order to get the
final xml to work properly as a stand-alone svg file.
This works pretty well, but there is not much error checking, so if
something goes wrong with the MathJax processing, I'm not sure what
the results will be. The one thing I don't like about it is that
phantom.js has a security restriction that won't allow a local file to
load content from a remote site, so if I open a blank page, I can't
add MathJax to it from the CDN. So I end up loading a page from the
cdn initially, and replace its contents with the math that I want to
convert. A bit of a hack, but it works, and since we already need
access to the CDN anyway, I don't feel too bad about that. I did try
setting the localToRemoteUrlAccessEnabled property, but it didn't seem
to help; perhaps I didn't do it properly, but I didn't spend a lot of
time trying to fix it once I worked out the details.
Of course, you could arrange to use a local copy of MathJax rather
than the CDN copy, and that would probably speed up your processing,
as this would require that you load MathJax for each equation (no
caching is performed). It would probably be better to make a version
that takes a file containing the equations that you want processed,
and produces a series of svg files, one for each equation, so that
MathJax needs to be loaded only once. But this is at least a starting
point.
Hope that helps.
Davide
On May 9, 2012, at 9:58 AM, Belleve Invis wrote:
While Peter is working on a node.js version of the script you want, I
decided to try a phantom.js version, and was able to get it to work
out pretty easily. I'm not sure if that fits your bill or not, but
I've attached it in case it helps. The syntax is
phantom.js jax.js [--display] 'TeX code' > file.svg
where 'TeX code' is the math to be processed, and file.svg is a stand-
alone SVG file that will contain the typeset math.
There are a couple of issues that you need to be aware of if you try
to do something similar in node.js. These are taken care of in the
onAlert function in this script, so look there for details. The first
issue is that MathJax uses a hidden svg element at the top of the page
to store the character paths, and then refers to these within the
individual equations (in order to not have to duplicate paths). That
means you have to combine the two pieces in order to form a single svg
file. You also need to add the xmlns attribute for the svg element
since MathJax uses createElementNS to associate the namespace and
apparently WebKit doesn't attach the namespace in its innerHTML
output. Finally, the references to the character paths use xlink, but
in HTML5, namespaces are removed, so you have to put back the "xlink:"
in front of all the hrefs in the <use> elements in order to get the
final xml to work properly as a stand-alone svg file.
This works pretty well, but there is not much error checking, so if
something goes wrong with the MathJax processing, I'm not sure what
the results will be. The one thing I don't like about it is that
phantom.js has a security restriction that won't allow a local file to
load content from a remote site, so if I open a blank page, I can't
add MathJax to it from the CDN. So I end up loading a page from the
cdn initially, and replace its contents with the math that I want to
convert. A bit of a hack, but it works, and since we already need
access to the CDN anyway, I don't feel too bad about that. I did try
setting the localToRemoteUrlAccessEnabled property, but it didn't seem
to help; perhaps I didn't do it properly, but I didn't spend a lot of
time trying to fix it once I worked out the details.
Of course, you could arrange to use a local copy of MathJax rather
than the CDN copy, and that would probably speed up your processing,
as this would require that you load MathJax for each equation (no
caching is performed). It would probably be better to make a version
that takes a file containing the equations that you want processed,
and produces a series of svg files, one for each equation, so that
MathJax needs to be loaded only once. But this is at least a starting
point.
Hope that helps.
Davide
On May 9, 2012, at 9:58 AM, Belleve Invis wrote:
anton...@gmail.com
Mar 5, 2013, 4:50:07 PM3/5/13
to mathja...@googlegroups.com
Hi!
Thanks to these posts I managed to implement a bit faster SVG latex rendering using MathJax and phantomjs.
To avoid 'cold start', I used phantomjs's web service and MathJax feature for re-rendering mathematics on the same page.
Thanks all,
Anton
Davide P. Cervone
Mar 6, 2013, 10:08:00 AM3/6/13
to mathja...@googlegroups.com
Very cool! Thanks for sharing your work.
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/groups/opt_out.
Peter Krautzberger
Mar 6, 2013, 4:56:40 PM3/6/13
to mathja...@googlegroups.com
I'll second that -- very handy!
Andrew Cowie
Mar 7, 2013, 4:57:46 AM3/7/13
to mathja...@googlegroups.com
On Tue, 2013-03-05 at 13:50 -0800, anton...@gmail.com wrote:
> Thanks to these posts I managed to implement a bit faster SVG latex
> rendering using MathJax and phantomjs.
Out of curiousity, what is tex specific about what you implemented?
> Thanks to these posts I managed to implement a bit faster SVG latex
> rendering using MathJax and phantomjs.
AfC
Sydney
anton...@gmail.com
Mar 8, 2013, 11:29:04 AM3/8/13
to mathja...@googlegroups.com
On Thursday, 7 March 2013 10:57:46 UTC+1, Andrew Cowie wrote:
Out of curiousity, what is tex specific about what you implemented?
Actually nothing :) Thanks for mentioning.
I tested it using input/TeX jax and that's all.
Message has been deleted
jiazh...@gmail.com
Jul 22, 2013, 6:22:30 AM7/22/13
to mathja...@googlegroups.com
It seems I find the way.
Though I don't know it clearly, I can generate SVG through your script.
It is great.
Zhaohan
在 2012年5月19日星期六UTC+2上午12时18分21秒，Davide Cervone写道：
在 2012年5月19日星期六UTC+2上午12时18分21秒，Davide Cervone写道：
jiazh...@gmail.com
Jul 22, 2013, 6:27:29 AM7/22/13
to mathja...@googlegroups.com, anton...@gmail.com
Hi Anton,
I tried your script. But there comes the "SyntaxError: parse error".
I am new to javascript. I wonder know how you transmit tex to svg by using your code. Could you give some steps?
Thank you!
Anton Grbin
Jul 28, 2013, 8:26:58 AM7/28/13
to jiazh...@gmail.com, mathja...@googlegroups.com
Hi!
I wrote a small wiki that explains usage of svgtex.
Cheers!
Anton
danielca...@gmail.com
Feb 12, 2017, 8:24:26 AM2/12/17
to MathJax Users, jiazh...@gmail.com, anton...@gmail.com
ANton,
Is this still running?
I got an error on the installation....
pi@raspberrypi:~ $ cd ~
pi@raspberrypi:~ $ wget https://phantomjs.googlecode.com/files/phantomjs-1.9.1-linux-$(arch).tar.bz2 -O - | tar xjf -
--2017-02-12 08:22:35-- https://phantomjs.googlecode.com/files/phantomjs-1.9.1-linux-armv6l.tar.bz2
Resolving phantomjs.googlecode.com (phantomjs.googlecode.com)... 173.194.197.82, 2607:f8b0:4001:c1b::52
Connecting to phantomjs.googlecode.com (phantomjs.googlecode.com)|173.194.197.82|:443... connected.
HTTP request sent, awaiting response... 404 Not Found
2017-02-12 08:22:36 ERROR 404: Not Found.
bzip2: Compressed file ends unexpectedly;
perhaps it is corrupted? *Possible* reason follows.
bzip2: Inappropriate ioctl for device
Input file = (stdin), output file = (stdout)
It is possible that the compressed file(s) have become corrupted.
You can use the -tvv option to test integrity of such files.
You can use the `bzip2recover' program to attempt to recover
data from undamaged sections of corrupted files.
Please let me know.
Cheers,
Daniel
Peter Krautzberger
Feb 13, 2017, 3:42:44 AM2/13/17
to mathja...@googlegroups.com
Hi,
You might want to look into the mathjax-node, http://github.com/mathjax/mathjax-node. Tim Arnold's lightweight mathjax-server might also help.
Regards,
Peter.
--
You received this message because you are subscribed to the Google Groups "MathJax Users" group.
For more options, visit https://groups.google.com/d/optout.To unsubscribe from this group and stop receiving emails from it, send an email to mathjax-users+unsubscribe@googlegroups.com.
Reply all
Reply to author
Forward
0 new messages