svg-output font family to match html font family?

[ivo...@gmail.com]

dear mathjax experts:

I would like to create SVG output with mathjax (phantomjs --- thanks davide c.) that matches the rest of my html text.  yes, I need SVG output, not HTML+CSS, for full embedding, even in javascript-free environments like epub2.

my main html document font must be a pretty common and/or almost-universal serif font.  right now, my linux chrome browser seems to like Giorgia.  in any case, I need a font that I can count on (or with close substitutes) everywhere.

so, ideally, the svg should look as similar to my main html document as possible.  right now, it's not.   it clashes badly.  the svg font is a lot fatter in styling than the rest of the text.  this can also be seen on the mathjax "try-out" web page itself.   can this font-matching be done?

how would I do this?  help appreciated.

/iaw

(I also may need \usepackage{mathastext.sty} , but this is a story for another day.) 

[Peter Krautzberger]

Hi Ivo,

> I would like to create SVG output with mathjax that matches the rest of my html text. 

For several technical reasons, MathJax only supports a couple of fonts options. So if you want to match regular text and math, your options are limited. 

From the MathJax documentation of the SVG output configuration options:

font: "TeX"

This is the font to use for rendering the mathematics. The possible values are TeX, STIX-Web, Asana-Math, Neo-Euler, Gyre-Pagella, Gyre-Termes and Latin-Modern. Note that not all mathematical characters are available in all fonts (e.g., Neo-Euler does not include italic characters), so some mathematics may work better in some fonts than in others. The STIX-Web font is the most complete.

STIX is close to Times New Roman and Asana Math close to Palatino.

>  the svg font is a lot fatter in styling than the rest of the text. 

On the same documentation page you will also find options to control the SVG rendering. Keep in mind that SVG rendering is not using fonts but SVG paths -- and browsers render SVG paths differently from fonts, so some difference is unavoidable.

> I also may need \usepackage{mathastext.sty

While font mixing of that type is in our backlog, there is no ETA for this feature.

Peter.

--
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.

[ivo welch]

thank you, peter. I had read this, but I cannot figure out where the

MathJax.Hub.Config({ SVG: { font:"Asana" } });

is supposed to go into the davide's phantomjs script. (most of it
enclosed for convenience below again.) admittedly, I know perl but
not javascript. Maybe at
"http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_SVG"
?

this is for a good cause. I plan to release a different type of LaTeX
*MARKUP* -> HTML converter soon. (we need it for publishing academic
finance journals.)

regards, /iaw

PS: it would be supercool if mathjax would also offer svg generation
as a simpler web service, where I would not need phantomjs, but I
would simply send a URL request with a LaTeX expression. this way, I
could use curl or wget, and not need phantomjs to begin with. this
should be easier on mathjax than the current interface.



#!/usr/local/bin/phantomjs
/***********************************************/

var page = require('webpage').create();
var system = require('system');

//
// Get arguments, and print usage if not enough
//
if (system.args.length === 1) {
console.log('Usage: '+system.args[0]+' [--display] equation');
phantom.exit();
}
var display = false, equation = system.args[1];
if (equation === "--display") {display = true; equation = system.args[2]}

//
// Set up equation mased on disiplay mode
//
equation = (display ? "\\["+equation+"\\]" : "\\("+equation+"\\)");

//
// Function to allow passing arguments to page.evaluate()
//
function evaluate(page, func) {
var args = [].slice.call(arguments, 2);
var fn = "function() {return
("+func.toString()+").apply(this,"+JSON.stringify(args)+")}";
return page.evaluate(fn);
}

//
// Open a page from the CDN so we can load MathJax into it (can't do
that from a blank page)
//
page.open("http://cdn.mathjax.org/mathjax/latest/test/examples.html",
function (status) {
if (status !== "success") {
console.log("Unable to access network");
} else {
//
// This gets called when MathJax is done
//
page.onAlert = function (msg) {
if (msg === "MathJax Done") {
console.log(page.evaluate(function () {
//
// Look up the SVG output and the font paths
// Hook the paths into the SVG output, and put the
// SVG element into a DIV so we can use innerHTML to serialize
// Add the XML heading, and touch up the SVG output
// (add newlines to make output prettier,
// add missing xmlns attribute,
// add xlink: before hrefs so they can find the paths)
// Then return the full SVG file.
//
var svg = document.getElementsByTagName("svg");
svg[1].insertBefore(svg[0].firstChild,svg[1].firstChild);
var div = document.createElement("div");
div.appendChild(svg[1]);
return [
'<?xml version="1.0" standalone="no"?>',
'<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">',
div.innerHTML.replace(/><([^/])/g,">\n<$1")
.replace(/(<\/[a-z]*>)(?=<\/)/g,"$1\n")
.replace(/<svg /,'<svg
xmlns="http://www.w3.org/2000/svg" ')
.replace(/<use ([^>]*)href/g,'<use $1xlink:href')
].join("\n");
}));
phantom.exit();
} else if (msg === "MathJax Timeout") {
console.log("Timed out waiting for MathJax");
phantom.exit();
} else {console.log(msg)}
}
//
// Clear the page and make it only include the math
//
evaluate(page,function (html) {document.body.innerHTML=html},equation);
//
// Load MathJax and queue the alert that tells PhantomJS to make
the final SVG file
//
page.evaluate(function () {
var script = document.createElement("script");
script.type = "text/x-mathjax-config";
script.text = "MathJax.Hub.Queue([alert,'MathJax Done'])";
document.head.appendChild(script);
var script = document.createElement("script");
script.type = "text/javascript";
script.src =
"http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_SVG";
document.head.appendChild(script);
setTimeout(function () {alert("MathJax Timeout")},10000); //
timeout after 10 seconds
});
}
});
----
Ivo Welch (ivo....@gmail.com)
http://www.ivo-welch.info/
J. Fred Weston Professor of Finance
Anderson School at UCLA, C519
Director, UCLA Anderson Fink Center for Finance and Investments
Free Finance Textbook, http://book.ivo-welch.info/
Editor, Critical Finance Review, http://www.critical-finance-review.org/

> You received this message because you are subscribed to a topic in the

> Google Groups "MathJax Users" group.

> To unsubscribe from this topic, visit
> https://groups.google.com/d/topic/mathjax-users/AhTLT5oh5Uk/unsubscribe.
> To unsubscribe from this group and all its topics, send an email to

[Peter Krautzberger]

Hi Ivo,

This needs to be in a mathjax configuration script. Basically, replicate the section

var script = document.createElement("script");
      script.type = "text/x-mathjax-config";
      script.text = "MathJax.Hub.Queue([alert,'MathJax Done'])";
      document.head.appendChild(script);

In the new copy, modify script.text = "...." to inject the configuration you prefer. 

You might want to look at https://github.com/gwicke/mathoid which is being developed for use at Wikipedia. In that setup, you'd just modify index.html.

> it would be supercool if mathjax would also offer svg generation

> as a simpler web service, where I would not need phantomjs, but I
> would simply send a URL request with a LaTeX expression. 

While we don't plan a webservice, we do plan to add a feature that would eliminate the need for phantomjs, making it work in nodejs, htmlunit etc directly. This might lead to a webservice elsewhere and other gadgets for production tool chains.

Peter.

PS: I would love to hear more about your direction at the journal you mentioned. Perhaps I can shoot you an email to talk off list? 

[ivo welch]

hi peter---(I dropped you a short email off-list.  I hope it did not end up in your spam filter.)

what does "inject the configuration" mean?  I tried 

      script.text = "MathJax.Hub.Config({  SVG: { font:'Asana' } }); MathJax.Hub.Queue([alert,'MathJax Done'])";

but that did not produce valid svg.   I tried

script.text = "MathJax.Hub.Config({  SVG: { font:'Asana' } })";

script.text =  "MathJax.Hub.Queue([alert,'MathJax Done'])";

which worked, but produced exactly the same output as the default.  could I buy another vowel here?  can you just give me the magic invokation to select, say, neo-euler or stix or asana?

regards,

/iaw

----

Ivo Welch (ivo....@gmail.com)

http://www.ivo-welch.info/

J. Fred Weston Professor of Finance

Anderson School at UCLA, C519

Director, UCLA Anderson Fink Center for Finance and Investments

Free Finance Textbook, http://book.ivo-welch.info/

Editor, Critical Finance Review, http://www.critical-finance-review.org/

[Peter Krautzberger]

Hi Ivo,

The first idea is the right one. But it's 'Asana-Math', not 'Asana'. (Your second idea does not work because the second script.text overwrites the first.)

Peter.

PS: Thanks for the other email.