Font size is bigger while displaying in Chrome
Sanjay Vel
We modified the styles element in default.js to modify some of the
display settings. As you see below, the font-size has been set to 13px
which causes MathJax to render properly in Firefox (with 13px) but a
much higher font size in Chrome.
If we remove the font-size, it appears properly in Chrome but shows up
smaller in Firefox.
1. What would be the right way to manage the font-size, so that it
appears properly on all browsers?
2. What would be the preferred mechanism to add custom changes to
MathJax (such as the one given below), so that we don't break much on
a future upgrade.
//
// This allows you to change the CSS that controls the menu
// appearance. See the extensions/MathMenu.js file for details
// of the default settings.
//
styles : {
".MathJax" : {
"font-family" : "Arial",
"font-size": "50%"
}
}
Frédéric WANG
I don't know whether MathJax has something to select the style according to the browser, but it should be doable by modifying the MathJax configuration object with some javascript. Ideally, the rendering should only depend on the CSS code, not on the browser you are using, so maybe it is best to see where this problem comes from before.
Do you mean "13px" (pixels) or "13pt"? Some browsers have a minimum font size in their options and this could explain why the rendering is different.
Davide P. Cervone
> display settings. As you see below, the font-size has been set to 13px
> which causes MathJax to render properly in Firefox (with 13px) but a
> much higher font size in Chrome.
>
> If we remove the font-size, it appears properly in Chrome but shows up
> smaller in Firefox.
The font size is set dynamically by MathJax to try to match the
surrounding text properly, so you should not be setting the font-size
for MathJax explicitly. If that isn't happening properly, I would
like to see the situation where it fails so that the font-size-
matching can be improved. It may be that other CSS on the page is
interfering with that, so I would need to see a complete page where
the problem exists. Can you provide a URL for one?
> 1. What would be the right way to manage the font-size, so that it
> appears properly on all browsers?
You should set the "scale" parameter in the HTML-CSS section of your
configuration rather than using CSS directly if you want to change the
size of the mathematics relative to the surrounding text. You should
not set font-size directly, as this will almost surely cause MathJax
to fail.
In Firefox, are you using native MathML output, or the HTML-CSS
output? In my experience, Firefox's MathML output tends to be smaller
than I would like it to be, and you may be experiencing that as well.
If that is the case, you can set the "scale" parameter in the
NativeMML section of your configuration to adjust the size of the
mathematics that is rendered as native MathML.
> 2. What would be the preferred mechanism to add custom changes to
> MathJax (such as the one given below), so that we don't break much on
> a future upgrade.
>
> //
> // This allows you to change the CSS that controls the menu
> // appearance. See the extensions/MathMenu.js file for details
> // of the default settings.
> //
> styles : {
> ".MathJax" : {
> "font-family" : "Arial",
> "font-size": "50%"
> }
> }
It is correct to make changes using the styles settings, but from the
comment that is part of your code block, it looks like you have set
this in the MathMenu section of your configuration. That will make
this change take effect only when the MathMenu is loaded (which may
not be all the time). You should put global changes in the global
"styles" block that is in the main configuration section.
But you should not set font parameters on the .MathJax class, as these
are managed internally by MathJax. Setting the font-size, for
example, will cause MathJax to fail to measure the sizes of the
typeset mathematics properly, and it will leave the wrong amount of
space for the typeset mathematics. You should use the scale
configuration parameters as described above.
Davide
Sanjay Vel
the right way to control the font size. But i want to adjust this
parameter only for chrome browser. I did like this in local.js
MathJax.Hub.Config({
"HTML-CSS": {
scale: {
prefer: {
Firefox: 100,
Chrome: 50,
Opera: 100
}
}
}
});
I also included this file in config.js, But I couldn't find any change
in the browser. Is this the right way? else How to adjust this
parameter in a browser specific fashion?
Thanks for all your support.
Davide P. Cervone
browser-by-browser basis. If Chrome is picking the wrong size, then
that is a problem that needs to be fixed. Can you point me to a page
that exhibits the size problem? (I.e., where Firefox picks the right
font size, but Chrome makes it twice as large as it should be?) Thanks.
To configure the scale differently for Chrome, use
MathJax.Hub.Config({
"HTML-CSS": {
scale: (MathJax.Hub.Browser.isChrome ? 50 : 100)
}
});
but I don't recommend doing that. There is probably something else
that is wrong that is causing the problem, and we should identify that
and fix it rather than hack the scaling factor without knowing what is
causing it. For example, have you checked that this happens in ALL
copies of Chrome on all operating systems? Does it also happen for
Safari (since they use essentially the same rendering engine)?
What version of Chrome are you using, and what OS?
Davide
Sanjay Vel
Davide P. Cervone
questions from the previous message, and help us track down what is
actually behind this problem. MathJax should not be using a
significantly different size in Chrome than in Firefox, and I would
like to fix the problem rather than patch it with a scaling hack.
Would you be willing to help with that? If so, can you respond to the
questions from y previous message?
Davide
On May 14, 2011, at 2:10 AM, Sanjay Vel wrote:
> Thanks Davide its working now
>
>
