[HOME] jsMath (Authors) [Prev][Up][Skip][Next]

Changing Font Sizes or Other Attributes

By default, jsMath uses fonts that are the same point size as the surrounding text. Even though the point sizes agree, however, the characters in the math fonts may not have the same height as those in the nearby text, making for an unattractive look. Usually, the math fonts are too small, and this may be the case particularly when there are subscripts or other reduced-size items within the mathematics.

The user can control the scaling factor for the mathematics on the page (in comparison to the surrounding text) using the jsMath control panel, available from the small button that jsMath places at the lower right of the browser window. By default, this value is 100%, but you can change this within your web page. If you are using the easy/load.js file to load jsMath, set the scale parameter to the percentage that you want to use. Otherwise, if you are loading jsMath.js by hand, include a line like the following

    <SCRIPT> jsMath = {Controls: {cookie: {scale: 133}}} </SCRIPT>
just before loading jsMath.js into your page. This example sets the scaling factor to 133%, or 1/3 larger than the surrounding text. Something between 120% and 133% is often a reasonable value.

The user will be able to override this setting using the jsMath control panel if it is not a good setting for him or her. If the reader has already visited another page at your site, however, and saved the control panel settings there, then the scaling factor from that page will be considered the user's preferred scale, and that will override your setting. This can happen without the user really knowing it if the font warning message is displayed, because the control panel cookie is updated automatically at that point to store the fact that the warning message has been displayed and need not be shown again. So this scaling factor is really just a hint; the user has complete control via the control panel.

If you are finding that the super- and sub-scripts are too small to read, you might consider using the smallFonts plugin, which can improve readability when the page uses small fonts to begin with.

The Font Styles

The renderings used by jsMath are specified by several CSS styles. The main two are .math and .typeset, which control the style of the unprocessed mathematics (the TeX code) and the processed mathematics (the typeset mathematics) respectively. You can use these styles to set global attributes for the typeset mathematics, such as a global scaling factor or the foreground color for mathematics. You should issue the STYLE commands that control these before loading jsMath.js. For example
      .math     {font-size: 50%; color: grey}
      .typeset  {font-size: 120%; color: red}
would set the unprocessed math to display as grey text at 50% scaling, and the typeset mathematics at 120% scaling in red. (Note that color settings will have no effect if the image fallback mode is used, at least on those characters that are taken from the image fonts.)

Another useful setting is to make .math have display:none or visibility:hidden when you are using jsMath.Process() rather than jsMath.ProcessBeforeShowing(). This would prevent the unprocessed mathematics from showing up at all until it has been typeset. One downside to this, however, is that if a user does not have JavaScript enabled, the mathematics will never be visible; it may be better to allow him or her to view the TeX code, at least, in this situation.

You can specify the settings for in-line mathematics and displayed equations separately via span.typeset and div.typeset. In fact, the spacing and centering of displayed equations is handled by the fact that the default for div.typeset is

    div.typeset  {text-align: center; margin: 1em 0px;}
which centers the equations with 1em margins at the top and bottom. You can override these values either by using
    <SCRIPT> jsMath = {styles: {'div.typeset': {style-settings}}}; </SCRIPT>
before loading jsMath.js or by using
    <SCRIPT> jsMath.Setup.Styles({'div.typeset': {style-settings}}) </SCRIPT>
afterward, where style-settings is a list of key-value pairs indicating the style settings to override. For example,
      jsMath = {styles: {
        'div.typeset': {
          'text-align': 'left',
           margin: '1em 0px 1em 1in'
would put the displayed equations left-justified at 1 inch from the left margin of the page, with 1em above and below.

There is a third style that also plays a role in jsMath's typeset mathematics. The ".typeset .normal" style controls how text that appears within \hbox commands is rendered. This text is not processed by jsMath (unless it contains mathematics as indicated by $...$ or \(...\)) and so it tries to go back to the normal text settings for this. The ".typeset .normal" style tells jsMath what this should mean. By default, this style is

    .typeset .normal {font-family: serif; font-style: normal; font-weight: normal}
but you can control it as you would the other styles. The font-family is set to serif because in TeX, the \hbox content would be typeset in the \rm font, but you can override that if you wish. Depending on how the serif font compares to the default font on your page, you may need to change the font size for ".typeset .normal" if you have changed the size of the .typeset style.

Get jsMath at SourceForge.net. Fast, secure and Free Open Source software downloads [HOME] jsMath web pages
Created: 10 Jul 2005
Last modified: 13 Sep 2008 09:01:02
Comments to: dpvc@union.edu
[Next] Changing the jsMath Button Attributes
[Skip] Browser Support for jsMath
[Up] Information for jsMath Authors
[Prev] Changing or removing the font warnings