MediaWiki talk:Common.css/Archive 11

From Wikipedia, the free encyclopedia
Jump to: navigation, search
Archive 10 Archive 11 Archive 12

Quick update

I've posted a few more comments on m:Talk:Fundraising 2009/Alternative banners.--Eloquence* 19:16, 11 November 2009 (UTC)

Maybe its time whoever is responsible for adding the banners provides some possibilities befor ehand and then make a decision based on a consensus. There are much better ways to ask for donations then a juvenlie banner in capital letters. Himalayan 22:18, 11 November 2009 (UTC)

Consensus won't do it, but consultation will. The ham-fisted strategy here convinces me there is a room of people somewhere who are not talking to anyone outside the room and hence depriving themselves of feedback that would have improved their efforts and saved themselves a lot of embarrassment. Casual Wikipedia users who are friends of mine and have seen the banner are either confused or amused by it (and only one of them realised you could click on it, or that it was a call for donations). Orderinchaos 01:16, 12 November 2009 (UTC)
I'd love to know what consultation process, and what user testing, produced this strategy / those banners... Perhaps it really was just people in a room. Rd232 talk 01:29, 12 November 2009 (UTC)
  • We can force the Foundation to allow for the consensus process to take place if we elect Board members who respect community input. —Finn Casey * * * 19:16, 12 November 2009 (UTC)
  • Or if every member of the community just blatantly reverts the foundations decisions. The consensus and effort of several hundred users can easily overwhelm that of a select handful of foundation users. What's the foundation going to do? Ban all of its editors
    Wikipedia is public property now, and has been for some time, regardless of what the foundation "thinks". That's why they have donation banners up. - ʄɭoʏɗiaɲ τ ¢ 20:53, 22 November 2009 (UTC)

Italics of italics not working inside a link

This is following up a thread in Template talk:Citation/core #Italicized title containing italics. The problem is that this Wiki markup:

The book's title is ''[ Fouled Anchors: The ''Constellation'' Question Answered]''.

generates this output:

The book's title is Fouled Anchors: The Constellation Question Answered.

and the word Constellation is not in Roman font, as it should be. The output should look like this:

The book's title is Fouled Anchors: The Constellation Question Answered.

In order to fix this problem, Ms2ger wrote "I think this would be better solved by adding i i { font-style: normal; } to MediaWiki:Common.css." I don't know what this means (I don't understand Common.css), but can someone who understands this suggestion please implement it here? Thanks. Eubulides (talk) 05:19, 14 November 2009 (UTC)

Don't you mean the expected result is "The book's title is Fouled Anchors: The Constellation Question Answered"??
The issue is that the parser converts the testcase into
The book's title is <i><a href=...>Fould Anchors: The <i>Constellation</i> Question Answered</a></i>
While the example of correct behaviour are rendered as
The book's title is <a href=...><i>Fouled Anchors: The</i> Constellation <i>Question Answered</i></a>
The former includes nested <i> tags, while the latter avoids such. The CSS that Ms2ger is proposing tells the users' browsers to "treat an <i> tag within another <i> tag as normal text". Sounds like a reasonable suggestion. Happymelon 12:05, 14 November 2009 (UTC)
I tried that in my CSS. Only "Question Answered" is not italicized. ---— Gadget850 (Ed) talk 12:23, 14 November 2009 (UTC)
That's cos the parser's also borked; I made the common mistake of assuming that it's sane :D The actual output generated is this:
The book's title is <i><a href=...>Fouled Anchors: The Constellation <i>Question Answered</i></a></i>
So actually the CSS works perfectly. Off to bugzilla I guess... Happymelon 12:30, 14 November 2009 (UTC)
This wouldn't be another Tidy issue? I have never figured out how to tell when Tidy is at fault. ---— Gadget850 (Ed) talk 12:54, 14 November 2009 (UTC)
Er, now you come to mention it... :D
Running that wikimarkup through a clean install with no Tidy produces the HTML I gave in my second example (the 'correct' version); so the fragment renders correctly even without CSS modification. Tidy is somehow managing to mangle totally correct HTML into the mess we now see. How untidy... Happymelon 13:45, 14 November 2009 (UTC)

loltidy --MZMcBride (talk) 14:02, 14 November 2009 (UTC)

Indeed. I'm not surprised. So— how do we fix this? ---— Gadget850 (Ed) talk 14:03, 14 November 2009 (UTC)

Tidy is funny because it works remarkably well in some areas and still has plenty of "wtf" behavior. It certainly can't be disabled, that breaks the site remarkably. (Anecdotally, it was disabled at the Foundation wiki and we're still finding the various ways it breaks everything.) In an ideal world, HTML Tidy would be fully merged into MediaWiki core properly and then customized to remove some of the bad behaviors. At least that's my understanding of the situation. --MZMcBride (talk) 14:08, 14 November 2009 (UTC)
That, or the MediaWiki parser should be replaced by one that directly emits proper HTML without any need to try to patch it in a second pass. Heh. Amalthea 01:44, 16 November 2009 (UTC)

You can use

''[ Fouled Anchors: The <span style="font-style:normal">Constellation</span> Question Answered]''.

Ruslik_Zero 14:53, 14 November 2009 (UTC)

''[ Fouled Anchors: The {{noitalic|Constellation}} Question Answered]''.
Fouled Anchors: The Constellation Question Answered.
Werson (talk) 04:41, 19 November 2009 (UTC)
Now that Citation core has been changed it should no longer be necessary: {{citation|title=Fouled Anchors: The ''Constellation'' Question Answered|url=}}Fouled Anchors: The Constellation Question Answered 
Amalthea 09:51, 19 November 2009 (UTC)

Duplicated stuff

This is duplicated:

div.NavFrame + div.NavFrame {
    border-top-style: none;
    border-top-style: hidden;

But I have no idea how it should be fixed. Any idea? Locos epraix ~ Beastepraix 01:30, 27 October 2009 (UTC)

Duplicated how? From where? Could you elaboate? EdokterTalk 13:32, 12 November 2009 (UTC)
I believe this is perhaps a good time for a face palm. Look at what he quoted. "border-top-style" is set twice in a row, thus negating the first set. He is uncertain of the intent, so he is asking which of the two should be deleted. --Cogniac (talk) 23:34, 19 December 2009 (UTC)
I see. I believe both declarations serve a purpose because not all browsers support both, ore only of of them. EdokterTalk 01:50, 20 December 2009 (UTC)
Indeed. IE8 and below seem not to recognize "hidden," so IE will catch just the "none" and drop out while all other browsers catch the "none" and then overwrite it with the "hidden."
--Cogniac (talk) 15:08, 21 December 2009 (UTC)

MediaWiki messages

We need a single place to announce discussions about MediaWiki messages, since the "MediaWiki talk:" pages are not watched much. If you are interested in this, see Wikipedia talk:MediaWiki#MediaWiki messages.

Oh, and please don't start a discussion here, instead follow that link.

--David Göthberg (talk) 00:13, 21 November 2009 (UTC)

We now have the new central discussion page for MediaWiki interface messages (other than the CSS and JavaScript pages): Wikipedia:MediaWiki messages. So gentlemen, if MediaWiki interface messages interest you, consider adding that page to your watchlist.
--David Göthberg (talk) 19:47, 29 November 2009 (UTC)

We are about to deploy automatic detection of script documentation pages. All .js and .css pages will automatically show a box with a link to their doc page, if a doc page exists. Depending on how we choose to implement this it might also affect what is shown atop MediaWiki:Common.css and MediaWiki:Common.js. See MediaWiki talk:Clearyourcache#Script documentation, {{script doc auto}} and Template talk:Script doc auto if you want to discuss this.

--David Göthberg (talk) 15:13, 14 December 2009 (UTC)

As a result of the discussions linked above I made it so .css and .js pages in MediaWiki space now show their editnotice (if there is one) already when just viewing the script pages. See MediaWiki talk:Clearyourcache#Show editnotice for more on that.
--David Göthberg (talk) 01:42, 21 December 2009 (UTC)

Template arabic script?

In the DE-Wikipedia there is a template arabic script, and in the DE-common.css there is an entry that belongs to the class spanAr defined in this template. I can't find a counterpart in the EN-Wikipedia. Is there one? It's for choosing an appropriate font for the arabic script, either commonly, or overwritten in the user specific CSS-files in case of need. The fonts listed in the DE-common.css are 'Arial Unicode MS','Scheherazade','Code2000','DejaVu Sans'. 'Lateef' (the "brother"-font of 'Scheherazade') is useful, too. -- Sinnierer (talk) 15:14, 20 December 2009 (UTC)

The template used in english wikipedia is {{Script/Nastaliq}}. It has no rules defined in common.css but it defines its own stylke rules template-inside and those are: 'Jameel Noori Nastaleeq','IranNastaliq', 'Nafees Nastaleeq', 'Nafees Nastaleeq v1.01', 'Pak Nastaleeq', 'PDMS_Jauhar'. Locos epraix ~ Beastepraix 16:38, 20 December 2009 (UTC)
OK, it's another solution in de EN-WP. Relating to the fonts, {{Script/Nastaliq}} is more specialized. Seeing more templates like Template:Script/...', I think I'll create a new template Template:Script/Arabic. -- Sinnierer (talk) 19:54, 20 December 2009 (UTC)
Info: I've now created the new template {{Script/Arabic-international}} + doc-page. -- Sinnierer (talk) 22:36, 20 December 2009 (UTC)
@ The CSS-experts: I've defined: class="arabic-international" in {{Script/Arabic-international}}. Overriding that in my user-CSS-page doesn't work. What's wrong with the template-code? It should work like the class IPA for users. Is the best solution an entry in the Common.css? -- Sinnierer (talk) 13:23, 21 December 2009 (UTC)
I'm withdrawing my question what's wrong. Now it's OK. There was a delay because of the server cache. Clearing the browser cache was not enough. -- Sinnierer (talk) 14:43, 21 December 2009 (UTC)

Reflist font size

Mozilla makes {{reflist}} footnotes look smaller than IE does. In fact, it's painfully small. (I've 20/20 in one eye, a hopeless blur in the other).

I've tested and found that 93% font size in Mozilla results in a slightly larger size, and in IE 93% results in the same-as-current size (90%). Also, 93% looks the same size in Mozilla as in IE (and smaller than 100%). Example:

100% The quick brown fox jumped over the lazy dog.
  93% The quick brown fox jumped over the lazy dog.
  90% The quick brown fox jumped over the lazy dog.

I suggest that the reflist template use 93% font size instead of 90% font size, or somewhere from 91% to 95% if 93% doesn't help in other browsers. I've found that 91%, 92%, 94%, & 95% look the same size as 93% in Mozilla & IE. So if you have other browsers, you can check here:

100% The quick brown fox jumped over the lazy dog.
  95% The quick brown fox jumped over the lazy dog.
  94% The quick brown fox jumped over the lazy dog.
  93% The quick brown fox jumped over the lazy dog.
  92% The quick brown fox jumped over the lazy dog.
  91% The quick brown fox jumped over the lazy dog.
  90% The quick brown fox jumped over the lazy dog.

The Tetrast (talk) 22:37, 2 December 2009 (UTC).

(Inserted span tag "comparisons" to link here The Tetrast (talk) 23:15, 1 January 2010 (UTC))

See User:Edokter/fonttest for a full comparison and User:Edokter/fonttest/screenshots for screenshots with various browsers. See MediaWiki talk:Common.css/Archive 10#.references-small font-size for the last discussion here and multiple archived discussions at Template talk:Reflist. ---— Gadget850 (Ed) talk 22:48, 2 December 2009 (UTC)
I've checked the screenshots and here's what I find:
91-98 ok Chrome Windows XP
92-98 ok Firefox- Windows 2000
92-99 a bit large Firefox Linux
91-98 ok Firefox 3.0.10 Llinux
←Corrected my typo error in Firefox version #, and elsewhere deleted my superfluous hyphens from version labels The Tetrast (talk) 13:56, 3 December 2009 (UTC)
94 looks about right (every size differs) Firefox 3.0.1 Mac OS X 10.5
91-98 ok Firefox-3.0.1 Windows XP
94-99 ok Konqueror 3.5 Ubuntu-6.06
90-97 ok MSIE 5.5 Windows XP
90-97 ok MSIE 6.0 Windows XP
90-97 ok MSIE 7.0 Windows XP
90-97 ok MSIE 8.0 Windows XP
91-99 a bit small Opera 9.25 Windows XP
92-99 ok Opera 9.27 Linux
91-98 ok Opera 9.60 Windows XP
91-98 ok Safari 3.1.1 Windows XP
91-98 ok Safari 4.0 Mac OS X 10.5
The discussion at MediaWiki talk:Common.css/Archive 10#.references-small font-size mistakenly said that in IE 90% font size looks like 100%.
Then some justification was offered of the current settings as being in order to keep the font sizes the same across browsers though, at 90%, they clearly are not the same across browsers, as the screenshots showed and as anybody with the two most common browsers Firefox & IE can see. 94% would be more readable and it will be pretty much the same amount smaller than 100% as shown on most browswers.
Then the discussion simply petered out without any explanation of why reflist uses a font size so difficult for many people to read.
I've gone through the archived discussions of font size at Template talk:Reflist and they are unhelpful. Various people say that the font size is too small. Some think that with more than 88% the columns look "too crowded" but that's pretty subjective and what does it matter when many average readers have trouble reading it at all in Mozilla which is, what, like 40% of broswers now? And nowadays people increasingly use lap tops with small high-resolution screens. The tiny font is a nuisance. Looking at the numbers above, I suggest that the font size should be set to 94%. 94% will be more readable and, again, it will be pretty much the same amount smaller than 100% as shown on most browswers. The Tetrast (talk) 23:46, 2 December 2009 (UTC).
I know many who have problems reading web pages because font sizes are to small. The goal of Wikipedias is to make knowledge available to everyone, so shouldn't it be our primary goal to make the articles as accessible as possible? As far as I know there is no reason for having smaller font size in the reference section in the first place.
Apis (talk) 00:12, 3 December 2009 (UTC)
I agree. Also, the majority of people probably never fiddle or even learn to fiddle with their browsers' default font size at all, or bother to use the zoom option. The Tetrast (talk) 00:17, 3 December 2009 (UTC).
And even if they did, wouldn't it make more sense for those who prefer the small font to change their settings? that way no one gets excluded "by default".
Apis (talk) 00:21, 3 December 2009 (UTC)

So, if there are no objections, maybe someone could make the change?
Apis (talk) 00:43, 6 December 2009 (UTC)

There doesn't seem to be consensus just yet. Note the class is called references-small, and increasing the fontsize would contradict that class' name. You can however set the fontsize on your own monobook.css. EdokterTalk 10:49, 6 December 2009 (UTC)
It's small for a reason, and I for one, like it. —TheDJ (talkcontribs) 11:42, 6 December 2009 (UTC)
I (and as I perceive it, The Tetrast) doesn't want to change it because of what we like, but because it makes the text difficult to read. It's not just bickering about aesthetic preferences, it's about making wikipedia accessible to everyone. Doesn't that matter?
The class name could be changed and you can set a small fontsize in your own monobook.css as well. For what reason is it small?
Apis (talk) 04:37, 7 December 2009 (UTC)
I agree with Apis. Nobody has even tried to counter either the arguments that Apis & I have made or my review of the archived pro-tiny-font arguments which were flatly mistaken. Now somebody claims that "it's small for a reason" but fails to articulate the reason and I'm not surprised. Well, there's not much that Apis or I can do, but you in the future who read this, note that you will need to do more than muster winning arguments in order to get an unsolipsistic and user-friendly policy into place. The Tetrast (talk) 00:45, 16 December 2009 (UTC).
The reason is to reduce the space the refs occupy on a page. And that is significant. I'm all for accessibility. (Hell i fixed alt for images in the mediawiki core), but accessibility does not trump usability in my opinion. We also have < 1.0 text in many infoboxes, at the bottom of the skins, as warnings in the edit interface and I don't know where else. We should trust that people made conscious decisions there. The opposite of that would then be that if we bring 0.9 text to 1.0 that we should also bring 1.0 text to 1.1 or more. That is of course unusable. How about we create an accessibility gadget that lets loose all kinds of accessibility improvements that not necessarily everyone of our readers would enjoy ? —TheDJ (talkcontribs) 10:59, 16 December 2009 (UTC)
See Template talk:Reflist#Font size and columns: a feasibility question. ---— Gadget850 (Ed) talk 12:44, 16 December 2009 (UTC)
The two-kind reference system would be labor-intensive for articles with many footnotes such as in Scientific method#Notes and references (which has reflist), and such articles often have few bare citations anyway. The Tetrast (talk) 20:39, 28 December 2009 (UTC).
Thank you all for the responses, and thank you, TheDJ, for your work on accessibility and other things.
  But it is incorrect to say that we're talking about bringing "0.9 text to 1.0 text." We are not talking about that. Reflist footnote fontsize in browsers other than Internet Explorer is around 0.85 in terms of typically resultant line length (see table below), and we're talking increasing reflist footnote fontsize, in effect, from 0.85 to 0.93 in terms of typically resultant line length, which is that which Internet Explorer already produces with the "90%" reflist fontsize setting and where IE would stay with a "94%" fontsize setting since IE fontsize settings from "90%" to "97%" all produce the same result. The effective 0.93 result still increases the savings in space which double columns of footnotes tend to bring even at 1.0 of font size. Even in IE, which fails to produce reflist's double columns, the effective 0.93 result saves space.
  Essentially we're talking about increasing reflist footnote font size for most browsers
  —from 8pt (typically 85% in terms of line length)
  —to 9pt (typically 93% in terms of line length) (see table below), where, for IE, it is now and would stay.
  Main text size is 10pt and there will be no reason to bump it higher if reflist footnote font size is increased, in effect, to 9pt. (94% works best for 0.93 across most browsers, see comparisons above in this talk page section).
  As said, splitting into columns already often saves space even at 1.0 of font-size. It saves consistently more space at 0.93. It saves consistently still more space at 0.85 but at a significant cost of legibility, a cost which increases amid masses of footnote text. A footnote section is typically denser than an infobox, which contains tidy snippets.
  I don't seek the same for infoboxes. The effective 0.85 is more bearable in infoboxes and an effective 0.93 implementation would lead to problems. The effective 0.85 is more bearable in infoboxes, which—unlike footnotes—typically have isolated and short single or double lines of text, separated by large padding or spacing of cells. Still, an effective 0.93 would be better in infoboxes, but implementation of it could cause problems when so many infoboxes have been designed for an effective 0.85—in IE & other browsers alike—for most of their text.
  So, to sum up, an increase of reflist fontsize setting to 94% would:
  —still save space,
  —result in greater consistency across browsers in terms of each browser's 100% size (see comparisons above in this talk page section), and
  —preserve footnote legibility for the general reader, who increasingly often uses a laptop and increasingly often uses Firefox or other non-IE browser.
  See above in this talk page section for comparisons of browser font size settings. See table below for comparisons of point-size settings to percentage-size settings and for comparisons of fontsize-dependent line widths. The Tetrast (talk) 20:39, 28 December 2009 (UTC). Corrected typo. The Tetrast (talk) 20:40, 28 December 2009 (UTC). Slight revision. The Tetrast (talk) 21:07, 28 December 2009 (UTC).
  Re: "accessibility does not trump usability in my opinion": That can't be meant in the absolute sense that accessibility issues never trump usability issues, and so is likely meant in the sense that an accessibility issue sometimes doesn't trump a usability issue. E.g., the idea that it's good to increase the likelihood that a whole footnotes section will fill no more than one screen, and the idea that it's good to decrease the number of sheets that might be printed out from an article. I'm not sure what other usability issues there are. Anyway, we're talking about trade-offs. You already get increased usability with 94%-fontsize, 9pt, footnotes, especially with double columns. Font size effectively 0.85, 8pt, is overdoing it on size reduction - the trade-off tips too far against accessibility. Note that, where they weigh accessibility vs. usability with a profit-sharpened eye, has stripped out the tiny font size from the footnotes in their versions of Wikipedia articles I'm not saying that Wikipedia should look like all the time or act as though its motive were profit, and I generally prefer Wikipedia's look. But 8pt is seriously small for footnotes that are sometimes dense and are actually meant to be read. 8pt is for little standard notices such that one wants to keep them from distracting the reader from anything else. The Tetrast (talk) 21:42, 28 December 2009 (UTC).
font size 2 The quick brown fox jumped over the lazy dog.
font size 1 The quick brown fox jumped over the lazy dog.
10pt The quick brown fox jumped over the lazy dog.
9pt The quick brown fox jumped over the lazy dog.
8pt The quick brown fox jumped over the lazy dog.
100% The quick brown fox jumped over the lazy dog.  
94% The quick brown fox jumped over the lazy dog.
91% The quick brown fox jumped over the lazy dog.
90% The quick brown fox jumped over the lazy dog. In Firefox, 90%=85%. In IE, 90%=94%=97%
88% The quick brown fox jumped over the lazy dog.
85% The quick brown fox jumped over the lazy dog.
The quick brown fox jumped over the lazy dog.
Width: 21.06em. Range: 21.02–21.09
The quick brown fox jumped over the lazy dog.
Width: 19.64em. Range: 19.6–19.67
The quick brown fox jumped over the lazy dog.
Width: 17.91em. Range: 17.87–17.94
Box widths are sensitive
to variations in same or previous column.

19.635/21.055 = approx. 93.26%

17.905/21.055 = approx. 85.04%
*= in Firefox 3.0.16, Windows 2003 XP, my HP laptop pc.
In IE8.0.6001.18702 (Windows 2003 XP, my HP laptop pc),
the width-defined boxes are 2–3 screen pixels wider than the text-dependent boxes.
The Tetrast (talk) 20:39, 28 December 2009 (UTC).
Space reduction involves not just width but height times width. I'll be addressing that, probably tomorrow. The Tetrast (talk) 21:59, 29 December 2009 (UTC).
Promised discussion of height times width. Note, using del & ins tags, I've made a few corrections to my comments above. Now in the table below I go to a bunch of trouble to figure out what the height numbers could be in calculating resultant size reductions, just in case they turn out to be surprising. They turn out not to be so surprising.
Make sure that browser window is wide enough to avoid div-height changes (subtle or obvious) in table.
Gray boxes are div backgrounds, not the container cells' backgrounds.
Not the cells but only the contained divs have individual styles (font size, line height).
Reason for keeping font size constant in later columns is that line-height in em varies with font size but what we seek here are em-size ratios (as info collateral to the line heights expressed in px) between line-heights, but ratios independent of font size variation.
Row settings Uses row settings Uses row font-size Min line height em
w/ 10pt font
Max line height
w/ 10pt font
Row font-size: 10pt
Row line-height: 1.5em
Row of resultant equal div heights*
The quick brown
fox jumped over
the lazy dog.
Div line-height
Div font-size is 10pt
line-height = 1.42em
Div font-size is 10pt
line-height = 1.43em
Row font-size: 9pt
Row line-height: 1.5em
Row of resultant equal div heights*
The quick brown
fox jumped over
the lazy dog.
Div line-height
is 18px. 18/19=
approx. 94.7%
Div font-size = 10pt
line-height = 1.34em
Div font-size = 10pt
line-height = 1.35em
approx. 94.4%
Row font-size: 8pt
Row line-height: 1.5em
Row of resultant equal div heights*
The quick brown
fox jumped over
the lazy dog.
Div line-height
is 16px. 16/19=
approx. 84.2%
Div font-size = 10pt
line-height = 1.19em
Div font-size = 10pt
line-height = 1.20em
approx. 83.9%
*In Firefox 3.0.16, Windows XP, my HP laptop pc.
Looks the same in IE8.0.6001.18702 (Windows XP, my HP laptop pc).
Whew. Okay. So: 94.7% & 94.4%. Versus 84.2% & 83.9%. So let's say, 94.5% versus 84%.
For typical effective 9pt size, it's 93%*94.5%= approx. 87.9%.
For typical effective 8pt size, it's 84%*84.5%= approx. 71%.
Since there will be some variation across other browsers, might as well round 87.9% up to 88%.
So I'm advocating, for the sake of legibility (accessibility), acceptance of space reduction to 88% instead of space reduction to 71%.
You already have reduction to 88% in IE, around half of all people's browsers, and 71% only elsewhere. That doesn't take into account space reduction which tends to be achieved through double columns, but which you don't achieve with IE, which doesn't do the columns.
So, again to sum up, an increase of reflist fontsize setting to "94%" would:
  —still save space;
  —result in much greater consistency across browsers in terms of each browser's 100% size (see comparisons above in this talk page section), instead of the current typical effective 9pt in IE and 8pt elsewhere; and
  —preserve legibility of footnotes—which are often neither bare citations nor, as in infoboxes, tidy snippets, half of them bolded—for the general reader, who increasingly often uses a laptop and increasingly often uses Firefox or other non-IE browser. You do, at some point, take legibility (accessibility) into account; otherwise you could shrink reflist font size to, say, 50%, and achieve total space reduction (HxW) to around 25%. 71% seems attractive, but it tips the balance too far against legibility, accessibility.
  —You could also reduce the line-height by another tenth of an em, and make up for some of the reduction lost by 94% versus smaller font sizes.
  —Moreover, you could simply make an option: "small" ("94%" setting) and "smaller" (with a setting of "88%" or "89%" — not "90%" since IE renders that the same as up to "97%" and larger than other browsers do). Right now you have a package deal. If an editor wants foonote columns at least in non-IE, s/he has to settle for 8pt font size in non-IE. Please at least give editors a choice. The Tetrast (talk) 22:42, 1 January 2010 (UTC).
Added note, a reminder. The current reflist font-size setting, which in non-IE results in typical effective 8pt or 0.85 of font size, is not "85%" but instead "90%". That's why I'm talking about setting the "smaller" size to "88%" or "89%" - it still means, in effect, typically 8pt or 0.85 of font size across various browsers, but also in IE (instead of the current typical resultant 9pt or 0.93). Likewise "94%" is chosen to achieve typical effective 9pt or 0.93 of font size across various browsers including IE but also others such as Konqueror 3.5 Ubuntu 6.06. See comparisons way up earlier in this talk section. The Tetrast (talk) 23:15, 1 January 2010 (UTC).

In the previous discussion (linked above), it was mentioned that ".references-small is being used in more places." Where else specifically is it being used? -- Quiddity (talk) 20:24, 15 December 2009 (UTC)

Secure links padlock

Currently https links such as links to the secure server use a yellow padlock Lock icon.gif, but when there are many secure links on a page the yellow padlock becomes too overwhelming. So I would like to change to a blue padlock Lock icon blue.gif instead, which matches the external and secure link colour and the colour of the other external link icons External.png Icon External Link E-Mail.png News icon.png File icon.gif.

So I would like to add this code to MediaWiki:Common.csssome skins:

/* Blue instead of yellow padlock for secure links. */
#bodyContent a.external[href ^="https://"],
.link-https {
    background: url("") center right no-repeat;

That will override the declaration for the yellow padlock which is in I have of course tested the code in my personal css-file.

For the discussion that lead to this idea, see Template talk:Wikipedialang#Secure server.

--David Göthberg (talk) 16:49, 21 December 2009 (UTC)

I prefer the blue padlock icon and support this proposal. —David Levy 18:26, 21 December 2009 (UTC)
Seems like a fine idea to me. I will note that url() usually seems to use quotes of some kind (or at least most of the examples I've seen do), but I don't think it makes a difference. Even the examples at seem to be mixed.... --MZMcBride (talk) 14:49, 23 December 2009 (UTC)
I have added them none the less for consistency. EdokterTalk 14:51, 23 December 2009 (UTC)

r60320. Not sure if it'll stick, but if it does, it's a much easier way of implementing this. Although the code above would still be useful until the next scap. Great idea, DG. Happymelon 15:33, 23 December 2009 (UTC)

Thanks guys.
Oops, I partly screwed up. Adding this code to MediaWiki:Common.css broke it for some skins, since those skins don't use a padlock and thus don't have the padding needed for the padlock. So I moved the code to MediaWiki:Monobook.css and MediaWiki:Vector.css. I'll investigate the other skins later. I just did a run at and this seems to work fine in all browsers. (Which is good, since I am reusing the MediaWiki code for loading the padlock.)
MZMcBride and Edokter: Ah right, using quotes seems more correct.
Happy-melon: Oh! Yeah, updating the image in MediaWiki itself seems the best approach in the long run. Here's a link to the padlock used in MediaWiki, when that version of the padlock has become blue, then we can remove my code from MediaWiki:Monobook.css and MediaWiki:Vector.css etc.
--David Göthberg (talk) 15:59, 23 December 2009 (UTC)
DG, it looks like the icon used in Vector is different, it's in .png format ([1]). It looks like the png version is preferred. Could you possibly do a .png version of the blue padlock? Happymelon 16:36, 23 December 2009 (UTC)
I have added the blue padlock to MediaWiki:Simple.css and MediaWiki:Modern.css‎ too. For the Modern skin I had to use slightly different code.
Happy-melon: Yeah, I too just noticed that the Vector skin uses another padlock. I guess the usability project people will be annoyed that we changed their padlock, but I think that padlock doesn't look as good and it is even hard to see that it is a padlock. But the old gif padlock is a bit rough, I'll see if I can make a better version and I'll present that one to you guys here. Anyone else can of course make and suggest a better version too. I think it should match the other external link icons External.png Icon External Link E-Mail.png News icon.png File icon.gif.
I agree we can make a transparent png version of File:Lock icon blue.gif. But I don't have any image editor that can handle transparent PNGs on my OS, so one of you guys will have to make and upload that one. But since all web browsers still handle gifs I think we can wait with that. (At least wait until I have made a better version in gif format.)
--David Göthberg (talk) 17:25, 23 December 2009 (UTC)
Here is my new shiny softer version File:Lock icon blue shiny.gifLock icon blue shiny.gif. Compare that to the old blue version File:Lock icon blue.gifLock icon blue.gif. And the original yellow padlock File:Lock icon.gifLock icon.gif. And a link to the yellow padlock in the Vector skin. (Their vertical alignment is a bit low here due to that they are not inserted with CSS but as regular images.)
I'd like to update File:Lock icon blue.gif to use the shiny softer version, and thus make the shiny version visible in most skins.
--David Göthberg (talk) 18:36, 23 December 2009 (UTC)
I Do not oppose either one. If you update the original though, we may need to change all the CSS URLs to point to the new cached version (on all projects). EdokterTalk 19:18, 23 December 2009 (UTC)
FWIW, here's the vector padlock shifted to blue File:Lock icon blue.png16x16px. It's not particularly pretty though, and oddly enough it only used hard transparency with the soft white edge built in, which makes it rather useless on dark backgrounds anyway.
What's the license of the vector padlock, by the way? If anyone knows, could you fix the license on the file page? Amalthea 20:38, 23 December 2009 (UTC)
Edokter: I assume you mean the original yellow padlock? The MediaWiki system CSS files like loads the padlock by using this code: "url(lock_icon.gif)". And if/when Happy-melon's update to the MediaWiki default padlock is deployed, then the new padlock will be on the same address. So the CSS files on the other projects won't need to be updated. But right, the server admins might have to do some operation to drop the old version from the caches.
The same is true if/when we update File:Lock icon blue.gif. The latest version of it will still be on url(""). The "0/00" part of the URL doesn't change, instead the old versions are moved to new names.
Amalthea: Yeah, the Vector padlock doesn't look much better when blue, but thanks for making the example.
--David Göthberg (talk) 21:47, 23 December 2009 (UTC)
I have updated File:Lock icon blue.gifLock icon blue.gif to somewhat softer colours, more like the old yellow padlock. That makes it less dominant next to the links. So this is now the version I prefer. The shiny version File:Lock icon blue shiny.gifLock icon blue shiny.gif doesn't look enough much like a padlock to me, sometimes when I look at it it kind of looks like a handbag or a person instead. So unless any one else has any more points of view, then I feel finished.
--David Göthberg (talk) 15:00, 24 December 2009 (UTC)

Teletype style fix for Chrome

For an image showing the problem see File:TT, PRE and CODE bug.png. To test how it looks in your browser, see User:Davidgothberg/Test59.

User Rd232 brought to my attention that teletype wikimarkup looks bad in Google Chrome. After some testing we deviced a solution that will make teletype look the same in Chrome as in all other browsers. Thus I intend to add this code to MediaWiki:Common.css:

/* Fix so <tt></tt> tags look the same in Google Chrome. */
tt {
    font-family: monospace, sans-serif;

The code is also parsed by all other browsers, but they already render teletype exactly like that, so it causes no visible change in them.

For the discussion and for our test examples that led to this solution, see Template talk:Nicecode. (We intend to delete that template once this fix has been added to MediaWiki:Common.css, thus that link will soon become red.) If no one sees a problem with this fix I will deploy it some day from now.

--David Göthberg (talk) 18:16, 23 October 2009 (UTC)

Just a note that this also affects code text,
pre text, and
/* source text */
There's a bug report on it somewhere IIRC. ダイノガイ千?!? · Talk⇒Dinoguy1000 20:21, 23 October 2009 (UTC)

What exactly is the problem? Are you sure it will look exactly the same on all other browsers? Does this warrant a bug report for Chromium? —Simetrical (talk • contribs) 21:24, 23 October 2009 (UTC)

Simetrical: As I kind of stated above: See Template talk:Nicecode for the details. I didn't want to fill this page with a copy of that discussion.
And yes, it looks exactly the same on all browsers we have tested it on so far, except for in Google Chrome where it fixes the problem. And that CSS code is clear and simple. And for instance the CSS 4 standard has an informative section showing that the default look for the tt tag is "font-family: monospace". What we added is "sans-serif" which is the standard way to specify non-serif font, so should not cause any problems in any browser.
Dinoguy1000: I think I can fix it just as easily for <code>...</code> and <pre>...</pre>. I tested it in the three browsers I have: Firefox 2.0, Opera 9.02 and IE 5.5, and it didn't change their styles there. But I can't run Chrome on my OS so I can not see if it fixes the problem there. If you have Chrome, try adding the code below to your personal /monobook.css, then wait one minute for the servers to update, then bypass your browser cache.
/* Fix so <pre>, <code> and <tt> tags get normal text size 
   also in Safari, Konqueror and Chrome. */
pre, code, tt {
    font-family: monospace, sans-serif;
    t_font-family: times;
Note: I added the "t_" in front of the second line to remark it away. That's a quick and dirty way to remark away lines that I use in testing. Unremark the second line to test if your browser loads the code. (The second line will make it look ugly on purpose.)
So, does this fix the pre and code tags in Chrome?
I took a look, and it seems we can fix it for the <source>...</source> tags too, but that is much trickier.
--David Göthberg (talk) 02:26, 24 October 2009 (UTC)
Oh dear. I just checked how tt, pre, code and source tags look in lots of browsers, by using the nifty The problem also affects Safari and Konqueror. Not surprising since they too use the KHTML/WebKit rendering engine. And just as Rd232 told me, the problem is that those tags cause extremely tiny text in those browsers. It looks really bad.
I didn't test in if our fix works, since I can't make browsershots load special CSS code. But I verified that those styles hardcoded into a span tag looked right in those browsers, so I am pretty confident. And I trust Rd232's word that it works, and I know it doesn't damage the looks in the browsers I have.
Could any Safari and/or Konqueror users confirm that the fix works. please?
--David Göthberg (talk) 03:07, 24 October 2009 (UTC)
I found the Bugzilla bug; it's 20706. Haven't tested your extended style yet, though. ダイノガイ千?!? · Talk⇒Dinoguy1000 17:21, 24 October 2009 (UTC)
Just tested your code above on Google Chrome 3, works like a charm! Now, to get <source>...</source> to play ball, as well... ダイノガイ千?!? · Talk⇒Dinoguy1000 17:28, 24 October 2009 (UTC)
Dinoguy1000: Ah, thanks for the Bugzilla link and your testing.
As I understand that Bugzilla report this problem also perhaps affects Firefox 3.x users. In my Firefox 2.0 I don't see the problem. I should probably run a new test on and study the results closer.
The code I suggest above is very unlikely to cause any problems. But I will wait for some more confirmation that the code above works, especially from some Safari and/or Konqueror user. And to give due credit: It was Rd232 who noticed the problem and figured out what styles to use. He put them in the {{nicecode}} template. I just recognised that it would be better to use them here in Common.css to modify the <tt>...</tt> tag itself.
I intend to deploy the fix in steps, to minimize the impact if it screws up things in some browsers: First I will just add the fix for <tt>...</tt>, then wait some day to see if we get any complaints. Then add the fix for <code>...</code>, wait another day and then add it for <pre>...</pre>. Fixing <source>...</source> seems more complex, so I might try that some later time.
--David Göthberg (talk) 18:56, 24 October 2009 (UTC)
I think this should be fixed in the software instead of a local fix here. Locos epraix ~ Beastepraix 20:14, 24 October 2009 (UTC)
Well, yes, that's what the bug report is for. However, there is currently no proposed workable solution there, and even after one is suggested (probably David's/Rd232's code), it's hard to say how long it'll be before it's actually fixed. --Dinoguy1000 (talk · contribs) as (talk) 03:55, 25 October 2009 (UTC)

The solution seems to work, but the displayed font (courier) is not a sans-serif font. So how stable can this solution be? −Woodstone (talk) 09:37, 25 October 2009 (UTC)

Woodstone: Yes, some browsers then chooses to use courier. But that is much better than having very small hard-to-read text.
In my browsers (Firefox 2.0, Opera 9.02 and IE 5.5, on Win ME) the solution does not display courier. I explicitly compare with courier in the test examples I use (see Template talk:Nicecode, so I see that the code above does not cause courier for me. For me the fix causes no change, which is correct as none of my browsers have the problem.
I ran a new test on browsershots and I studied the result closely (see the result here). The test used 51 different browsers. As far as I can see our fix will cause 16 of those browsers to change appearance for the tt, code, pre and source tags. It seems the problem with extra small text for those tags affects a whole bunch of browsers, but only for some of their versions and on some OSs. For instance, Firefox 2 on Ubuntu has the problem, but Konqueror 3.5 on Debian does not have the problem. It seems pretty random. Anyway, it seems our solution might solve it in all those browsers, since my hardcoded test code gives correct font in all of them. And my hardcoded test code doesn't seem to change the appearance at all in most of the browsers that does not have the problem. It does slightly change appearance for some of the browsers that does not need the fix, but that slight change is not a problem.
It seems very promising.
So, for starters I have now applied the fix for the tt tag alone. Let's see what happens.
--David Göthberg (talk) 13:55, 25 October 2009 (UTC)
This problem is essentially that some browsers have a dodgy default CSS for the <tt>, <code>, etc, elements? And that what you're doing here is to explicitly envoke the CSS that's the default for most browsers, as the site default for all browsers? If that's the case, and the changes work, I'll add the rule to shared.css if no one complains here. Happymelon 17:25, 25 October 2009 (UTC)
Happy-melon: Yes, that is more or less what we are doing here. But to be exact, the officially recommended CSS for tt tags is just "font-family: monospace;". And if I understand it correctly, some browsers then react badly to that. (I haven't tested if it literally is "font-family: monospace;" that makes those browsers choke. I should perhaps run a test just for fun.) But most browsers choose a sans-serif font for that, so we can code it as "font-family: monospace, sans-serif;" in most browsers, since it means no change for them. But fortunately for some reason it makes the buggy browsers choose a better font.
Or perhaps it is as you say, the buggy browsers use another default CSS than "font-family: monospace;" for tt tags. But in our early testing it seemed that just using "font-family: monospace;" didn't fix it. But I should perhaps test again, since I know more now.
--David Göthberg (talk) 17:54, 25 October 2009 (UTC)

Okay, I'm concerned that the problem isn't understood very clearly here. Could someone create a minimal test-case (like a few lines of HTML) that illustrates the problem? For instance, if you copy this into your URL bar, does it show a significant size difference?

data:text/html;,<!doctype html><p>Foo <code>barim</code> <code style="font-family:monospace,sans-serif">bazim</code>

On Ubuntu, in Chrome 4 and Opera 10, that displays at a consistent size, and there's no visual difference between "barim" and "bazim". In Firefox 3.0 and 3.5, "barim" is much smaller and "bazim" is the correct size, but "bazim" isn't displayed monospaced. I included the trailing "im" so it's easy to tell. Note that I've changed my font preferences in at least some of these browsers, so your results may vary.

In any event, I don't see the fix helping anything – where it makes any difference, it de-monospaces fonts, which is bad. The problem seems to be just that some browsers use bad default monospace fonts. I can't think of any conceivable way that this style rule could change anything for the better, except by removing monospacing. Can someone confirm that this actually gives them proper-size code that's monospaced? —Simetrical (talk • contribs) 18:46, 25 October 2009 (UTC)

I can confirm that with this change added to Common.css, <tt> is no longer monospace for me in Firefox. —Simetrical (talk • contribs) 18:48, 25 October 2009 (UTC)
It's monospaced for me in FF3.5. Happymelon 20:50, 25 October 2009 (UTC)
I have the new test results. It works perfectly. I let 48 different browsers load my Wikipedia test page User:Davidgothberg/Test59, by using plus my own browsers. All 48 browsers showed proper monospaced fonts, both for the <tt> tags and the <code> tags. Note that the <tt> tags now have our fix, while the <code> tags don't have the fix yet. 18 of the browsers had more or less "shrunk" <code>, <pre> and <source> tags. But all of those 18 now had proper sized <tt> tags! This means that the fix works for them, and that they all have loaded the updated Common.css. None of the 48 browsers show any problems with our fix. So I say our solution works perfectly. Well, I should admit there is one little quirk: Some of the browsers now get slightly too good looking <tt> tags, they don't have that rough old-school "teletypy" look anymore.
My testing also showed that using "font-family: monospace, sans-serif;" works, but only using "font-family: monospace;" does not fix it.
Simetrical: I can't tell if a text is monospaced by just looking at the word "bazim", so I think you are mistaken. Try using using this code instead to check:
data:text/html;,<!doctype html><p><code>iiiii<br>mmmmm</code> normal<br> <code style="font-family:monospace,sans-serif">iiiii<br>mmmmm</code> normal
--David Göthberg (talk) 03:19, 26 October 2009 (UTC)
Yes, that data URL shows up with the third and fourth lines not monospace. They look the same as the text "regular". This is Firefox 3.0 on RHEL 5. I see the same at User:Davidgothberg/Test59; tt is not monospaced, code is. This implies that on at least some browsers, your fix is broken, as I said. I strongly suggest that the change be reverted unless you can at least figure out why it actually works in some browsers – voodoo magic has a habit of blowing up unexpectedly. In theory, the change should do nothing AFAICT, since every browser should have a monospace font, and so should never have to fall back to sans-serif. If it does anything, you're relying on browser bugs, and you should make sure you understand precisely what those bugs are before doing that. —Simetrical (talk • contribs) 18:10, 26 October 2009 (UTC)
Simetrical: Well, as I mention above, I have tested this fix on 48 browsers on multiple operating systems, without problems. And some other users have tested it too. See details above. And you mention yourself that you have tinkered with the fonts in your browser. You demand that we know the exact inner workings of this bug, which amounts to that you ask us to study the source code of all the different browsers...
And at least for the <tt> and <code> tags I don't see the pressing need for them to be monospace on 100% of the browsers. It is more important that they get a font size that is actually readable on 100% of the browsers. And the <code> tags use a different background colour, so they would work almost as well even if they get the same text style as the surrounding normal text. Actually, I can't remember ever seeing any usage cases here at Wikipedia where those two tags needed to be monospace, they just need to look different from the surrounding normal text.
Of course, for the <pre> tags it will be more annoying if they get proportional text. Still, if the choice is between having monospace but in a size too small to read, or proportional in a size we can read, then I know which I prefer. And note, so far only your browser will have proportional font with the fix, while a whole bunch of the browsers we tested have too small font without the fix.
--David Göthberg (talk) 23:39, 26 October 2009 (UTC)
Just wanted to quickly add a link to my test page.
--Subfader (talk) 06:21, 26 October 2009 (UTC)
Subfader: Ah thanks! Your images nicely show how it looks without the fix. But your images doesn't show the <tt> tagged text. Had your test page been here on the English Wikipedia (instead of then I bet that the <tt> text would have proper size in your browsers now, since we have now deployed the fix for the <tt> tags.
But what is the really interesting part in Subfader's images is that they show that the tags look different in different skins, ouch. I hope our fix fixes it in all the skins.
--David Göthberg (talk) 11:06, 26 October 2009 (UTC)
I'll grant that it's probably something to do with my Firefox profile. With a fresh profile on my home machine it works as you say; I didn't test on my school machine. But I wasn't using the fresh profile. There are many thousands of browser version + settings + OS + random confluence of stars combinations out there – a lot more than 48. That's why we have standards, so you don't have to test a tiny number of configurations and hope that they happen by good fortune to be representative of the computers of everyone in the world.

I still think it's really not a good idea to deploy something like this without knowing how or why it works. The reason the fix works should be established before it's deployed.

And I don't see a background on <tt>, actually. —Simetrical (talk • contribs) 02:21, 27 October 2009 (UTC)

You don't seem to grasp that we can't establish the reason the fix works without reading the source code of all those faulty browsers. And we would also have to study why they fail on some OSs but not on other OSs, so we might have to read the code in the OSs that provide the fonts too. That would be a ridiculously big undertaking. And some of those OSs are closed source...
But I can tell you what I know, and what I can guess:
The officially recommended default browser CSS for <tt> and <code> tags is "font-family: monospace;". In this case we instead use the code "font-family: monospace, sans-serif;". And according to the official CSS standards, the browsers should then first try to use monospace font, and if they don't have a monospace font they should use a sans-serif font. And all browsers have (or at least should have) a monospace font. So not surprisingly all of the tested browsers did show a monospace font (except your browser). So we are following the standards, it is your browser which are not following the standards.
Now, why doesn't it work when we just use "font-family: monospace;"? Well, if you look closely at the default style some browsers use for <tt> and <code> then it isn't just a monospace font. Instead they use a slightly more rough looking and slightly smaller font, probably on purpose to make it look more "teletypy", more like old typewriter text. Note that many fonts aren't freely scalable, they aren't vector graphics, instead they come in fixed size steps. So my guess is that for some combinations of browser and OS, then the next smaller step (from normal text size) for that font is the too small size we are seeing. So it is simply an unlucky combination. Now, if we tell the browser to use "font-family: monospace;" then why doesn't it choose the normal monospace font instead of that special teletypy looking font? Well, the default CSS for those tags officially already is "font-family: monospace;", so that is probably the attribute registered to those tags in the DOM, since there is no CSS attribute called "teletypy-looking-font". So to the DOM handler it looks like we are telling it to set the style that those tags already have, so it does nothing. Thus not changing font.
But when we tell it "font-family: monospace, sans-serif;" it sees it is different from what already is registered to the object, thus it runs the font handling routine for that object. Which then causes the monospace font to be loaded.
This means that even if the teletype font was of a decent size it gets exchanged to the regular monospace font. And that is exactly what we see happen in many browsers: Our fix unfortunately makes the <tt> tags look a little too good in some browsers, they loose their rough teletypy look.
So there, that was my guess why our fix works.
--David Göthberg (talk) 04:08, 27 October 2009 (UTC)
No, it would not be a huge undertaking to figure out what causes the bug. You'd just have to fiddle around to see what triggers it, and possibly (especially in the case of open-source browsers) talk to some of the developers about it. It's a pretty routine thing. But never mind. I don't personally have the time right now to look into it very deeply. Whatever the case may be, <tt> is now almost indistinguishable from regular text in the browser I use at school, if that counts for anything. —Simetrical (talk • contribs) 01:24, 28 October 2009 (UTC)

The browser has an extra feature to allow the user to specify font scaling of monospace fonts; in webkit this is buggy as it selects the system based on the last font in the list. The internal font scaling seems to be size * (default monospace point size)/(default proportional point size). This can actually cause some humorous effect where your decreasing the proportional size, but the renderer wont go below 9px (see /skins-1.5/monobook/main.css comment) and the monospace font will actually increase in size (as does <span style="font-family:sans-serif,monospace">). — Dispenser 05:07, 27 October 2009 (UTC)

Where is this preference controlled? I don't recall ever seeing it. If it's only a WebKit problem, why is it showing up for Firefox too in some cases? And why would Firefox sometimes render sans-serif but usually not, when given font-family: monospace, sans-serif? —Simetrical (talk • contribs) 01:24, 28 October 2009 (UTC)
Okay, I found it in Firefox: Content → Fonts & Colors → Advanced... The existence of this feature actually does seem to violate CSS, because changing the font family shouldn't change the font size as well, or at least CSS doesn't explicitly permit that. One obvious thing to try would be tt { font-size: 1em }, but that doesn't work. Maybe there's some other way to game it, if we really want to.

Relevant link: Mozilla bug 175415, open since 2002. Ian Hickson apparently shares my attitude that this feature is broken and contrary to the CSS spec, but nothing ever got done about it. The reason it uses the rightmost font instead of the one actually used is because it's too expensive to figure out which is actually used all the time, apparently. The discussion there points to font-size-adjust, which might be worth looking at. It doesn't seem directly useful to us, unfortunately. I didn't find anything in WebKit's bug tracker.

Anyway, the fact that monospace text is smaller in some browsers appears to be a deliberate decision by browser vendors, based on the metrics of commonly-used default monospace fonts. If users want larger monospaced text, they can change it in their browser preferences. With my current font, the smaller-size text actually seems to look better, if anything. Wikipedia shouldn't mess with users' browser preferences. —Simetrical (talk • contribs) 01:53, 28 October 2009 (UTC)

Dispenser and Simetrical: Gah! I just wrote a looong message with more test results and analysis, and then suddenly I understood more of what you guys are talking about. And you are right, this is a result of the setting for the monospace font size in the browsers. I can now repeat the problem in my own Firefox 2.0 by using that setting. And the current fix we use then works on my browser too.
Unfortunately in some browsers the <tt> and <code> text become slightly hard to differentiate from normal text when we use our fix. So I think I now somewhat agree with Simetrical, Wikipedia perhaps shouldn't mess with users' browser preferences. If they use bad settings, then we perhaps shouldn't use voodoo to fix it for them. But I'll have to think more about this.
Anyway, since I have already written it and it doesn't contradict the above conclusion, here is my long message:
I have done more tests. Both of "font-family: monospace, sans-serif;" and "font-family: monospace, serif;" give the same results on all the 45 tested browsers, it makes <tt> and <code> text that are too small become larger. Using "font-family: monospace, monospace;" also gives that result, except for one browser. I'll explain below. (While as I have mentioned before, "font-family: monospace;" doesn't help.)
Dispenser: I assume you by "the list" mean the list of font families in for instance "font-family: monospace, sans-serif;", right? Then provided I understand you correctly: In my test run there were a Safari 4.0 and a Chrome 3.0 with too small <tt> and <code> text. What you are describing fits very well with my results for that Safari, but doesn't fit for that Chrome. But both are WebKit based. And it doesn't fit for Firefox related browsers.
In that Safari, when using "font-family: monospace, monospace;" the <tt> and <code> text remained too small. And using "font-family: sans-serif, monospace;" caused tiny sans-serif proportional font.
However, the Chrome 3.0 instead behaved just like the Firefox related browsers: Using "font-family: monospace, monospace;" the <tt> and <code> text became close to normal sized. And using "font-family: sans-serif, monospace;" gave normal sized sans-serif proportional font.
Dispenser: So your model only fits for some of the WebKit browsers. For the other browsers there is something other going on, perhaps something like what I described above. Note that your model says that using "font-family: monospace, sans-serif;" or "font-family: monospace, serif;" should work on all browsers that fits your model. (Work as in giving us decently sized monospaced text.)
So basically, using "font-family: monospace, sans-serif;" still seems to be a decent option. (But we can just as well user the shorter "font-family: monospace, serif;".) However, Simetrical is right in that there are several concerns too. So I don't know if we should use the fix or not.
--David Göthberg (talk) 05:46, 28 October 2009 (UTC)

Personal CSS fix

I can't follow the threading here, so I'll just add to the end... I inserted this .css

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

into my User:DavidBiesack/monochrome.css, and with Chrome on Windows XP SP2 (32 bit) I still see pre text as much smaller than surrounding text on Wikipedia, whereas <tt> and <code> appear at a normal size. (Would it help to upload a screenshot?) --19:54, 16 December 2009 (UTC)

Biesack: It should be /monobook.css, not /monochrome.css. I moved the page for you to fix it, I hope you don't mind? Now all you have to do is to bypass your browser cache and you should see the fix.
And thanks for your report here. Your report confirmed that our fix works in your browser, since you see that we have fixed it for the <tt> and <code> tags.
--David Göthberg (talk) 15:50, 18 December 2009 (UTC)
Small pre text on personal monobook.css.png
Ah, silly me. With this correctly in my /monobook.css the <pre> text on this page displays with the correct font size. However, the text on /monobook.css is still quite small; see screen shot at right. (this was after clearing my cache/refreshing/?action=purge] Does that use a different CSS style? --DavidBiesack (talk) 15:14, 21 December 2009 (UTC)
Ouch! You are right. Thanks for pointing out that I missed this case.
Yesterday I added the fix for the <pre> and <source> tags in the global .css files. I was just going to say that "the code you see on your .css page isn't <pre> tagged, but <source> tagged text". But taking a closer look I see that MediaWiki doesn't exactly use <source> tags for the code in .css pages, but yet another notation. I will figure out how to code the fix for the .css pages. Thankfully I too see the bug when I use my Firefox 2.0 and the Vector skin, so I can do the testing myself. The bug is visible in .css pages both in User and MediaWiki space.
--David Göthberg (talk) 17:30, 21 December 2009 (UTC)
Biesack: I changed the code in MediaWiki:Geshi.css so the fix now also covers .css and .js files shown in User and MediaWiki space. So bypass your browser cache and your /monobook.css page will have normal text size.
--David Göthberg (talk) 18:51, 21 December 2009 (UTC)
Great - thanks! looks good in Chrome --DavidBiesack (talk) 20:33, 12 January 2010 (UTC)

Section break. Teletype style fix

I have new data on this:
This can happen even if the user has correct settings in his browser. I just noticed that when I use the vector skin, then the <code> and <pre> tagged text becomes really tiny. And that's in spite that I have the correct text settings in my browser (and looking fine in the other skins), and even though there is nothing in any of the vector CSS files that should cause this. So this is indeed a browser bug, it is not the users' fault. I see the problem in my Firefox 2.0, but not my Opera 9.02, so it is not a fault in the vector CSS.
The <tt> tagged text looks fine in the vector skin, so our fix is working. (And I have just tested, our fix will also work for the <code> and <pre> tags in the vector skin.)
We have now had the fix deployed for the <tt> tag for one month, and it seems to be working well. So I would like to now deploy the fix for the <code> tag and later on for the <pre> tag and the <source> tag.
--David Göthberg (talk) 01:11, 22 November 2009 (UTC)
I added this fix for the <code> tags on 26 November. And today I added the fix for the <pre> tags. I will fix the <source> tags when I have investigated them further, they have much more complex classes.
--David Göthberg (talk) 21:16, 18 December 2009 (UTC)
The <source> tags were easier to figure out than I thought. Here's the code to fix them:
/* Fix so <source> tags get normal text size also in some 
   versions of Firefox, Safari, Konqueror, Chrome etc. */ div  {
  font-family: monospace, sans-serif !important;
#content pre {
  font-family: monospace, sans-serif;
The above code should work for all the different languages that the <source> tags can render (I have tested for a bunch of the languages). And the code uses as low CSS specificity as possible. Unfortunately I had to use the "!important" keyword for one of the lines, there's no way around that. The code should work in all skins except "modern", since that skin doesn't wrap the content area in "<div id="content">". We could add extra code to work around that, but I think we shouldn't bother.
I intend to add the above code to MediaWiki:Geshi.css.
--David Göthberg (talk) 01:52, 19 December 2009 (UTC)
YesY Done - I have now added the fix to MediaWiki:Geshi.css, thus this is entirely fixed for the English Wikipedia. If this works without problems then some month from now we should ask the devs to apply this for all Wikimedia projects.
--David Göthberg (talk) 18:46, 20 December 2009 (UTC)
Will not happen (as far as my opinion counts as a dev) without a clear understanding of whether and why this occurs when users' browser preferences don't specify it. We do not check in CSS hacks that seem to fix some problem but we don't really know why. —Simetrical (talk • contribs) 20:05, 20 December 2009 (UTC)

Hidden items

I have added the new "sysop-show" class in MediaWiki:Sysop.css. That's the CSS loaded only for admins.

And I have created the MediaWiki:Accountcreator.css and added code in MediaWiki:Common.js so that that CSS-file is loaded only for accountcreators. (See MediaWiki talk:Common.js#Accountcreator CSS about that loading from javascript.) And I have added the "accountcreator-show" class in Accountcreator.css.

The reason is that we are currently updating the editnotice system. We need to have some links that are normally hidden, but admins and accountcreators should see them. See discussion at Wikipedia talk:Editnotice#Navbar. But while I was at it, I made it so this hiding system can be reused in other places.

Here's how these new classes work:

1: Hidden div, only visible for admins:
<div class="sysop-show" style="display: none;"> 
:Text only visible to admins. 

2: Hidden div, only visible for accountcreators:
<div class="accountcreator-show" style="display: none;"> 
:Text only visible to accountcreators. 

3: Hidden div, only visible for admins ''and'' accountcreators:
<div class="sysop-show accountcreator-show" style="display: none;">
:Text only visible to admins ''and'' accountcreators.

Which renders this:

1: Hidden div, only visible for admins:

2: Hidden div, only visible for accountcreators:

3: Hidden div, only visible for admins and accountcreators:

I made it so the "sysop-show" and "accountcreator-show" classes work in <div>, <span> and <table> tags. That should cover most usage cases. But if there is a need to hide other kinds of items, then we can easily add that too.

Note that the hiding is not secure, any user can add the declarations for those classes in their personal /monobook.css and will then see the hidden items. So these classes should only be used for convenience, to save normal users from seeing things that they anyway can't use.

--David Göthberg (talk) 12:38, 6 January 2010 (UTC)

What's the point, though? I can still see them if I want to. If this is required, I'd say it should be implemented in MediaWiki. —Ms2ger (talk) 20:39, 6 January 2010 (UTC)
If we don't hide them then the links to create group and page editnotices would show up above the edit window for all users on almost all pages. Those links are slightly ugly, and they take up some page height. But only admins and accountcreators can use those links since editnotices are automatically protected, other users get an error message when they try to use those links. So they are useless and confusing for all other users.
Those links will not be added by MediaWiki, but instead by code in {{editnotice load}}. But sure, it would be nice if MediaWiki supplied some classes to hide things based on what kind of user is seeing the page. I can think of uses for "user-show" (to only show things for logged in users) and "autoconfirmed-show". And perhaps for some other user groups too. By the way, all those are easy for us to add by using Common.js and some CSS. We even could have a use for "own-userspace-show" that only would show in userspace, for the user who's userspace it is. I can code that one too, but it is a bit trickier.
The good thing with adding these classes using javascript and CSS is that it doesn't affect the cache servers, so even if implemented in MediaWiki it should probably be done in a similar way. And as I usually say: Let's first test and develop it here locally, and then when our usage has settled we can ask the devs to add it to MediaWiki so this feature gets automatically available to all Wikimeda projects.
--David Göthberg (talk) 21:38, 6 January 2010 (UTC)
The whole account creation deal isn't part of MediaWiki, so this can't really be added to MediaWiki. It would be nice if someone tried to add the account creation software to MediaWiki, though! It really doesn't seem like it should be a toolserver tool. That way the links could just not be provided if the user doesn't have permission, like delete links and so on. I doubt usergroup-specific hiding classes are useful enough to be worth adding to MediaWiki. —Simetrical (talk • contribs) 20:35, 7 January 2010 (UTC)
The reason I want to show the editnotice links not only to admins, but also to accountcreators is that accountcreators happen to be able to create and edit the editnotices. Apparently that is a side effect of how the editnotices are auto-protected. And since accountcreators can edit them, some admins have stated they will hand out the accountcreator right to any user they trust and that has a legitimate need to handle editnotices.
And since I anyway needed to show the links for us admins, it was so easy to reuse the same code to make it work also for the accountcreators.
--David Göthberg (talk) 21:10, 7 January 2010 (UTC)
How does this differ from Wikipedia:HiddenStructure, will we be only limiting as stylistic effect? — Dispenser 22:17, 8 January 2010 (UTC)
Not much. Though we shouldn't forget that hiddenstructure was primarily used to hide optional parameters of infoboxes before we had parserfunctions. That said, we are a LOT further with CSS support these days (hiddenstructure was phased out 5 years ago). Also hiddenstructure was used to HIDE elements, where this is technically used to SHOW hidden elements. A small difference. Though some of the arguments of the hiddenstructure debate would certainly apply. —TheDJ (talkcontribs) 01:50, 9 January 2010 (UTC)
Right, we have learnt many lessons from the old hiddenStructure. I use hardcoded style="display: none;" to hide the items, instead of CSS code in Common.css, thus hiding these items even when a browser doesn't load Common.css. Although most text based browsers don't understand even hard coded styles, so these links do show up in for instance the Dillo browser (I have tested that). But if I understand it right Dillo is now probably the most popular text based browser, still it is only used by 1 out of 10,000 users. (But I haven't checked these stats, I just read them in passing somewhere.) And most modern screen readers don't use text based browsers, but instead use one of the main graphical browsers that do understand styles.
But more importantly: We should only use this hiding and showing method to hide very short things. In this case I am hiding two links named "Group notice" and "Page notice". And they only exist when editing a page, people reading the page will never have them in the page code.
If anyone thinks two short links on the edit page is to much for the screen readers, then consider all the other stuff that is shown above and below the edit window. I use an old slow computer so I have had to manually add CSS to my /monobook.css so my browser doesn't render all that stuff, to get decent edit page rendering times.
--David Göthberg (talk) 05:43, 9 January 2010 (UTC)
I have now also created MediaWiki:Ownuserspace.css. The reason is that I am planning to make it so the red "Page notice" link in user space is only shown to users when they edit their own user or user talk page. See discussion at Wikipedia talk:Editnotice#User page links. To do this I intend to add two lines of code in MediaWiki:Common.js/edit.js which loads MediaWiki:Ownuserspace.css when a user edits his/her own user page.
That I only load that CSS page when the users are editing makes it harder for them to abuse the show/hide function on their user pages, since the items would be hidden also to themselves when just viewing the page. I have made it so admins see the hidden items already when just viewing the user's page.
--David Göthberg (talk) 23:17, 12 January 2010 (UTC)
I have deleted "MediaWiki:Ownuserspace.css", since not needed anymore. Amalthea pointed out a better way to detect when a user is editing his own user page. See Wikipedia talk:Editnotice#User page links.
But we still have to use the CSS based unhiding of items for sysops and accountcreators (as described further up this section).
--David Göthberg (talk) 12:20, 14 January 2010 (UTC)

Pre overflow

Per an idea of bugzilla:22060 We can consider setting overflow:auto for the <pre> element.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ultricies semper enim, ac porta purus condimentum a. Fusce rhoncus suscipit lacus eu lacinia. Aliquam hendrerit cursus placerat. Etiam pulvinar lacinia malesuada. Sed a nunc sapien. Quisque rutrum nunc sed sem porttitor ac ullamcorper lectus tristique. Sed ac libero est, non.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ultricies semper enim, ac porta purus condimentum a. Fusce rhoncus suscipit lacus eu lacinia. Aliquam hendrerit cursus placerat. Etiam pulvinar lacinia malesuada. Sed a nunc sapien. Quisque rutrum nunc sed sem porttitor ac ullamcorper lectus tristique. Sed ac libero est, non.

I think it is a clear improvement. —TheDJ (talkcontribs) 19:03, 8 January 2010 (UTC)

Yes, why not. Locos epraix ~ Beastepraix 19:30, 8 January 2010 (UTC)
I guess you don't own a netbook? — Dispenser 22:13, 8 January 2010 (UTC)
Please be more descriptive. Compared to the world of consumer goods, I own just small set of items. —TheDJ (talkcontribs) 02:07, 9 January 2010 (UTC)
Using style="overflow:auto;" breaks badly in many browsers. So it is better to not use it and instead manually line wrap the examples we put in <pre> tags to avoid making them to wide.
--David Göthberg (talk) 05:47, 9 January 2010 (UTC)
I've been wondering, but i don't think that any of the browsers that actually support overflow:auto have a serious bug. In my memory the issues were all with setting visible or scroll (and seems to say something like that). The only big problem here I think, is that IE will draw the scrollbar inside the pre element, where most other browsers draw them outside the contentbox. However judging from the amount of margin and lineheight on pre elements, I don't think it will be a real issue. /me wonders where Edokter is... —TheDJ (talkcontribs) 23:25, 12 January 2010 (UTC)

I believe that's what i created the overflowbugx class for btw. Adding an example of that here.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ultricies semper enim, ac porta purus condimentum a. Fusce rhoncus suscipit lacus eu lacinia. Aliquam hendrerit cursus placerat. Etiam pulvinar lacinia malesuada. Sed a nunc sapien. Quisque rutrum nunc sed sem porttitor ac ullamcorper lectus tristique. Sed ac libero est, non.

TheDJ (talkcontribs) 23:32, 12 January 2010 (UTC)

Would using overflow-x:auto instead of just overflow: help? It's more modern than the normal overflow, so older browsers might just ignore it rather than choking horribly? Happymelon 23:39, 12 January 2010 (UTC)
What I meant with "breaks badly in many browsers" is that Internet Explorer 6 and down, and some other browsers don't understand "overflow:auto;" at all. So it doesn't help what fixes you guys apply to it, those browsers will still display the full width of that <pre> tag. And even worse, some of them then make the whole content area that wide, thus making every paragraph on the page that wide. Thus forcing the user to scroll back and forth like crazy to read each paragraph on the page. Making the pages pretty much unreadable. (I know from personal experience.)
So again, manually line wrapping the text in the <pre> tags is much better. If we make the <pre> tags automatically overflow, then most of our editors won't bother to manually line wrap, and thus users with some browsers can no longer read many of the articles with <pre> tags in.
--David Göthberg (talk) 01:17, 13 January 2010 (UTC)
Even in IE8, the overflow:auto and class="overflowbugx" examples are both unreadable (rendered identically in fact), because the horizontal scrollbar rendering inside the box reduces the height of the remaining text area to less than the height of the line of text, which in turn causes a squashed vertical scrollbar to appear. Evidently the margins and lineheights are not sufficient to stop this from being "a real issue"! — Richardguk (talk) 02:08, 13 January 2010 (UTC)
IE6 ignores "overflow:auto", and seems to ignore "overflow:scroll" as well... at least for pre tags. If this 'fixes' the display for other browsers, I don't see a problem with it. But above all, text in pre tags should be hand-wrapped. EdokterTalk 13:43, 14 January 2010 (UTC)

The problem I was getting at with netbooks, is the screen is not tall enough to display the horizontal scroll bar and the top of the content. This results in the user scroll down a screen or more to scroll the text, now off screen, to the left. It is further compounded by lack of horizontal scrolling on most touch-pads. A solution to this would be to have a floating scroll bar on shorter screens. — Dispenser 17:26, 14 January 2010 (UTC)

Classes tright a tleft not working in Vector

The CSS classes tright and tleft are specified in Monobook.css, so that some left/right floated elements (e.g. {{Bar box}}) have proper margin. It is also present in commonPrint.css, this time also with the float: left/right and it specifies border there, not margin.

The issue I'm having is that Vector for screen doesn't specify this class at all (if I haven't overlooked something). What I'm proposing is to either move the class to Common.css from Monobook.css, so that it works in all skins, or, if that would cause any problems, at least copy it to Vector.css. Svick (talk) 14:30, 15 January 2010 (UTC)

Vector does have these classes (they are in main-ltr.css), without them thumbed images would not work. But tright/tleft set white borders (as margins), and if you overwrite those borders like done in Bar box, then the relevant margins disappear. —TheDJ (talkcontribs) 14:59, 15 January 2010 (UTC)
Ah it are the overwrites of the classes that are the problem. I concur, this should be moved from Monobook.css to Common.css —TheDJ (talkcontribs) 15:01, 15 January 2010 (UTC)
For reference, the code was added in August 2007. MediaWiki_talk:Monobook.css/Archive_4#CSS_code_to_remove_ugly_border_around_thumb_images. The intent of the original white borders, was to avoid having the images connect to the underlining of the H2 elements. —TheDJ (talkcontribs) 23:11, 15 January 2010 (UTC)

Code in Monobook.css

/* Makes the background of a framed image white instead of gray. */
/* Only visible with transparent images. */
div.thumb div a img {
    background-color: #fff;

/* Remove white border from thumbnails */
div.thumb {
    border: none;
div.tright {
    border: none;
    margin: 0.5em 0 0.8em 1.4em;
div.tleft {
    border: none;
    margin: 0.5em 1.4em 0.8em 0;

Proposed code for Common.css

/* Remove white border from thumbnails */
div.thumb {
    border: none;
div.tright {
    border: none;
    margin: 0.5em 0 0.8em 1.4em;
div.tleft {
    border: none;
    margin: 0.5em 1.4em 0.8em 0;

Note I left out the setting for the thumbimage background. First of all that statement should long ago have been changed to img.thumbimage instead of "div.thumb div a img". But secondly, I'm not really sure why we are displaying a white background for transparent images in a gray box.... Doesn't that kind of defeat the point of transparent parts of images ? —TheDJ (talkcontribs) 23:41, 15 January 2010 (UTC)

Since I wrote some of the CSS we use to handle the image backgrounds here at the English Wikipedia:
In some namespaces we use chequered background to make it visible what images are transparent. But in article and user space we use white background since that looks better. Using a white background still shows the image's size, its own "padding", and height to width ratio. If we use a grey background (same as the surrounding area) then we can't tell where the image ends and where the surrounding area begins. And that is very confusing, I have tested that. And the transparency in most images are made with white background in mind, since our articles and most of our message boxes etc use white background. Grey background for instance makes the shadows that some icons use hard to see.
So using the white background is much better than using a grey background.
The images don't need their transparency when they are displayed as thumbs or in a gallery. They only need the transparency when used in message boxes and directly on the pages etc.
(I currently have no comments on the border code above, sorry.)
--David Göthberg (talk) 05:50, 16 January 2010 (UTC)
 DoneTheDJ (talkcontribs) 18:34, 17 January 2010 (UTC)

Class nowraplinks should work also for selflink

In {{navbox}}, the lists have set class nowraplinks, so that links in navboxes don't wrap. This doesn't work when a navbox is in an article listed there, because it isn't a link anymore. Instead, the text has class selflink. My suggestion is to change

.nowraplinks a,
sup.reference a { white-space: nowrap; }


.nowraplinks a,
sup.reference a { white-space: nowrap; }

to fix this issue. Svick (talk) 22:13, 26 January 2010 (UTC)

I ran some tests, and I agree. But there should be a space in ".nowraplinks .selflink", since the nowraplinks class is in the {{navbox}} table or {{nowraplinks}} span that surrounds the "<strong class="selflink">". So here's the correct code:
.nowraplinks a,
.nowraplinks .selflink,
sup.reference a { 
    white-space: nowrap;
--David Göthberg (talk) 13:18, 27 January 2010 (UTC)
Yes, that's what I meant. Svick (talk) 15:00, 27 January 2010 (UTC)
That would indeed be good―I'm rather surprised that it hadn't been proposed yet. —Ms2ger (talk) 20:14, 27 January 2010 (UTC)
YesY Done - Svick: Thanks a bunch for finding this bug! :)) Ms2ger: Right, I almost feel silly since I was the one who created the nowraplinks stuff and we have used it for 2.5 years now. But I think this is the kind of thing that is "oh, of course, that's obvious" once you see the solution, but until then is hard to discover. Or as we say in my language: "It is the 'simple' things that are hard to discover." Line wrapped self links are not that common, I for one have probably never seen a line wrap in a self link. And I guess most people who noticed line wraps in self links didn't know we could easily fix it, so they didn't report it as a problem. While Svick both had the luck to see a line wrapped self link, and the expertise how to fix it.
--David Göthberg (talk) 21:12, 27 January 2010 (UTC)