CODEWITHSUNDEEP
htmlcssfirefoxmathunicode
user1569147
user1569147

Reputation: 23

Inline CSS to make Firefox math symbols larger

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.

Upvotes: 2

Views: 843

Answers (3)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201876

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.)

Upvotes: 3

Prashobh
Prashobh

Reputation: 9544

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.

Upvotes: 0

Alfred
Alfred

Reputation: 21406

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>

Upvotes: 0

Related Questions