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 added a project: MediaWiki-Interface.Via ConduitNov 21 2014, 10:54 PM
bzimport set Reference to bz20706.
brion created this task.Via LegacySep 18 2009, 12:06 AM
Dinoguy1000 added a comment.Via ConduitSep 18 2009, 5:38 PM

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

bzimport added a comment.Via ConduitSep 18 2009, 6:10 PM

ngautam wrote:

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

Subfader added a comment.Via ConduitOct 18 2009, 4:46 PM

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

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

Subfader added a comment.Via ConduitOct 18 2009, 4:54 PM

quick solution:

code {

font-size:medium;

}

bzimport added a comment.Via ConduitOct 23 2009, 10:54 PM

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.Via ConduitApr 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;
}

TrevorParscal added a comment.Via ConduitApr 21 2010, 1:46 PM

The font size issue is resolved in r65383.

APPER added a comment.Via ConduitApr 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.

TrevorParscal added a comment.Via ConduitApr 21 2010, 2:19 PM

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

Entlinkt added a comment.Via ConduitJun 25 2010, 9:36 PM

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.

Entlinkt added a comment.Via ConduitAug 5 2010, 1:30 AM

Related: bug 671

bzimport added a comment.Via ConduitSep 3 2010, 4:45 PM

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

Entlinkt added a comment.Via ConduitSep 4 2010, 12:34 AM

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.

Edokter added a comment.Via ConduitNov 8 2010, 3:21 PM

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";

}

Catrope added a comment.Via ConduitNov 8 2010, 3:30 PM

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

Edokter added a comment.Via ConduitNov 8 2010, 4:43 PM

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

Entlinkt added a comment.Via ConduitNov 8 2010, 4:51 PM

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.

Dinoguy1000 added a comment.Via ConduitNov 8 2010, 5:09 PM

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

TrevorParscal added a comment.Via ConduitNov 8 2010, 6:20 PM

kbd and samp were added to the rule in r76017.

Dinoguy1000 added a comment.Via ConduitNov 8 2010, 6:28 PM

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

TrevorParscal added a comment.Via ConduitNov 8 2010, 6:29 PM

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

Add Comment

Column Prototype
This is a very early prototype of a persistent column. It is not expected to work yet, and leaving it open will activate other new features which will break things. Press "\" (backslash) on your keyboard to close it now.