Inline CSS to make Firefox math symbols larger

Question

I'm having a problem with math symbols (e.g. '∠') displaying too small in firefox. I've fixed this by using <span style="font-size:200%;">&ang;</span>, but then it's too big in other browsers.

Is there a way, using inline CSS (I can't change the document head or external CSS), to make the size increase apply to Firefox only?

The other option is a MathML-generated image, but that would make searching for exact equation strings impossible.

`@-moz-document url-prefix()` is what you want. http://stackoverflow.com/questions/952861/targeting-only-firefox-with-css — Jens, Aug 01 '12 at 16:29
@Jens - the OP indicated he cannot modify the document head. — Roddy of the Frozen Peas, Aug 01 '12 at 16:30

score 3 · Accepted Answer · answered Aug 01 '12 at 19:31

This is a font issue and should be addressed at the font level. It is a browser issue indirectly only: different browsers have different default fonts and different lists of backup fonts that they use, when a character cannot be found in any of the of the fonts suggested by the document itself. (For generalities on such matters, see my Guide to using special characters in HTML.)

This means that you should inspect the list of fonts that contain the character you need, and http://www.fileformat.info/info/unicode/char/2220/fontsupport.htm is rather good (it does not cover all fonts, but probably all fonts that Joe Q. Public might have in his computer). Then pick up the fonts where the rendering is acceptable for your needs, taking into account your copy text font choices.

For example, on my system (Win 7), Firefox displays an unstyled “∠” indeed as smaller than IE does, but this is not caused by differences in font size. Changing the font size would be a shot in the dark. Instead, if I use

<span style="font-family: Lucida Sans Unicode">&ang;</span>

I get the same rendering on both (or all) browsers in my system. Lucida Sans Unicode is available on Windows (universally, I suppose), so you may consider adding some backup fonts to the font-family list, like Dejavu Sans. (Most of the fonts that contain the angle character are so rarely available that they are probably not worth listing down there, even if you could take a look at the appearance.)

By the way, the *standard* symbol (as per the ISO 80000-2 standard) for angle is “∢” U+2222 SPHERICAL ANGLE (the Unicode name is thus misleading). It might also be intuitively be more easily understood as meaning angle than the simple-design “∠”. So I suggest that you consider the choice of the symbol before looking at the details of rendering in fonts. — Jukka K. Korpela, Aug 01 '12 at 19:35

score 0 · Answer 2 · answered Aug 01 '12 at 16:35

0

You can apply a class (or just use span) and in your css, do this;

<style type="text/css">
@-moz-document url-prefix() {
    span {
        font-size:200%;
    }
}
</style>

answered Aug 01 '12 at 16:35

Alfred

21,058
61
167
249

score 0 · Answer 3 · answered Aug 01 '12 at 16:46

0

The url-prefix rule applies the rule to any page whose URL starts with it.

@-moz-document url-prefix() {
  /*your needs*/
}

@-moz- is a Gecko layout engine specific rule.It is not a standard rule.It is a mozilla specific extension.

answered Aug 01 '12 at 16:46

Prashobh

9,216
15
61
91

Inline CSS to make Firefox math symbols larger

3 Answers3