Monospace/preformatted text has gotten much smaller in Vector (code, tt, pre, kbd, samp)
Closed, ResolvedPublic

Description

Monospace text (code, tt, or pre tags) has gotten a lot smaller in recent versions of Vector; definitely getting complaints from Firefox and Safari users on Mac, haven't checked other platforms too much yet.

Also affects things like the source diffs in code review:

http://www.mediawiki.org/wiki/Special:Code/MediaWiki/56574?useskin=vector


Version: unspecified
Severity: enhancement
URL: http://en.wikipedia.org/wiki/Wikipedia:Village_pump_%28technical%29#code_and_tt_size

bzimport set Reference to bz20706.
brion created this task.Sep 18 2009, 12:06 AM

Also affects Google Chrome (3.0, not sure about earlier versions).

ngautam wrote:

looks fine in IE and Opera on PC, FF is affected in Mac and Windows

It was the case ever since in Chrome and now in Vector. Tests:

http://www.mediawiki.org/wiki/User:Subfader/3

quick solution:

code {

font-size:medium;

}

ngautam wrote:

setting the font size to medium fixes it on FF and Safari, but makes it huge in other browsers

APPER added a comment.Apr 5 2010, 1:14 PM

Could please someone have a look at this bug? Because of a bug in Firefox, <pre> tags are displayed much smaller.

This is fixed in Common.css on en.wiki and Vector.css on de.wiki, but will affect all other wikis when it will be rolled out to all sites. So please include this fix into the Vector skin.

On Commons it is fixed using "font-size:larger;" at the moment - so there are even fixes, that fix the firefox bug, but everything is wrong in other browsers... that's why you should include the correct fix in the vector skin.

The bug is the following. Normally the font-family property of "pre" is "monospace". In this case, Firefox uses a smaller font (I don't know why). A simple fix is to add another font: "font-family: monospace, sans-serif;". It is exactly the same (because the first is a generic font family and this is always used), but Firefox displays the correct font size. In fact it doesn't matter whats behind the comma, so even "font-family: monospace, bla;" will fix it (but this would be incorrect CSS).

So the fix is:
pre, code, tt {
font-family: monospace, sans-serif;
}

The font size issue is resolved in r65383.

APPER added a comment.Apr 21 2010, 2:14 PM

Sorry, but could you please read my comment above? The font size is only to small in Firefox and Chrome because of a bug in these browsers. So please fix it using

pre, code, tt
{
font-family: monospace, sans-serif;
}

which in fact doesn't change anything according to the standard, but you get the correct size in Firefox. Putting "font-size: 1.25em;" will make the font in pre tags much to big for all browsers, which do not have this bug.

The second thing is, that you only fixed it for the pre tag, but not for code and tt, which have the same problem, I think.

Actually fixed in r65391. Sorry about that - I was being a little careless I suppose.

This fix misses two elements that are monospace in the Default style sheet for HTML 4, kbd and samp, which causes them to remain tiny.

samp is inserted by the SyntaxHighlight GeSHi extension if an invalid language was specified, example: http://en.wikipedia.org/w/index.php?title=Special:ExpandTemplates&input=%3Csource%20lang=%22invalid%22%3E...%3C/source%3E

I have not seen any usage of kbd so far, but why not add it as well just in case.

Related: bug 671

internoob2010 wrote:

Problem affects me in FF and Safari 5 for Windows. IE7/8 is OK. Font is 80% the size of normal, but only affects pre tags, like those generated with &lt;source>, not other monospaces. Pre tags with no class attributes set seem to be normal.

All this is observed on the English Wiktionary; it may differ for other wikis.

See http://en.wiktionary.org/wiki/Wiktionary:Grease_pit#monospace_fonts_and_beta

The problem with <source> tags is different; it is caused by the Syntaxhighlight GeSHi extension and really needs to be fixed there. Bug 23708 contains a workaround (used in [[de:MediaWiki:Geshi.css]]); maybe the English Wiktionary wants to copy that.

pre, code, tt
{

font-family: monospace, sans-serif;

}

This code is semantically incorrect, as sans-serif is not monospaced. As the 'trick' is to sepcify any font as the second parameter, I suggest changing it to the code below, based on another line in the same CSS files (font-family: serif, "Times New Roman";)

pre, code, tt
{

font-family: monospace, "Courier New";

}

(In reply to comment #15)

pre, code, tt
{

font-family: monospace, sans-serif;

}

This code is semantically incorrect, as sans-serif is not monospaced. As the
'trick' is to sepcify any font as the second parameter, I suggest changing it
to the code below, based on another line in the same CSS files (font-family:
serif, "Times New Roman";)

pre, code, tt
{

font-family: monospace, "Courier New";

}

That's what Trevor did, see r69335 and r69336.

Ah OK, never mind then. Is there any reason why this big is still open then?

Because the fix isn't complete (see comment 11).

I have reopened it because I'd like to get the kbd, samp { font-family: monospace, "Courier New"; } from [[de:MediaWiki:Vector.css]] upstream.

I added kbd and samp to the bug name; hopefully that'll draw a bit more attention.

kbd and samp were added to the rule in r76017.

All I see in r76017 are tweaks to the colors of .usermessage...

Oops... I meant r76322... Sorry.

Add Comment