41

I am using mathjax on my page, and i have read that this:

<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    "HTML-CSS": { scale: 175}
  });
</script>

Is supposed to make fonts bigger. But instead, all it does, is that it makes the container of mathjax equations bigger, but the fonts stay the same. Why is that? How to change font size?

ojek
  • 9,680
  • 21
  • 71
  • 110
  • Can you include enough code that people can reproduce your problem - i.e. a complete html that has a piece of text that doesn't change size? – Floris Sep 30 '13 at 03:43
  • The scale factor works as advertised for me. As Floris requests, a complete example would help. Also, you should indicate the browser and OS you are using, and their versions, in case it is browser specific. Also, if you have use the MathJax contextual menu to specify a scaling factor, that will override the one in the page. So you may want to remove the MathJax cookie from your browser and try it again. – Davide Cervone Sep 30 '13 at 20:37
  • Is it possible that the previous version of mathjax.js is still cached on the server? I have experimented with this, sometimes I see a change, sometimes not. – atmelino Apr 19 '14 at 19:37

10 Answers10

29

Well if you need a global re-size, here's how I did it through CSS.

.MathJax {
font-size: 1.3em;
}

I used 1.3 em, you can change it to better suit your needs.

Mohd Abdul Mujib
  • 13,071
  • 8
  • 64
  • 88
  • 6
    You might have to add important: `.MathJax { font-size: 1.3em !important; }` – Avatar Aug 15 '14 at 15:10
  • worked for me without the important tag, in other cases it may be really "important" to override the outcome.. :D thanks for pointing out though.. – Mohd Abdul Mujib Aug 16 '14 at 03:53
  • 2
    @EchtEinfachTV: +1 - didn't work for me without the `!important` so thanks for pointing that out – Jimbo Feb 07 '15 at 19:01
  • 3
    @Jimbo Note that it is recommended to scale mathjax using the config parameters, see here: http://stackoverflow.com/a/25329062/1066234 – Avatar Feb 09 '15 at 09:14
  • How comes it doesn't work for me? I'm using it in Angular. Anybody else has this problem? – newman Dec 09 '15 at 06:02
  • Interestingly, I achieved the desired function with the opposite change; I originally had .MathJax { font-size: 2em}, which made the container bigger but not the font. When I changed the scale in MathJax.Hub.Configure, I achieved the result I wanted, with the font itself changing size, rather than just the container. – userManyNumbers Jul 16 '17 at 11:32
28

Use \tiny{ }, \scriptsize{ }, \small{ }, \normal{ }, \large{ }, \Large{ }, \LARGE{ }, \huge{ }, \Huge{ }.

Balaj Khan
  • 2,490
  • 2
  • 17
  • 30
Gurjeet Singh
  • 597
  • 5
  • 13
12

You can change the size of the formulas globally if you load mathjax/latex in this way:

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  CommonHTML: {
    scale: 130
  }
});
</script>
<script type="text/javascript" async
src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML">
</script>
Stephan
  • 143
  • 1
  • 5
6

When you have some math inside a div:

<div id="some_math"> $$ x^2 $$</div>

you can change the font size simply by using CSS like this:

$("#some_math").css("font-size","150%");
Wojciech
  • 159
  • 2
  • 9
  • 1
    I am loading MathJax dynamically with JQuery's getScript(). Setting the CSS after the loading was the only thing that worked. – Avatar Aug 15 '14 at 15:12
6

MathJax 3.0.0:

<script>
    MathJax = {
        tex: {
            inlineMath: [['$', '$'], ['\\(', '\\)']]
        },
        chtml: {
            scale: 1.3
        },
        svg: {
            scale: 1.3
        }
    };
</script>
<script src="/js/mathjax/tex-chtml.js" id="MathJax-script" async></script>
retif
  • 1,495
  • 1
  • 22
  • 40
4

Seems like the <span> tag works for inline font adjustment:

<span style="font-size:2.1em; line-height:0%">$a-b$</span>

should nicely render "a-b" for Times font-family at 14px font-size.

Luqman Malik
  • 59
  • 7
  • Worked nice for me (making a fraction look similar to the other math). Though ```1.3em``` feels quite better unless you want it huge. – Rusca8 Sep 25 '20 at 13:16
4

Here are two options to change font size for a specific equation or portion of an equation.

  1. Use a .css class.

    \class{className}{}

The className is div class name that can be specified in css.

  1. Use Latex

\tiny{ }, \scriptsize{ }, \small{ }, \normal{ }, \large{ }, \Large{ }, \LARGE{ }, \huge{ }, \Huge{ }

If you want to change all equations globally MathJax prints inside of a div. Use css to edit the class font size. 

.MathJax {
    font-size: 12pt;
}

Finally if you could also edit the MathJax config to change fonts globally, but I prefer the css version because it allows you change font sizes for different screen sizes.

Matt
  • 1,388
  • 15
  • 16
3

You should add this to your CSS.

.MathJax_CHTML {
    font-size: 25px !important;
}
Ashwin
  • 7,277
  • 1
  • 48
  • 70
2

I tried numerous things, including modifying config/default.js

http://docs.mathjax.org/en/latest/options/index.html

or mathjax.js, none of them worked (I use Drupal 6 and therefore had to revert to MathJax 1.1)

Finally, based on Wojciech's answer, I found something that worked. Simply surround the Math code with a div like that:

<div style="font-size: 133%;">
<p>\begin{equation} \frac{\partial e_b}{\partial x^b} = &nbsp;&nbsp;\Gamma_{ab}^k &nbsp;e_k &nbsp; \end{equation}</p>
</div>
atmelino
  • 2,887
  • 2
  • 20
  • 15
1

Do not use css as the others are suggesting, especially if in combination with linebreaking. Mathjax calculates how much space it requires for linebreaking, so if you change its size afterwards, you can get chaotic results(overfloww, bad breaking, clipping etc)

Do it throught config or MML/Tex

Styling MathJax

user8972259
  • 21
  • 2