normalize monospaced text font size
So the default font-size in all browsers I know is 16px. It allows us to use relative sizes and still keep font size the same in all browsers. But default size for monospaced fonts varies a bit. Firefox and safari have this set to 13, and IE and opera keep this at 16. So the monospaced font looks smaller than normal font in safari and firefox. So again, I wanted to find a simple and validating solution to keep the size constant. So I did this:
pre, code { /* default rule */
font-size:1em; font-family:monospace; }
:root pre, :root code { /* only for mozilla & safari */
font-size:1.23em; }
html:not(:nth-child(1)) pre, html:not(:nth-child(1)) code {
/* Revert to 1em in konqeuror */
font-size:1em; }
If I’m not mistaken, monospaced font is by default used only in pre and code, so I just used these two. Then, if we enlarge 13px font by 1.23 we get a 16px font (13 * 1.23 = 15.99; good enough for me, since I don’t think more than 2 decimals work well in css). By using the :root selector hack we only apply this multiplication in firefox, safari and konqeuror. :root is a css3 selector, which applies to “root of the document”. But we don’t want this in Konqeuror, since it uses a 16px monospaced font, so by using another css3 trick we can revert it back to 1em. So there we have it, a standardized monospaced font size.
This rules will not normally validate in css validator. By default the validator checks for css 2.1 rules. But if we set the profile to CSS3 in “more options” of the validator, we’ll see the “valid css” confirmation. How silly of the validator to discourage me from using css3… :)
update: Code fixed to work in Konqeuror as well.










