Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Unwanted extra space by \newcommand macro in MathJax

Tags:

html

mathjax

When I use a LaTeX macro (\newcommand for example), it occupies space in the page. Here is an example code to demonstrate the issue I am facing.

URL: http://jsfiddle.net/Lkeus/

Code:

<!DOCTYPE html> 
<html> 
<head> 
<title>MathJax Example</title> 
<script 
type="text/javascript" 
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=default"> 
</script> 
</head> 
<body> 
<p> 
\(\newcommand{\N}{\mathbb{N}}\) 
\(\newcommand{\R}{\mathbb{R}}\) 
\(\newcommand{\Z}{\mathbb{Z}}\) 
Let \(x \in \N\). Then \(x^2\) is called a perfect square. 
</p> 
<p> 
Let \(x \in \N\). Then \(x^2\) is called a perfect square. 
</p> 
</body> 
</html> 

Here is the output in its own page: http://fiddle.jshell.net/Lkeus/show/

In the output, you can see that the first line begins after some space. This space comes from the use of macros there. Firebug shows this code created by MathJax as the cause of the extra space:

<span class="math" id="MathJax-Span-1"> 
<span style="display: inline-block; position: relative; width: 0em; 
height: 0pt; font-size: 130%;"> 
<span style="position: absolute; top: -1em; left: 0em; clip: 
rect(0.856em, 1000em, 1.144em, -0.433em);"> 
<span class="mrow" id="MathJax-Span-2"></span> 
<span style="display: inline-block; width: 0pt; height: 1em;"></span> 
</span></span> 
<span style="border-left: 0em solid; display: inline-block; overflow: 
hidden; width: 0pt; height: 0em; vertical-align: 0em;"></span></span>

How can I get rid of this extra space?

like image 288
Lone Learner Avatar asked Feb 16 '12 21:02

Lone Learner


1 Answers

I learnt a few solutions to this problem from the MathJax community.

It is possible to minimize the whitespace due to \newcommand by putting all the \newcommands into a single \(...\). Example: http://jsfiddle.net/qQ9P9/

\(\newcommand{\N}{\mathbb{N}}
\newcommand{\R}{\mathbb{R}}
\newcommand{\Z}{\mathbb{Z}}\)

It is possible to remove all the extra whitespace completely by defining the macros in the <head> section of the HTML. Example: http://jsfiddle.net/tVyJz/

<script type="text/x-mathjax-config"> 
MathJax.Hub.Config({ 
    TeX: { 
        Macros: { 
            N: "\\mathbb{N}", 
            R: "\\mathbb{R}", 
            Z: "\\mathbb{Z}" 
        } 
    } 
}); 
</script> 
like image 104
Lone Learner Avatar answered Oct 06 '22 01:10

Lone Learner