MediaWiki talk:Common.css/Archive 16

Page contents not supported in other languages.
From Wikipedia, the free encyclopedia
Archive 10 Archive 14 Archive 15 Archive 16 Archive 17 Archive 18 Archive 19

Glossary classes

Please add:

.glossary-term { margin-top: 0.4em; } /* from Template:Term */
.glossary-multiterm { margin-top: -0.2em; } /* from Template:Term */
.glossary-defintion { margin-top: 0.4em; } /* from Template:Defn */

This is stuff to control the appearance of templates {{Glossary}}, {{Term}} and {{Defn}}, as documented at MOS:GLOSSARIES, and it's less messy to put it in the css file than have the templates spitting this out inline. The code's been tested in detail at Template:Term/sandbox and the test code there, after adding this CSS to Special:Mypage/Common.css. After the code's added to MediaWiki:Common.css, Template:Term/sandbox code (up to <noinclude>) can replace that in Template:Term, Template:Defn/sandbox's can replace Template:Defn's, and Template:Glossary/sandbox's can replace Template:Glossary's. There are other classes for the glossaries, like .glossary-dfn, but they're not presently doing anything, just there in case someone wants to do something with them at the user level or automated tool level.  — SMcCandlish ¢ ≽ʌⱷ҅ʌ≼  15:26, 23 May 2014 (UTC)

I have to say the effect is quite minimal, and without the CSS the lists look quite OK. I'm not a fan of changing standard list elements default spacing behaviour. It also requires the editor to use .glossary-multiterm |multi=1 whenever (s)he wants to use grouped terms. How big of a use case is this? Edokter (talk) — 16:43, 23 May 2014 (UTC)
It's not something I'd do regularly, either, but without the vertical kerning, multiple-term entries look like some kind of error, like multiple definition-less entries followed by a complete one, rather than one entry with multiple term variants and a single definition.

The use case is as broad as WP:ENGVAR where variant terms have similar enough spellings to be grouped. That's rather frequent. The possibility of using dl entries with multiple terms is often overlooked (not just on WP), and I'd bet good money it's because the spacing is so poorly managed. The other tweaks (to -term and -definition) are to produce more consistent (i.e., less confusing) results when inline and block elements are used within glossaries; they're not arbitrary monkeying, but slight adjustments (tested in multiple browsers) to bring things in line with spacing between paragraphs.

To my usabilty and design eyes, the difference between Template:Term/sandbox's testcases at column 1 ("Sandbox code with classes") and column 3 ("Basic templates only", i.e. how it's going to look without the -multiterm CSS) is quite marked with regard to the spacing between the group of three terms with one definition. (Column 2 can basically be ignored; it's the half-way state of the current templates, between the sandbox code and what was there a week ago.)

The difference between column 4 ("Bare HTML", with no CSS at all other than what may already be applied site-wide) in the spacing between the end of a term's last definition and the next term is more subtle, but seems immediately apparent and positive to me: It avoids the serious problem of there being more space between paragraphs inside a definition than between term A's definitions and term B in the most common markup context (no explicit paragraphs or other blocks in most definitions, only inline content). I.e., without the vertical CSS tweaking of the -entry and -definition CSS, there is (in column 4) very notably less space between "Nasty" ending the second entry and "aspirin" beginning the third, than between the "aspirin" term and its definition block content within that third entry. Without fixing it, any entries with block content ruin the scannability of the page, the clean and clear grouping of terms with their definitions, and thus contribute to a visually confusing, cluttered "wall of text" feel. This looks better in all three other columns because I'm using inline CSS to deal with it. I can just demonstrate the effect more clearly here:

bare HTML test code
<dl>
<dt>term 1</dt>
<dd>Definition 1 (inline): {{lorem}}</dd>
<dt>term 2</dt>
<dd><p>Definition 2 (a block): {{lorem}}</p></dd>
<dt>term 3</dt>
<dd>Definition 3 (inline): {{lorem}}</dd>
</dl>
Note how term 2 is grouped closer to the definition of term 1 than to its own definition.  — SMcCandlish ¢ ≽ʌⱷ҅ʌ≼  21:20, 23 May 2014 (UTC)
Ping...  — SMcCandlish ¢ ≽ʌⱷ҅ʌ≼  19:06, 31 May 2014 (UTC)
I asked about the use case, and there is no answer for that. The transclusion counts for {{glossary}} and {{term}} are 86 and 110 respectively. I consider that too little for inclusion in Common.css. So I recommend applying the style inline. Edokter (talk) — 21:50, 31 May 2014 (UTC)

navbox-level3 / navbox-levelN classes?

I can access the navbox "Level 1" and "Level 2" backgrounds directly using the navbox-title and navbox-abovebelow classes, but Level 3 is more tricky as I think it assumes a navbox-subgroup context. Could, therefore, a "context-free" Level-3 class be added, please, say as "navbox-level3"? (It might also then be worth adding "navbox-level1" and "navbox-level2" as aliases for navbox-title and navbox-abovebelow..?) Sardanaphalus (talk) 11:34, 9 June 2014 (UTC)

collapsible removed

hi mediawiki have removed collapsible in mediawiki 1.24 wmf 4. so it will need to be added to common.js 94.197.122.78 (talk) 19:13, 9 May 2014 (UTC)

I think what .78 is referring to is the removal of CollapsibleNav; in other words, the left navigation bar menus will no longer be collapsible. Should we gadgetize? Edokter (talk) — 22:58, 9 May 2014 (UTC)
hi yes 90.219.90.180 (talk) 15:17, 16 May 2014 (UTC)
The feature can be readded to core, if it is written from scratch in a more performant methodology. If someone want to pioneer that with a gadget, then why not. —TheDJ (talkcontribs) 19:42, 18 May 2014 (UTC)
I have the old code at hand, whcih I can turn into a gadget easily and work from there. Edokter (talk) — 23:13, 18 May 2014 (UTC)
Ok 2.218.227.89 (talk) 21:11, 26 June 2014 (UTC)
Except for the license requirements: the old code is under GPL (?) which is not (?) compatible with CC-BY-SA, so the code whould not be in the wiki. Helder.wiki 22:06, 26 June 2014 (UTC)
The two licenses are compatible as long as the source is indicated, which it is. -- [[User:Edokter]] {{talk}} 22:59, 26 June 2014 (UTC)
See also:
Helder.wiki 10:53, 27 June 2014 (UTC)
Which leads to WP:COMPLIC. -- [[User:Edokter]] {{talk}} 12:38, 27 June 2014 (UTC)

238px widths

Here, the 238px widths specified in Common.css (e.g. for mbox-small, mbox-small-left, etc) appear close to but not exactly the same as the 22.0em default width used for {{Sidebar}}s, {{Infobox}}es, etc. Can they be tweaked accordingly, or is this just a coincidence resulting from e.g. the zoom setting (the default 100%, I think) in the Firefox-based browser I'm using? Sardanaphalus (talk) 09:06, 28 June 2014 (UTC)

Protected edit request on 24 July 2014

Please change:

div#mw-protect-cascadeon {

to:

div#mw-protect-cascadeon,
div.titleblacklist-warning {

Jackmcbarn (talk) 18:30, 24 July 2014 (UTC)

 Done Legoktm (talk) 02:21, 25 July 2014 (UTC)

q - curly quotes

I just noticed that <q> is now whitelisted by Sanitizer.php:

Markup Renders as
<q>HyperText Markup Language</q>

HyperText Markup Language

But it uses curly quotes, which are recommended against per MOS:QUOTEMARKS. Should we add CSS to change the style? --  Gadget850 talk 20:38, 9 July 2014 (UTC)

I believe that <q> was whitelisted as a side-effect of https://gerrit.wikimedia.org/r/72981 (which also fixed its nesting behavior). However, I do not believe that the CSS styling is wrong. MOS:QUOTEMARKS just refers to how the quotation marks are represented in wikitext. One could make a strong argument that the function of CSS is precisely to handle presentation aspects like that. (That said, the gratuitous use of <q> instead of quotation marks also runs contrary to some recommendations in MOS:QUOTEMARKS, since the quotation marks will not exist in the HTML source.) C. Scott Ananian (talk) 20:55, 9 July 2014 (UTC)
Should this element be used in some of the quotation templates? Helder.wiki 21:16, 9 July 2014 (UTC)
There's something a bit odd going on here. The text inside <q>...</q> above is rendered in straight double quotes in Opera, but curly double quotes in Chrome, Firefox and IE11. I suspect that the user agents may have different interpretations of q::before {content: open-quote;}.
As an aside, the browsers display the plain html <q>...</q> content (outside of Wikipedia) as curly double quotes (Firefox), straight double quotes (Chrome, Opera) or single curly quotes (IE11)!
I'd say there is a case for an entry in common.css using whatever agreed characters (e.g. ") for q::before and q::after just to regularise what our readers see regardless of browser. --RexxS (talk) 21:54, 9 July 2014 (UTC)
<q> was whitelisted with MediaWiki 1.22/wmf9 on July 11, 2013. --  Gadget850 talk 01:50, 10 July 2014 (UTC)
<q> is for inline quotes and I don't see any templates for that. --  Gadget850 talk 01:54, 10 July 2014 (UTC)
Template:Tq is for inline quotes (and elsewhere), but there's little value in attempting to incorporate <q>...</q> just for the semantics. --RexxS (talk) 14:54, 10 July 2014 (UTC)
I've gone ahead and added the CSS to show regular quote marks. -- [[User:Edokter]] {{talk}} 08:42, 25 July 2014 (UTC)

Double border

When <code>...</code> encloses <pre>...</pre> (which is pointless because they both produce monospace), the effect is dreadful: see Template talk:Geobox#Mountains and ranges. There's a related problem with {{pre}}, see Template talk:Pre#Double border. --Redrose64 (talk) 09:09, 1 August 2014 (UTC)

It is just as bad if the formatted text wraps. <code>{{Lorem ipsum}}</code> --  Gadget850 talk 09:58, 1 August 2014 (UTC)

print.css add a logo and version number

Hi all, I try to modify the print.css to include a logo on the header of each pages along with a version number of the document (the last modified date of the article would be enough) I managed to change my margins, titles colour, page breaks but nothing else...

I tried many combinations and went on a lot of websites to no avail.

Can anyone point me to a tutorial/example of a print.css for mediawiki?

Is there a list of items I can access from the .css on my wiki? (e.g.: .lastUpdated )?

Thanks, Alex — Preceding unsigned comment added by 31.55.62.113 (talk) 08:49, 3 August 2014 (UTC)

Changing the appearance of hlist

It has come to my attention that there are editors out there who who think pipe-separated lists are easier to read than bullets. it turns out, there is a solution. all you have to do is open your personal common.css, and add the following lines

.hlist dd:after,
.hlist li:after {
    content: " | ";
    font-weight: normal;
}

and all the hlists will be rendered with pipes for the separators instead of the dots. it is also possible to change them to something else, even your favorite image on commons. I am posting this tip here in a centralized forum, since this has come up many times before. Frietjes (talk) 15:50, 11 August 2014 (UTC)

And of course, if you only want commas as your list separators, then .hlist dd:after, .hlist li:after {content: ", ";} will do the trick for you. --RexxS (talk) 20:18, 11 August 2014 (UTC)
I proposed hlist subclasses here some time ago to allow customization of the hlist separator (see MediaWiki talk:Common.css/Archive 15#hcomma, though note that the Yu-Gi-Oh! Wikia's live CSS now differs from the sample code I posted directly in the discussion); at the time, Edokter was receptive but hesitant because he wasn't sure there was actually demand for them. This demonstrates that there could potentially be such demand, though I'll be the first to admit that trying to extrapolate a pattern from a single data point is a fool's errand. Regardless, as I did when I posted that topic, I would personally like to see these classes added to the "canon" hlist CSS. ディノ千?!? · ☎ Dinoguy1000 01:16, 9 September 2014 (UTC)

No common.css in 1.23.3: how to make infoboxes float to the right?

There's no common.css in v.1.23.3, and .less files seem to provide no means for enforcing the site-wide infobox float to the right. Any hints? 167.88.112.200 (talk) 01:10, 21 September 2014 (UTC)

Classes for vertical-align top in tables? Why not?

Hello,

I found that in pt.wikipedia there is no way to top or bottom align cells/rows content without adding the css inline in every cell/row, is the same here?, how this is done here in e.wikipedia?! I'm suggesting there to add 2 classes in Commons.css as follow:

/* 
 - 10/9/2014 - 
*/

.vat, .vat tr, .vat td {vertical-align:top}      /*  top   */
.vab, .vab tr, .vab td {vertical-align:bottom}   /*  bottom  */

What do you think of this? Dianakc (talk) 00:54, 11 September 2014 (UTC)

So instead of writing style="vertical-align:top;" on each table row, we could write class="vat" on each table row? I would have thought that it just made the markup less understandable for no real gain, or am I missing something? --RexxS (talk) 01:09, 11 September 2014 (UTC)
It is not really for specific rows, columns or cells, but for whole tables, in large tables the class can save some bytes and code clutter. If you are using class="wikitable" but want to set a vertical align to the whole table, you will just need to use class="wikitable vat". For specific cells, columns or rows, the class or the inline will do, this won't change. I found this issue when an user asked me how to align all the table content at the top then he said Wow! I have to add the style/valign to every row.Dianakc (talk) 02:38, 11 September 2014 (UTC)
Ah - for the whole table, I can see there's a genuine advantage, as the inline style= definition doesn't work on a whole table. Saving bytes isn't really a consideration, but I'd happily support it for reducing code clutter. --RexxS (talk) 14:57, 11 September 2014 (UTC)
That's it :) I'm concerned that sometimes we get a lot of code for things that a simple class could do. I'm suggesting this code for pt.wikipedia, but feel free to use/adapt and suggest it here as well. Maybe we can use more self-explanatory names for the classes such .v_align_top and .v_align_bottom etc. Dianakc (talk) 19:27, 11 September 2014 (UTC)
Shouldn't the class names describe the content instead of the style we will apply to that content, for better semantics? What kind of table/data will be aligned to the top of cells and what will be keept with the default alignment? Helder 11:41, 21 September 2014 (UTC)
@Jdlrobson: comments on this? Helder 11:41, 21 September 2014 (UTC)
What Helder says. Classes should be semantic and explain concepts rather than be shortcuts for CSS rules. We should do an audit of all tables and identify which ones are better vertically aligned. Out of interest are there any tables you would not want to be vertically aligned? we might decide we need a new class name for this one rule but by using a more useful name we make changes to these types of table easier in future. Even better you might not need an additional class at all :) Jdlrobson (talk) 17:34, 21 September 2014 (UTC)

Proposal to add veonly class

I propose that we add a veonly class to common.css like I did at testwiki:Special:Diff/217226. This will allow us to only show certain text to users with VisualEditor enabled. I plan to use this on Template:No article text to add a link to start a new article via VE, but only for users that have it enabled in their preferences (discussion about that is at Template talk:No article text#Include visual editor). Are there any objections? Jackmcbarn (talk) 14:43, 8 October 2014 (UTC)

I would suggest the class name ve-show, to match sysop-show et al., unless there's some compelling reason to prefer veonly. ディノ千?!? · ☎ Dinoguy1000 21:50, 9 October 2014 (UTC)
@Dinoguy1000: VisualEditor uses "ve-" names internally, so I'd rather not use that particular name, but I would be open to another alternative. Perhaps veshow? Jackmcbarn (talk) 23:05, 9 October 2014 (UTC)
I still don't like the idea of breaking the pattern established by the other classes, but avoiding potential conflict with any classes used internally by the VE is a rather compelling reason to do so. Unless someone else has any other suggestion, I think veshow would be fine, if presenting the possibility for some confusion. ディノ千?!? · ☎ Dinoguy1000 04:56, 10 October 2014 (UTC)
As long as "ve-show" is not actually used internally as a classname, there should be no problem. Keeping consistent naming is important.
It isn't yet, but I'm worried that it could be at some point. Jackmcbarn (talk) 11:59, 10 October 2014 (UTC)
None of the current prefixes are abbreviations, so visualedit-show then? -- [[User:Edokter]] {{talk}} 13:29, 10 October 2014 (UTC)
Well, probably visualeditor-show rather than visualedit-show, but yeah, that would work. Jackmcbarn (talk) 13:53, 10 October 2014 (UTC)
Why do we want to withhold information from users who disabled VisualEditor? (And perhaps whatever instructions you want to add would even convince some of them to enable it.) Matma Rex talk 14:00, 10 October 2014 (UTC)
@Matma Rex: There wouldn't be information hidden behind this. The idea of it is to hide "edit with VisualEditor" links behind it, so that we can place such links in templates that contain regular edit links, without incurring the wrath of people who never want to see a single VE link. Jackmcbarn (talk) 14:28, 10 October 2014 (UTC)
That's stupid. It would be marginally less stupid to just use a consistent class and let these users hide it themselves, although if they're literally unable to look at the word "VisualEditor" without their eyes bleeding then I'd suggest consulting a medical specialist. Matma Rex talk 16:05, 10 October 2014 (UTC)

Protected edit request on 11 October 2014 (mobile.css support for {{TOC limit}})

{{TOC limit}} works via CSS classes, using the site CSS to do the actual hiding of TOC entries. See, for instance, contract bridge as a pretty dramatic test case (it has tons of lower-level templates that are hidden by CSS).

The template currently does not work in the mobile view ([1]) because the mobile HTML layout and CSS are different. Here's the code that needs to be added to mobile.css in order to accomplish this. (The "+" selector used should work in all even remotely used browsers, including mobile browsers ([2]); the main exception is IE6, which I doubt anyone uses for the mobile site.) Could an administrator add these CSS rules for me?

/* Allow limiting of which header levels are shown in a TOC;
   <div class="toclimit-3">, for instance, will limit to
   showing ==headings== and ===headings=== but no further
   (as long as there are no =headings= on the page, which
   there shouldn't be according to the MoS).
 
   These are all separate rules because combining them
   isn't supported by at least Firefox. */
.toclimit-2 + .toc-mobile ul ul { display: none; }
.toclimit-3 + .toc-mobile ul ul ul { display: none; }
.toclimit-4 + .toc-mobile ul ul ul ul { display: none; }
.toclimit-5 + .toc-mobile ul ul ul ul ul { display: none; }
.toclimit-6 + .toc-mobile ul ul ul ul ul ul { display: none; }
.toclimit-7 + .toc-mobile ul ul ul ul ul ul ul { display: none; }

--ais523 10:55, 11 October 2014 (UTC)

Why use different code in Mobile? OK I see. The "+" selector should not be needed, but I see that mobile (or perhaps Tidy) refuses to nest the TOC iside the template. That should be fixed first before adding any code that needs to account for this broken behaviour. -- [[User:Edokter]] {{talk}} 12:02, 11 October 2014 (UTC)
Hm, right. So it's an issue of whether we try to work around the brokenness in generation in CSS, or try to get the generation to work and then update the CSS to match. Sadly, I'm no longer really familiar with the PHP-coding side of things. I might submit a bug report later when I'm less tired, though. --ais523 12:46, 11 October 2014 (UTC)

Extending the mergedrow classes

Currently, I can hack merged rows in wikitable using both the infobox bordered and wikitable classes

Translator Publishing details
John Ozell d. 1743,
translator, accountant
1712 London, Bernard Lintott
William Broome 1689–1745,
poet, translator
William Oldisworth 1680–1734

but, it would be great to be able to apply it directly to wikitables. Frietjes (talk) 15:07, 3 November 2014 (UTC)

Quote

To fix quote in various ways, including spacing between the template and a floated element, I'd like to make some changes to the template and to common.css. If there are no objections I'll make those changes tomorrow. More details are available at Template talk:Quote#more quoteness. Martijn Hoekstra (talk) 09:12, 10 November 2014 (UTC)

Fix for double bold on Windows 7 with Firefox

Edokter, per the threads here and here people using Windows 7 may experience a double bold effect, which causes editors like SMUconlaw and MisterBee1966 to add page-specific switch statements to navboxes. the good news is that there is a hack/fix for the problem which is this change. can we add something similar here to solve this problem? (notifying User:Redrose64, User:Gadget850, User: Richardguk, and User:WOSlinker who commented on the prior thread). Frietjes (talk) 17:24, 17 November 2014 (UTC)

That is an overly broad hack... The core issue seems to be self-referential links, so scoping the weight to strong.selflink seems more appropriate, also negating the need for !important;. This does seem like a Firefox bug, seeing how it simply adds 200 ('bolder') to the weight instead of using 700 for 'bold'. As a fix, try the following and see if that fixes the problem:
strong.selflink {
    font-weight: 700;
}
If that works, I'll add it (I don't have Windows 7). -- [[User:Edokter]] {{talk}} 17:54, 17 November 2014 (UTC)
Edokter, much better fix. just tested it and yes, it works for me. thank you. Frietjes (talk) 18:38, 17 November 2014 (UTC)
Edokter, can we add this now? thank you. Frietjes (talk) 19:25, 19 November 2014 (UTC)
Done. -- [[User:Edokter]] {{talk}} 19:38, 19 November 2014 (UTC)

Improve appearance and utility of embedded video player objects

With reference to this discussion at VPT, and the previous discussions linked to there, I am requesting that the below CSS rule be added.

It will move the video player's 'Play' button to the bottom-left hand corner and shrink it by a factor of 0.75, which will allow video thumbnails to also serve as static illustrations within articles, while retaining a clear indication that a video is available to watch. An screenshot of what this will look like is available here. Reticulated Spline (tc) 00:37, 19 November 2014 (UTC)

.PopUpMediaTransform a .play-btn-large {
    margin: 0;
    top: initial;
    right: initial;
    bottom: 0;
    left: 0;
    transform-origin: bottom left;
    transform: scale(0.75);
}
I have a problem with this: The button is too small, considering the rest of the thumb is not clickable, where other examples with this arrangement are clickable. So if it's OK, I will add it without the scaling. -- [[User:Edokter]] {{talk}} 09:26, 19 November 2014 (UTC)
Ah, I take your point. How about the following (maintains scaling, but also ensures that the whole image is clickable)? The only change is the addition of the final three lines. If that's not workable, then the original version without the scaling will do. Reticulated Spline (tc) 12:05, 19 November 2014 (UTC)
.PopUpMediaTransform a .play-btn-large {
    margin: 0;
    top: initial;
    right: initial;
    bottom: 0;
    left: 0;
    transform-origin: bottom left;
    transform: scale(0.75);
+   padding: 50%;
+   background-position: bottom left;
+   background-repeat: no-repeat;
}

Small note: transform: has limited support; unprefixed 62%. I don't know if resource-loader auto-prefixes or something fancy, but if it doesn't adding webkit- and ms- prefixes would be nice and bring support up to 90.59%, basically leaving IE8 out to dry (and Opera mini, but this isn't loaded for mobile anyway), and 5% other misc browsers that I can't find the details on. Is that acceptable? Does this reasonably degrade on IE8 (I can't test here)? If it doesn't, are there possibilities to improve on that? Martijn Hoekstra (talk) 13:17, 19 November 2014 (UTC)

IE8 also does not support initial, so the button is misplaced. Those can be replaced with auto.
.PopUpMediaTransform a .play-btn-large {
    margin: 0;
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;
}
To preserve some consistency between IE and other browsers, I'd rather not use any scaling at all. -- [[User:Edokter]] {{talk}} 13:56, 19 November 2014 (UTC)
The transform: property is part of the CSS Transforms Module Level 1. This is a W3C Working Draft, and since transform: is not in CSS 2.1 or any other W3C Recommendation, that means that it is not yet a formal part of CSS and is subject to change or removal at any time.
The initial keyword is also not in CSS 2.1 or any other W3C Recommendation, but it is part of CSS Cascading and Inheritance Level 3. This is a W3C Candidate Recommendation, so it's in a fairly stable state, and is likely to become a full W3C Recommendation within the next couple of years.
In both cases, browser vendors may implement the features if they choose to, although they are under no obligation to do so. --Redrose64 (talk) 17:19, 19 November 2014 (UTC)
In short, we shouldn't use it for now. I've put in the code sans scaling. -- [[User:Edokter]] {{talk}} 17:56, 19 November 2014 (UTC)
Thank you. I'm not entirely sure why I put initial for the top and bottom attributes when, as mentioned, auto is functionally equivalent and has wide support. Apologies for not testing in IE 8, duly noted for the future. Reticulated Spline (tc) 20:26, 19 November 2014 (UTC)

Undesirable <code> styling

Where is <code>...</code> getting its CSS from these days? Some things changed several months ago, and we need to fix them:

  1. The border around the element is user-hateful, as it individually borders code snippets used in series, when they should be seamless. This is especially common when using <code> then {{tlx}} or another template-linking template:

    snippet 1{{coord}}snippet 2.

    These vertical border lines between snippets make template documentation confusing and harder to read. Basically, <code> is an inline semantic markup template, and trying to force it behave like a block-level container is a really bad idea.

    It's especially bad when two bits of code are on successive lines, since they're separated by a big white gap:

    snippet 1
    snippet 2

    With <pre> auto-nowiki'ing everything, a large amount of template documentation depends on the <code> markup I'm showing here.

  2. The left padding also mangles documentation, by indenting some material but not the rest of it when enclosing more than one line, which is even more confusing than the above problems:

    snippet 1
    snippet 2

    This implies that editors following the documentation should insert an actual space character where that padding is, which would usually be a big FAIL, triggering MW to automatically <pre>-wrap the line in question.

If MediaWiki itself is doing this, someone should open a Bugzilla report (two separate ones probably). Regardless, we should fix these problems on WP itself.  — SMcCandlish ¢ ≽ʌⱷ҅ʌ≼  04:52, 19 October 2014 (UTC)

MediaWiki is doing this, and I believe this is the intended behavior. <code> is intended for small, inline code examples; you should use preformatted code blocks for snippets (which, in addition to using <pre>, can be created by indenting lines of code with a single space, which doesn't nowiki the wikitext). I don't understand why would it need to be seamless; rather, I would consider wikitext that produces HTML like …</code><code>… a user error. It seems that this issue is easily avoidable, though; here's how I would format your examples:

snippet 1{{coord}}snippet 2

snippet 1
snippet 2
I don't really understand your last point – that's just how line-wrapping works (and I'm afraid CSS doesn't allow us to do it better), and you insert a line wrap suing the <br> tag there. If you need more than one line of code, you should, again, use preformatted text block rather than inline tag. Matma Rex talk 09:41, 19 October 2014 (UTC)
@Matma Rex: MediaWiki is doing this – I figured as much. I believe this is the intended behavior. Oh, I'm sure. The devs seem to monkey with this stuff on a fairly regular basis with insufficient regard for the fallout. (In fairness, MW is enormous and complex, and there are many competing, not always mutually compatible, goals. I just wish any MW-level CSS changes, and parser changes that affect the user-agent-level HTML output, were tested more thoroughly.) here's how I would format your examples – the first I already know, but this shouldn't be necessary. We've been using {{tlx}} for ages for a template link, with parameters, in code markup form, and it shouldn't have to be changed to something else if someone later adds code before or after the tlx instance, as often happens. The <code>snippet 1</code>{{tlx|coord}}<code>snippet 2</code> markup I demoed is used again and again in template documentation already. The second example is undesirable in many contexts, because of the page-wide (well, container-wide) grey bar, with huge padding, that <pre> markup forces; it's a messy readability issue of its own sometimes. This is another case of "it wasn't broken and now it is, because of changes we didn't really need". This pointless border around <code> serves no objective purpose at all, and breaks too many things. If this were a brand new wiki, no one would care perhaps, but we have an enormous pre-existing codebase being negatively affected by this. I don't really understand your last point – that's just how line-wrapping works – The problem is that we've added a large amount of padding-left for no particular reason, and it's causing confusing visual display problems in code examples we've had for a long time. (Same theme, see?) The padding needs to be notably less than a space character, like maybe half that size.  — SMcCandlish ¢ ≽ʌⱷ҅ʌ≼  22:32, 19 October 2014 (UTC)
I concur [with Matma Rex]. You recognize that <code> is an inline element, but then you compain it doesn't behave when used as a block element. Use <pre> (or the space indent to prevent nowiki) for that. -- [[User:Edokter]] {{talk}} 10:02, 19 October 2014 (UTC)
@Edokter: I'm not expecting <code> to literally act as a block element, I'm just aware that MW rewrites markup on the fly, such that <code><p>code sample 1</p><p>code sample 2</p></code> produces the following HTML output at the user-agent (browser, screen reader, Web app, whatever) level:
<p><code>code sample 1</code></p>
<p><code>code sample 2</code></p>
This is desirable, handy behavior, in keeping with MW's general simplification of markup and its requirements for editor convenience, and it's something we've all come to expect. Consequently, we were able to simulate <pre><code>...</code></pre> in this way, without the huge grey stripe MW actually uses for <pre>. Regardless, the same thing could be (and often is) done with the formal <p><code>...</code></p><p><code>...</code></p> markup. [Note how that example, conveniently done with {{tag|p|content={{tag|code}}}} twice, has distracting vertical border lines in it.] Now all of a sudden this looks like crap because of the way MW has re-styled <code>, putting a border around it and lots of vertical white space between the grey backgrounds of each code element. If I've observed one thing about your approach to CSS here, it's resistance to altering the user-agent defaults, yet this is precisely what's been going on here, in ways that are not helpful to anyone. You seem to now be defending it as long as some MW devs did it, or some too-short discussion at VPTECH decided to do it, and I don't understand why. What CSS cascades to us by the time we reach Common.css isn't inviolable. If you've spent any time on Wikia, you know how daft some of the stuff they're doing is. Not all MW development has the best interests of WP (or en.WP, more specifically) in mind, and not ever decision arrived at by committee in Village Pump discussions is successful in the long term.  — SMcCandlish ¢ ≽ʌⱷ҅ʌ≼  22:32, 19 October 2014 (UTC)
If you ask me, this is terrible, evil behavior caused by Wikipedia's use of HTML Tidy (mw:Manual:$wgUseTidy). This option is disabled by default because it horribly mangles a lot of HTML (as noted on that page) and is incompatible with HTML5 tags, but enabled here because of a bad decision made years ago that's hard to reverse now because users rely on the evil behavior. Matma Rex talk 23:26, 19 October 2014 (UTC)
@SMcCandlish: The styling of the <code>...</code> element changed in July, see Wikipedia:Village pump (technical)/Archive 129#Styling of code element. If you want to show multi-line examples of markup, there are better ways: besides <pre>...</pre>, there is <source>...</source>. If used as <source enclose=div>...</source> it even respects the current indent level, which <pre>...</pre> won't. See for example my post of 09:01, 25 September 2014 at Wikipedia:Village pump (technical)/Archive 130#Rendering/loop problem with multiple empty columns-list template on a page in Chrome. --Redrose64 (talk) 10:13, 19 October 2014 (UTC)
I'll look into that; thanks for the tip. I was off-wiki for a while, so I missed some of this stuff the first time around.  — SMcCandlish ¢ ≽ʌⱷ҅ʌ≼  22:32, 19 October 2014 (UTC)
This came in with the Typography Refresh. I gave up on this a few months ago and changed the style in my CSS. --  Gadget850 talk 10:16, 19 October 2014 (UTC)
Yeah, I've done much of that as well. Typography Refresh is totally rotten in about a dozen ways. That said, the problem here is that we have over a decade of template documentation much of which is being mangled by these changes, and 99.9% of editors aren't customizing user CSS to compensate for those specific issues. We shouldn't have to change innumerable template documentation pages to work around rather insipid, cutesy style changes.  — SMcCandlish ¢ ≽ʌⱷ҅ʌ≼  22:32, 19 October 2014 (UTC)
No, this has nothing to do with typography refresh. I was actually the author of the change in MediaWiki, after the same style has been in use on MediaWiki.org wiki for several years. Matma Rex talk 23:26, 19 October 2014 (UTC)
I think this is probably a moot issue. Editors are resolving this by adding styling to templates and styling <pre> to remove the box. --  Gadget850 talk 12:23, 8 November 2014 (UTC)
If people are using <code>...</code> inside <pre>...</pre>, the <code>...</code> is unnecessary (both semantically and stylistically); but whilst such cases exist, we can add a rule like
pre code { border: none; }
Even if that is not done, something needs to be done about the <code>...</code> text colour at the very least. At present, it is forced to black, but when the <code>...</code> element is used inside a link (as in the preceding phrase), MOS:ACCESS#Color "Links should clearly be identifiable as a link to our readers" is contravened. --Redrose64 (talk) 13:36, 8 November 2014 (UTC)

Sandbox tests

I did some quick-and-dirty sandboxing at User:SMcCandlish/sandbox code, and was able to resolve a couple of issues with minimal effort, by doing the following:

  • Removed the border.
  • Adjusted top and bottom margins.
  • Adjusted left and right margins.

Results:

  1. Successive bits of code on same line are seamless (see snippet 1, tlx, and snippet 2 example; see also snippet 3 & 4 example; the tlx is a sandboxed copy with same style changes).
  2. Successive lines of code separated by <br /> are seamless (see snippet 7 & 8 block, ignoring their indentation difference).
  3. Successive lines of code separated by <p> aren't quite seamless, but they look like the used to last year, and are good enough (see snippet 3-4, 5 & 6 block).
  4. Left margin indentation isn't so excessive (contrast snippet 7 and snippet 8, the latter of which does not have that adjustment)

I didn't bother with the corner rounding, which is trivial. Honestly, I'd reduce the font-size a tad, too, but that'd need to be tested on multiple platforms.

If I could have just one of these changes, it'd be no border.

 — SMcCandlish ¢ ≽ʌⱷ҅ʌ≼  22:32, 19 October 2014 (UTC)

This seems to be going nowhere, and we still have an accessibility issue when <code>...</code> is used inside a link - see WP:COLOUR "Links should clearly be identifiable as a link to our readers." Can we at least add a rule
a code {
  color: inherit;
}
so that at Wikipedia:Village pump (technical)/Archive 132#Category:Articles with Old English-language external links, WP:COLOUR isn't violated. --Redrose64 (talk) 10:12, 28 November 2014 (UTC)
That is quite an edge case. I can think of a million little scenarios that involve embedding certain elements like that; I don't think it is feasable to counter each and every one of them... including this one. -- [[User:Edokter]] {{talk}} 11:01, 28 November 2014 (UTC)
Other inline elements don't force the color: to black - only <code>...</code> does that. --Redrose64 (talk) 12:41, 28 November 2014 (UTC)
Color isn't the only thing forced (and <pre> also forces black, being inline is not relevant). I still think it's an edge case; it is a matter of which color should have priority. You think link color should prevail, but other might disagree. If you want to catch all cases, a better selector would be a * anyway. -- [[User:Edokter]] {{talk}} 12:55, 28 November 2014 (UTC)

Ancient mystery solved?

I don't know exactly when it happened or by whom -- and accepting it's obsolete compared with today's variations-- but at some point during the importation of the NavFrame .css bundle way back when from .de to .en, an attribute that most likely should have been line-height: 1.6; somehow wound up being height: 1.6em; instead and has stayed that way ever since; giving birth to the behavior and subsequent "work-around" described under the If the title doesn't fit on one line section of Wikipedia:NavFrame at the same time -- one that I've had to refer to several times to date.

Once it's "verified" or whatever, can someone with access please locate...

div.NavFrame div.NavHead {
    height: 1.6em;
    font-weight: bold;
    background-color: #ccf;
    position: relative;
}

... and change it (e.g. replace with; not add to) so that it reflects the highlighted below instead.

div.NavFrame div.NavHead {
    line-height: 1.6;
    font-weight: bold;
    background-color: #ccf;
    position: relative;
}

Hopefully, your results mirror mine. At worst, the obvious flaw (who in their right mind would ever limit themselves to a height of just 1.6em for a component as "critical" as that one is?) becomes easier to comprehend.

Of course going back afterwards to the NavFrame helper section (copied below) should show a different story too.

<div style="width:20em;">
<div class="NavFrame">
  <div class="NavHead">[... This is the title of your collapsible content ...]</div>
  <div class="NavContent">[... The content you want to hide goes here ...]</div>
</div>
</div>

I leave whether or not to amend the piece itself up to the usual suspects. -- George Orwell III (talk) 08:34, 24 January 2015 (UTC)

That makes sense, I'll change it. I will note that all our collapse code (including collapsible tables) is very outdated and is superceded by mw-collapsible. -- [[User:Edokter]] {{talk}} 09:55, 24 January 2015 (UTC)

WikiEditor character line-height workaround seems permanent now

Per @Edokter: et. al's previous efforts, the following "work-around"...

/* Workaround for WikiEditor toolbar button characters breaking out. [[Phabricator:T78354]] */
.wikiEditor-ui-toolbar .page-characters div span {
    line-height: 1;
}

... finally seems to be part of the permanent code now (verified on en.wikisource fwiw) so I'm shooting you folks this note suggesting its removal (once you've verified my observations) here as well. Prost. -- George Orwell III (talk) 23:05, 7 February 2015 (UTC)

Indeed, it has been deployed. -- [[User:Edokter]] {{talk}} 23:19, 7 February 2015 (UTC)

Template:Main - appearance (or lack thereof) on mobile browsers

It seems that {{main}} is hidden on mobiles, due to site CSS. I suggested personal CSS to unhide it, but apparently that doesn't work. Please discuss at Template talk:Main#Appearance (or lack thereof) on mobile browsers. --Redrose64 (talk) 16:12, 27 February 2015 (UTC)

Fixing bulleted list inside an unbulleted list

Hi all, right now when I use a bulleted list (either through a {{bulleted list}} or with the asterisk wiki markup) inside an {{unbulleted list}}, bullets are not shown because the <li> elements inherit from .plainlist generated by {{unbulleted list}}. The relevant lines in this file is:

/* Unbulleted lists */
.plainlist ol,
.plainlist ul {
    line-height: inherit;
    list-style: none none;
    margin: 0;
}
.plainlist ol li,
.plainlist ul li {
    margin-bottom: 0;
}

I propose this to be changed to

/* Unbulleted lists */
.plainlist > ol,
.plainlist > ul {
    line-height: inherit;
    list-style: none none;
    margin: 0;
}
.plainlist > ol > li,
.plainlist > ul > li {
    margin-bottom: 0;
}

to make sure the effects from the class .plainlist does not get propagated to children lists.

Example:

{{unbulleted list
| This
| {{bulleted list|E|F}}
}}
  • This
    • E
    • F

Timothy G. from CA (talk) 21:03, 1 March 2015 (UTC)

 Not done. This is quite an unorthodox use of these templates, and I wonder if there is a use case for this. Anyway, this change would break nested unbulleted lists, making bullets appear where they should not. Therefor not done. -- [[User:Edokter]] {{talk}} 09:45, 3 March 2015 (UTC)
Not that anybody should nest plainlists. What would the point of that be? Alakzi (talk) 20:13, 3 March 2015 (UTC)
I have looked at this a couple of time and I just have to wonder where the use would be? --  Gadget850 talk 20:17, 3 March 2015 (UTC)
Who were you replying to? I know nested plainlists make no sense, but neither does embedding bulleted lists. -- [[User:Edokter]] {{talk}} 21:30, 3 March 2015 (UTC)
OK, first of all let's be clear about the real use of {{unbulleted list}}. I assume it is created to help in cases where:
  1. <br> is too ugly
  2. space is limited (like in an infobox)
  3. the editor likes semantic markup
I found out about this bug when I was in the process of converting all of Al-Qaeda's infobox labels "opponents" and "Battles and wars" to {{unbulleted list}}, because of #1 above. This is used in a place where space is limited in an infobox, so the template helps readability, hence #2 is satisfied. At the same time, the infobox uses bulleted lists, so in the process of converting them I found out about this bug.
But even if there isn't such use for it, when the markup for bulleted list * doesn't show bullets it is at the very least unexpected. Timothy G. from CA (talk) 02:08, 4 March 2015 (UTC)
@Edokter: I assume that by "nested unbulleted list" you meant something like this:
{{unbulleted list|This|{{unbulleted list|E|F}}}}
Why would this break nested lists? The classes are still added explicitly into the inner list. Timothy G. from CA (talk) 01:47, 4 March 2015 (UTC)

No, he means:

{{Plainlist|
* 1
** 1.1
* 2
}}

With child selectors, this would be:

  • 1
    • 1.1
  • 2

Anyway, can you give us an example where you might use an hlist inside a plainlist? Alakzi (talk) 01:56, 4 March 2015 (UTC)

@Alakzi: that does indeed look like an issue. But my point remains: {{unbulleted list}}'s syntax does not look like it would influence the children lists, but it does. I would still argue for a change of this degree, even if this requires additional classes to be made and used in the templates. Timothy G. from CA (talk) 02:14, 4 March 2015 (UTC)
@Alakzi: also, why are you referring to {{hlist}}? I was not talking about that in any of my comments. Timothy G. from CA (talk) 02:15, 4 March 2015 (UTC)
Like I've said earlier, nesting plainlists is nonsensical; therefore, I don't see why this change shouldn't be made. Apparently, someone at some point moved {{unordered list}} to {{bulleted list}}. I was under the mistaken impression that the latter was an alias for {{hlist}}. I thought the use of "bulleted" was an attempt to distinguish it from bullet lists, but the term "bulleted list" is apparently encouraged by style guides. Alakzi (talk) 02:18, 4 March 2015 (UTC)

I don't think nesting plainlists is nonsensical. Here's a simple example:

Lists of languages by region and country
Language Region
English
  • Europe
    • England
    • Scotland
    • Malta
  • Americas
    • USA
    • Canada
  • Africa
    • South Africa
French
  • Europe
    • France
    • Switzerland
  • Americas
    • Canada
  • Africa
    • Cote d'Ivoire
    • Algeria

There's nothing odd about having data organised by three criteria. It keeps column width to a minimum as is preferred in an infobox or large table and a screen reader will immediately recognise the structure of lists within lists. --RexxS (talk) 03:24, 4 March 2015 (UTC)

A screen reader will. A visual reader will struggle. UX shouldn't be sacrificed quite as readily. Alakzi (talk) 03:35, 4 March 2015 (UTC)
Well you simply have to make your mind up. When width is no problem then you use:
Lists of languages by region and country
Language Region
English
  • Europe
    • England
    • Scotland
    • Malta
  • Americas
    • USA
    • Canada
  • Africa
    • South Africa
French
  • Europe
    • France
    • Switzerland
  • Americas
    • Canada
  • Africa
    • Cote d'Ivoire
    • Algeria
When you decide it's more important to conserve width than to have absolutely clarity, you sacrifice some readability in the way I suggested - and plenty of editors will do exactly that. That's why nested plainlists exist and are clearly not nonsensical. Unless you have a better solution that requires no compromise? --RexxS (talk) 04:25, 4 March 2015 (UTC)
Not done: please establish a consensus for this alteration before using the {{edit protected}} template. This template should only be used after a consensus has been found, and that doesn't seem to be the case yet. Even if the request is activated again, admins aren't going to fulfill it if there isn't a consensus. — Mr. Stradivarius ♪ talk ♪ 05:52, 4 March 2015 (UTC)

{{longitem}}, list item spacing and other woes

As discussed here on my talk page, would reducing the line-height of infoboxes, as well as adding a tiny bit of padding between plainlist items inside them, be welcome additions? Alakzi (talk) 21:55, 23 February 2015 (UTC)

I'd rather not. Personally, I'd like to see longitem gone. What is wrong with the default formatting? -- [[User:Edokter]] {{talk}} 22:52, 23 February 2015 (UTC)
What it boils down to is that there is no extra spacing between plainlist items, so wrapped lines end up looking like separate items. The addition of {{longitem}} in infobox labels appears to be entirely the work of User:Sardanaphalus, but I'm not sure why, exactly. Alakzi (talk) 23:04, 23 February 2015 (UTC)
Looking at the talk page of Alakzi, I do find the larger spacing between the plainlist items visually more appealing, and making a clearer distinction between the items, I can agree with that change. Martijn Hoekstra (talk) 23:11, 23 February 2015 (UTC)
Then it will have to be done inside the infobox CSS, and not rely on this template. You are right that Sardanaphalus created it, and all it does is change the padding and linehight. These CSS micromanaging templates need to be killed; they create undue stress due to needlessly inflating transclusion count, and large article have been known to trip over that. -- [[User:Edokter]] {{talk}} 23:16, 23 February 2015 (UTC)
Then it will have to be done inside the infobox CSS ... Yes, that's why we're here. :-) Have you read the discussion closely? I agree about removing {{longitem}}. Alakzi (talk) 23:24, 23 February 2015 (UTC)
There isn't any way that I'm aware of to implement .infobox .plainlist li + li { padding-top: 0.3em; } outside of a style-sheet - and that means putting it in Common.css, I think. Unless the suggestion is to attempt to hard-code style="padding-top: 0.3em;" on list elements in plainlists inside infoboxes? --RexxS (talk) 23:32, 23 February 2015 (UTC)
The entire proposal is to do this in common.css to avoid the whole micromanagement/inline style circus. Martijn Hoekstra (talk) 23:35, 23 February 2015 (UTC)
Why lists only? I think decreasing the lineheight on all infobox cells (and possibly increased cell padding) is the best route. That should also eliminate the need for inline templates. I'll do a quick eval tomorrow. -- [[User:Edokter]] {{talk}} 00:26, 24 February 2015 (UTC)
Look at the source code in the section I linked to in my original post. Alakzi (talk) 00:36, 24 February 2015 (UTC)
You can't really "... avoid the whole micromanagement/inline style circus" around here mainly because not all browsers follow/process the html and css specifications exactly the same way and, as a result, not all final renderings appear exactly the same for everybody to begin with. Couple this out-of-our-control reality with the fact most of these kind of local templates are TABLE based — where it's component elements frequently find themselves at the mercy of existing .mw-body xyz core defaults rather than the expected site-wide, Template: family'd or User: defined ones — and I can guarantee you there will always be some number of viewers at any given point in time making up a large enough faction to be ignored that will typically "hate" what others seem to "love" when comes to proposed sweeping changes like we have in debate here.

In a nutshell, the best way to bring as many eyeballs into the same final rendered focus as possible for stuff like this is to usurp the introduction &/or the injection of any and all undesirable font-size: and line-height: settings coming "in" from elsewhere at the top most relevant TABLE (or parent) element and re-set it/them back to the industry test-bed standard before attempting to refine/inherit values needed make it all 'look good' under our PIA wikitext mark-up.

That standard boils down so that   1.00em = 16px = font-size: = line-height:

To force that into reality (thanks to css3 & the latest available browser versions), you need to apply font-size: 1rem; line-height: 1.0; to the top-most relevant container or parent element first & foremost. Only when those values are in total effect does one have any unifying chance afterwards of refining/customizing settings for the finished rendering without all that added per element inline or overriding styling nonsense getting applied that we all seem to agree is the root of the problem in most of these cases at this point in the history of wiki-deveolpment. -- George Orwell III (talk) 08:50, 24 February 2015 (UTC)

this is getting a bit theoretical. The proposal is to adjust the line height and padding of plainlist list items in infoboxes. What are the objections to that ? What do you propose instead? Martijn Hoekstra (talk) 09:15, 24 February 2015 (UTC)

The plainlist class is applied for the DIV wrapper of the UL containing the LI's in question. The proposed change -- for me -- provides little to no discernable difference between the middle & last example on that linked talk page (probably because that UL inherits the values for .mw-body dd, .mw-body ul, .mw-body ol instead of and/or in addition to the inline stylings here under my Win 8.1/IE11 setup). -- George Orwell III (talk) 09:38, 24 February 2015 (UTC)
So if I understand you correctly, the proposed change doesn't work because there are other CSS rules that take precedence (probably due to specificity)? Is that correct? If so, we might be best helped with test cases on test wiki, which I can set up (but probably not before this evening CET). Martijn Hoekstra (talk) 09:49, 24 February 2015 (UTC) (edited for not reading the post)
For me, the styling is applied appropriately with a quick set of test browsers on Win8.1 (Chrome evergreen, ff evergreen, ff dev evergreen, IE11). Are you sure the styles aren't applied? The differences aren't large. Martijn Hoekstra (talk) 09:54, 24 February 2015 (UTC)
I'm saying the focus should be "fixing" the Plainlist template so that the LI's within properly inherit the container's (DIV) settings through UL inheritance & only through UL inheritance. The .infobox class (a TABLE) will only reliably transfer-by-inheritance (or hand-down?) its settings, at best to a sibling table-cell (TD) so including .infobox really has no business here -- or more precisely: its presence or lack there of shouldn't make any difference or have any bearing either way. The disparity (it seems to me without further test examples made first) is the lack-of (or somewhat-crippled? poor?) div.plainlist > ul > li inheritance already taking place. -- George Orwell III (talk) 10:17, 24 February 2015 (UTC)
(Reply to George Orwell III) That's quite a rant, but I can asure you I have already handled these issues in my mind. And I am really not afraid of any browsers missing the mark; any browser that does not understand plain padding and linehight from a stylesheet does not deserve to be called a browser anyway. -- [[User:Edokter]] {{talk}} 10:05, 24 February 2015 (UTC)
you missed the point too; browser differences are slight until you throw them into an environment such as wikitext mark-up to operate under. See my above (.mw-body dd, .mw-body ul, .mw-body ol injects itself between LIs in question and their opening UL component element as it is; .infobox should have no role here) -- George Orwell III (talk) 10:17, 24 February 2015 (UTC)
Those rules are there to match the lineheight of the text in the body (Typography refresh). The lineheight inside an infobox is decreased by default, which means the lineheight of the lists needs to be matched as well. There's not going to be any differences. -- [[User:Edokter]] {{talk}} 10:24, 24 February 2015 (UTC)
Right.... until you propose a deviation away from the typography matching 1.6 to the proposed 1.35 -- or to match longitem's 1.2 -- (never mind if you already don't subscribe to any [or just parts of] the refresh to begin with). I guess the "... whole micromanagement/inline style circus" is here to stay? -- George Orwell III (talk) 10:39, 24 February 2015 (UTC)
No, the idea is to get rid of both templates and inline styling. -- [[User:Edokter]] {{talk}} 10:56, 24 February 2015 (UTC)
Won't happen with any success unless we eliminate using percentages for line-height-corresponding font-size values everywhere at the same time. Only in this world is 88% is closer to typography's 0.87em than 87% "normally" would be (truthfully its 0.8750em that should equal = 14px but in application -- again, under wikitext mark-up -- we're just taking advantage of the fact most agents only "work out" to 2 decimal points).

Look, I'm on your side but I just don't believe things can "change" around here to the degree needed is all. -- George Orwell III (talk) 11:18, 24 February 2015 (UTC)

We're not in your head. Please explain what you think needs to be changed, where, and why. Succinctly. Alakzi (talk) 11:26, 24 February 2015 (UTC)
Edokter did you have a chance yet to come up with a concrete proposal for a change? Martijn Hoekstra (talk) 07:02, 28 February 2015 (UTC)
Sorry, I was distracted by other issues. -- [[User:Edokter]] {{talk}} 08:39, 28 February 2015 (UTC)
  • So, what's holding this up? Can I help? Alakzi (talk) 17:33, 14 March 2015 (UTC)

Drastic system-wide increase of horizontal padding in tables

The horizontal padding was doubled from 0.2em to 0.4em, making all tables using this template suddenly very ugly or not fitting on the screen. What problem was supposed to be solved here? −Woodstone (talk) 16:59, 15 March 2015 (UTC)

This change was made in core; see Wikipedia:Village pump (technical)/Archive 135#Tables just changed (using monobook) and the obligatory bug report. Alakzi (talk) 17:21, 15 March 2015 (UTC)
CSS rules in mediawiki.legacy/shared.css. Padding was just adjusted here from 0.3em 0.4em to 0.2em 0.4em. --  Gadget850 talk 18:14, 15 March 2015 (UTC)
I missed that. Alakzi (talk) 18:23, 15 March 2015 (UTC)
Wherever it was done, the net effect is that a few days ago the left/right padding went from 0.2em to 0.4em, and after complaints at VPT was restored to 0.2em. Now it's 0.4em again. Where was the consensus to settle on 0.4em? --Redrose64 (talk) 23:37, 15 March 2015 (UTC)
We haven't "settled" quite yet; discussion is ongoing on T91890. -- [[User:Edokter]] {{talk}} 08:43, 16 March 2015 (UTC)

(outdent) I do not see a single argument why this change to a long standing format needed to be made. I only find vague personal preferences. −Woodstone (talk) 16:04, 16 March 2015 (UTC)

references highlight

Currently we have:

/* Highlight clicked reference in blue to help navigation */
ol.references li:target,
sup.reference:target,
span.citation:target {
    background-color: #DEF;
}

When mw:MediaWiki 1.25/wmf22 is deployed on 25 March, Cite/modules/ext.cite.css will be updated and we can remove the two rules for .references from here. --  Gadget850 talk 16:38, 23 March 2015 (UTC)

Er, there's only one rule above, and that has three selectors. Of those, only one (not two) has the .references class. --Redrose64 (talk) 17:53, 23 March 2015 (UTC)
He means we can remove the first two selectors. -- [[User:Edokter]] {{talk}} 20:05, 23 March 2015 (UTC)
Yes. Keep me straight here. --  Gadget850 talk 20:16, 23 March 2015 (UTC)
Now deployed. Special:Version -- Gadget850 talk 09:31, 27 March 2015 (UTC)

Request for code addition

I am working with Isarra on a new WikiProject design as part of WikiProject X. We came up with a three-column design as part of the process as demonstrated on this demo WikiProject. While the three-column setup makes the most of a desktop's large screen, it is poorly suited for mobile use. I scoured Common.css, Mobile.css, and the style sheets that are automatically loaded by Wikipedia, and found that while the portal column classes found in Common.css get most of the job done, it does not do everything. Therefore I would like to add the following code, representing the smallest addition to Common.css possible:

/* Custom styling for WikiProjects
   Works in conjunction with the portal classes to make
   certain WikiProjects usable on mobile.
 */
@media screen and (min-width: 801px) {
  .wpx-body {
    margin-left: 165px;
  }
}
@media screen and (max-width: 800px) {
  .wpx-brandimage {
    width:100%;
  }
}

The classes wpx-body and wpx-brandimage refer to CSS classes used on the demo WikiProject linked above.

Please let me know if you have any questions. Thank you for your consideration. Harej (talk) 06:49, 19 April 2015 (UTC)

Generally, we do not include CSS for single pages. Is this going to be a generic application for all wiki projects in the future? -- [[User:Edokter]] {{talk}} 07:33, 19 April 2015 (UTC)
Correct. The layout currently at WikiProject Women in Technology will be abstracted and made into a template for use by other WikiProjects, with plans to deploy to at least six other WikiProjects by the end of next month. Of course I can't require WikiProjects to use it, but it will be available to all of them. Harej (talk) 07:48, 19 April 2015 (UTC)
There is a lot of blank space at left and right. Why does the width need to be constrained for desktop users as well as mobiles? --Redrose64 (talk) 09:09, 19 April 2015 (UTC)
The WikiProject currently uses the portal-column-left-extra-wide and portal-column-right-extra-narrow classes to collapse the columns on mobile. Harej (talk) 14:37, 19 April 2015 (UTC)
Note that in mobile view, portals columns do not collapse. -- [[User:Edokter]] {{talk}} 15:48, 19 April 2015 (UTC)
They do if you invoke the portal column classes; I've tested this thoroughly on desktop, in the iOS app, and on mobile web. In any case I am testing some things out in my personal CSS file to see what can be done to make the main content column look less narrow on screens where it does not make sense to have it be narrow. Harej (talk) 16:16, 19 April 2015 (UTC)

Issue with plainlist (and hlist) line-height

The plainlist line-height rule is overridden by Vector's:

.mw-body dd, .mw-body ol, .mw-body ul {
    line-height: 1.6;
}

This is especially apparent with geography infoboxes. The quick and dirty fix would be to add !important to line 207; compare:

Live
Cities
  • City 1
  • City 2
  • City 3
Towns A town
Villages Lotsa villages
With proposed fix
Cities
  • City 1
  • City 2
  • City 3
Towns A town
Villages Lotsa villages

Alakzi (talk) 15:28, 23 March 2015 (UTC)

The !important annotation is a cop-out. It's almost always better to increase the selector's specificity. --Redrose64 (talk) 16:10, 23 March 2015 (UTC)
Yes, I agree. I don't know whether mw-body is universally used, which is why I suggested !important as a "quick and dirty fix". Alakzi (talk) 16:16, 23 March 2015 (UTC)
Are we doing anything about this? It's a major annoyance. Alakzi (talk) 14:22, 28 April 2015 (UTC)
Removed. The list line-height issues associated with the typography refresh will need to be fixed in core. -- [[User:Edokter]] {{talk}} 15:12, 28 April 2015 (UTC)

.navbox-list line-height

Could we throw out the custom .navbox-list line-height? Per above, it is no longer overridden by .plainlist and .hlist; all navbox lists are now double-spaced. Alakzi (talk) 17:41, 28 May 2015 (UTC)

I agree there are some redundant declarations and I will remove them. What do you mean 'double-spaced'? -- [[User:Edokter]] {{talk}} 21:40, 28 May 2015 (UTC)
It's just a term from the typewriter era which means double the height of the letters. Alakzi (talk) 22:48, 28 May 2015 (UTC)
That is the default spacing. In any case, I need to examine the chain of line-heights throughout, and can only do so once a patch to Vector (by me) has been deployed that fixes the line-height of list items in general. (edit: As I type this, it seems that patch is indeed live.) -- [[User:Edokter]] {{talk}} 09:04, 29 May 2015 (UTC)
Reset it to 1.5em, matching it with the headers. I could not remove it due to inconsistencies between skins. -- [[User:Edokter]] {{talk}} 09:18, 29 May 2015 (UTC)

"Consistent size for sub/sup"

Shouldn't this CSS snippet to be removed now that the associated bug is closed as resolved (Bugzilla:64653). Helder 21:20, 14 June 2015 (UTC)

That was never part of the typography refresh; I planned to include it, but felt it was better served as a general fix. -- [[User:Edokter]] {{talk}} 22:02, 14 June 2015 (UTC)
What is the inconsistency which it is fixing? Helder 00:06, 15 June 2015 (UTC)
Between browsers, which can vary between 9 and 12px (at 14px base fontsize), which hurt templates that use sub/sup. -- [[User:Edokter]] {{talk}} 17:59, 15 June 2015 (UTC)

Harej's edit

Consensus has never been found for zebra-styled rows (though I am not sure I have an opinion). Please revert. @Harej: --Izno (talk) 19:56, 12 July 2015 (UTC)

@Izno: It is currently in use for Wikipedia:WikiProject Directory. Suggestions for alternatives are welcome. Harej (talk) 19:58, 12 July 2015 (UTC)
Not my problem. To get changes made on this page, especially inclusion of a new class, requires consensus here. Please show that consensus or revert your edit. Thanks. --Izno (talk) 19:59, 12 July 2015 (UTC)
(And there are plenty of discussions to look at; please review.) --Izno (talk) 19:59, 12 July 2015 (UTC)

I have found an alternative styling that does not require the use of CSS selectors. Harej (talk) 20:24, 12 July 2015 (UTC)

You also might want to check out http://snook.ca/technical/colour_contrast/colour.html#fg=002BB8,bg=E7EAFE which shows that your background doesn't quite cut it when a standard Wikipedia link is present in the text. --RexxS (talk) 22:37, 12 July 2015 (UTC)
Then I would've went with a different color, but the point is moot now. Harej (talk) 16:02, 13 July 2015 (UTC)
Well, the suggestion was to have a consensus discussion, not to "forbid" such a change. I'd be in favor of it, as it greatly enhances parseability of wide tables. We should at least have classes for this and an easy standardized way to turn it on for tables, even if it's unnecessary for compact tables and might not be something to have on by default.  — SMcCandlish ¢ ≽ʌⱷ҅ʌ≼  22:13, 30 July 2015 (UTC)

Alignment of infobox labels

Per Special:Diff/668231133, please left-align all infobox |label=s. This would work:

.infobox th[scope="row"] {
    text-align: left;
}

Alakzi (talk) 15:16, 23 June 2015 (UTC)

On an aside since this is related to IE-specific behavior, I went looking for IE specific CSS and did the run around and finally concluded that it was deleted (at MediaWiki:Common.js/IEFixes.js) even though MediaWiki:Common.css still references IE specific CSS. Where is that CSS if it does exist, and if not, why does common.css still reference that MediaWiki page? --Izno (talk) 15:31, 23 June 2015 (UTC)
Doc error, fixed. Infobox never had IE-specific CSS. But I 'll move the tex-align to its proper place. -- [[User:Edokter]] {{talk}} 17:37, 23 June 2015 (UTC)
@Edokter and Alakzi: This has caused some issues on Template:MedalTableTop, which specifically states "text-align:center" for the medal templates, but this doesn't seem to override the left align (e.g. infobox medals on Usain Bolt). SFB 23:01, 23 June 2015 (UTC)
Well, {{MedalTableTop}} is an issue in and of itself. It'll go back to normal if we use my code. Alakzi (talk) 23:08, 23 June 2015 (UTC)
PS, it's far from the only affected one (e.g. Gulf Cooperation Council), it's just the one I'm seeing most frequently in my topic area. SFB 23:10, 23 June 2015 (UTC)
I can't fix it here, so I've fixed it there. Alakzi (talk) 23:35, 23 June 2015 (UTC)
The template sets the text-align on the table rows (<tr>); they need to be set at header/cell level. -- [[User:Edokter]] {{talk}} 18:43, 24 June 2015 (UTC)
There's no need to overwrite the text alignment of all cells; inheriting from table or row is good practice. Alakzi (talk) 18:53, 24 June 2015 (UTC)
It certainly ought to be good practice, but given the way older browsers regularly failed to inherit various styles from the table element and above, it's something that has traditionally been treated with caution by developers. --RexxS (talk) 22:49, 24 June 2015 (UTC)
Table headers are centred by default. Infoboxes not built with {{Infobox}}, which applies an inline text-align: center; to column headers, have had all of their headers left-justified. Blanket-overwriting a browser default certainly isn't good practice. Alakzi (talk) 23:07, 24 June 2015 (UTC)
All collapsible infobox headers ({{Infobox rail line}}), all the S-line rows used inside {{Infobox station}} and {{Infobox China station}}, all the {{BSntext}} templates (Rokujizō Station § Layout), and so on and so forth, have been left-aligned. Please revert the change or fix it (would moving the declaration to .infobox tr work?). Jc86035 (talk • contribs) Use {{re|Jc86035}} to reply to me 08:28, 26 June 2015 (UTC)

A more specific selector is what would work best. I provided one such in my original request. Alakzi (talk) 09:47, 26 June 2015 (UTC)

just fixed another one. I guess we now have to do a search for all infoboxes with embedded tables and fix all of them :( 13:42, 26 June 2015 (UTC)
what's the fix for the previous and next links in Template:Infobox television episode? I imagine there are dozens of templates using these. Frietjes (talk) 13:44, 26 June 2015 (UTC)
You've just gotta duplicate the style rule in each cell and convert any "align" attributes to their CSS equivalents. Alakzi (talk) 14:14, 26 June 2015 (UTC)
that sucks, how are we going to find and fix all of these? Frietjes (talk) 14:23, 26 June 2015 (UTC)
I've been running insource: regexes with some degree of success; I've fixed twenty or so today and yesterday, including {{Infobox country}} and {{Infobox settlement}}. I've skipped lots of low-use infoboxes in the hope that this will be fixed here, eventually. Alakzi (talk) 14:31, 26 June 2015 (UTC)
The [scope="row"] selector also has problems in older browsers. Keep it simple and apply the alignment to the proper elements, Thank IE9 for not inheriting properly from the table row. -- [[User:Edokter]] {{talk}} 18:09, 26 June 2015 (UTC)

@Edokter, Jc86035, Izno, RexxS, Frietjes, Alakzi, and Sillyfolkboy: This coding modification was implemented over six weeks ago, and created a known set of text justification problems for a large number of templates that are transcluded in a large number of articles. What is the plan for correcting the template rendering errors created by this modification? And who among the proponents of this modification are now available to implement that necessary fixes? Dirtlawyer1 (talk) 22:09, 5 August 2015 (UTC)

If somebody can tell me what the text justification problem is in a given template, I can correct any rendering error. I've looked at Usain Bolt and Gulf Cooperation Council (the only examples given above) and I can't see any rendering error in any of the browsers that I have installed. Have those articles been fixed? Which articles are left with rendering errors? --RexxS (talk) 22:28, 5 August 2015 (UTC)
@RexxS: Many of us have gone round and done manual changes to the code to avoid the issue (e.g here, which fixed the GCC page). I'm not sure where the problem persists as I've cleaned it out of templates in the topic area I work in. SFB 23:43, 5 August 2015 (UTC)
It's only the backwater templates left to do - mostly sports ones. Alakzi (talk) 00:39, 6 August 2015 (UTC)

Navboxes top margin

It looks like we forgot to increase the spacing between the external links and navboxes after the latest visual refresh to headings. Could we bump the value of the margin-top on line 292 to 1.5 em to match the spacing between sections? Alakzi (talk) 12:07, 9 July 2015 (UTC)

Would that also apply to the case in which navboxes follow the references section? IMHO, 2em might look better. — Dsimic (talk | contribs) 12:15, 9 July 2015 (UTC)
No, it does not apply to references; we'd need to add a third selector, .reflist + .navbox. Alakzi (talk) 12:18, 9 July 2015 (UTC)
That would be awesome, as the navboxes would be no longer visually connected to the preceding section. — Dsimic (talk | contribs) 12:20, 9 July 2015 (UTC)
Not quite following. A navbox is not its own section; it is a regular template. Why should it have such a large top margin? -- [[User:Edokter]] {{talk}} 20:23, 9 July 2015 (UTC)
Right, but if it's too close to the preceding section, it might look like it's part of it. Alakzi (talk) 20:42, 10 July 2015 (UTC)
Exactly, navboxes currently look like a continuation of the section above, and that doesn't make much sense. — Dsimic (talk | contribs) 20:48, 10 July 2015 (UTC)
The navbox is part of the last section. -- [[User:Edokter]] {{talk}} 21:56, 10 July 2015 (UTC)

Technically, yes, but logically, no. — Dsimic (talk | contribs) 21:58, 10 July 2015 (UTC)

The content area is circumferenced (generally) by a 1em margin, regardless of section spacing. If there is no navbox, a category box would likely take its place; also with a 1em top margin. That is how the page is formatted. -- [[User:Edokter]] {{talk}} 22:04, 10 July 2015 (UTC)
Hm, then we either have the case of too large spacing between the sections, or too small spacing after the last section and categories, navboxes, authority control and whatnot. IMHO, that should be consistent. — Dsimic (talk | contribs) 22:07, 10 July 2015 (UTC)
Good points. Perhaps the spacing between sections should be reduced. Alakzi (talk) 22:12, 10 July 2015 (UTC)
I'd suggest that we both slightly reduce the spacing between sections and increase the spacing after the last section. IMHO, that would look much better. — Dsimic (talk | contribs) 22:16, 10 July 2015 (UTC)
You're welcome to try and get consensus for this on WP:VPR, but I don't see this happening. -- [[User:Edokter]] {{talk}} 07:54, 11 July 2015 (UTC)
Then it's better not to waste time trying to get sections closer to each other. :) — Dsimic (talk | contribs) 08:01, 11 July 2015 (UTC)
A 1em top-margin shouldn't be a problem. Once we had IE6 to think of, which didn't like the '+' selector for stacking. That is not an issue anymore. But 2em is way too much. -- [[User:Edokter]] {{talk}} 20:32, 9 July 2015 (UTC)
Then let's try with 1 em and see how it works. Though, if I'm not mistaken, CSS setting for 1 em is already in place, but I really don't see the effects? — Dsimic (talk | contribs) 20:48, 10 July 2015 (UTC)
Currently, the 1em only applies when preceded by a list (but not reflist template, which is a div). I'll make the change. -- [[User:Edokter]] {{talk}} 21:44, 10 July 2015 (UTC)
I saw your changes to the CSS code, but no spacing changes seem to be visible yet? Tried Ctrl+F5, of course. — Dsimic (talk | contribs) 22:16, 10 July 2015 (UTC)

Dsimic, link? -- [[User:Edokter]] {{talk}} 07:56, 11 July 2015 (UTC)

Just pick any page that has a navbox on it. I've seen no changes in spacing in over a dozen of such pages. — Dsimic (talk | contribs) 08:01, 11 July 2015 (UTC)
Here's a sample screenshot of the current state, as viewed in Firefox. — Dsimic (talk | contribs) 15:30, 11 July 2015 (UTC)
The margin wasn't changed, so what were you expecting to see? Alakzi (talk) 15:33, 11 July 2015 (UTC)
I'm pretty much a dumbass when it comes to CSS, :) but shouldn't that be the purpose of these changes Edokter made to Common.css yesterday? — Dsimic (talk | contribs) 15:43, 11 July 2015 (UTC)
The margin now applies everywhere (e.g after references), but it still is 1 em. Alakzi (talk) 15:47, 11 July 2015 (UTC)
Then we should definitely go with 2em. — Dsimic (talk | contribs) 15:49, 11 July 2015 (UTC)
Edokter thinks it should have the same margins as the category navigator, so it's not happening. Alakzi (talk) 15:55, 11 July 2015 (UTC)

Again, sauch a change requires a broad consensus at WP:VPR. -- [[User:Edokter]] {{talk}} 16:07, 11 July 2015 (UTC)

(edit conflict) @Dsimic: In essence, the change that Edokter made was that the first navbox would always have a 1em top margin. Previous to his edit, they had a 1em top margin only if they followed a numbered or bulleted list (such as a list of external links); when preceded by some other element (like a table), the gap was the bottom margin of the preceding element. One place to spot a difference is on a page where the first navbox is preceded by something that isn't a list, such as a succession box: see for example Angela Eagle#External links where the gap is twice as large as it was (1em instead of 0.5em). --Redrose64 (talk) 16:15, 11 July 2015 (UTC)
(edit conflict) Not really. Any such change to the page and heading margins should be made in core MediaWiki and discussed between people who understand UX, on Phabricator. Afterwards, we can adjust the navbox (and succession box) margins accordingly. Alakzi (talk) 16:18, 11 July 2015 (UTC)
I'm willing to start a Village pump discussion or create a Phabricator ticket – which one of those is the way to go? @Redrose64: Thank you for the explanation! — Dsimic (talk | contribs) 16:29, 11 July 2015 (UTC)
Goes to scope... If you want the change to be for the English Wikipedia only, we should discuss here. If you want to change the software used by thousands of projects, then Phabricator is the venue. -- [[User:Edokter]] {{talk}} 17:28, 11 July 2015 (UTC)
I'm looking only for the change in English Wikipedia. Any chances, please, for bumping it to 2em, which would flow perfectly with the current spacing between sections? — Dsimic (talk | contribs) 17:36, 11 July 2015 (UTC)
Just checking, Edokter, is this a WP:DEADHORSE case or we can discuss it further? — Dsimic (talk | contribs) 01:05, 20 July 2015 (UTC)
I would oppose that change, so even if it's not a dead horse, you have at least one detractor. The whitespace is fine as-is IMO. --Izno (talk) 01:42, 20 July 2015 (UTC)
Ok then, although I don't agree. I'll stop beating a dead horse and do something more productive. — Dsimic (talk | contribs) 06:11, 20 July 2015 (UTC)
FWIW, I concur with Edokter and Izno; 2em seems a bit excessive. It seems like you want the navboxen to be visually interpreted as forming a document section of their own, but I can't see a rationale for that. It's just more "page bottom crud" like succession boxes, stub tags, etc.  — SMcCandlish ¢ ≽ʌⱷ҅ʌ≼  10:27, 1 August 2015 (UTC)
I guess it's up to one's taste and perception, but navboxes are some kind of a logically separate document section. They surely don't belong either to "see also" links, references, or external links, but we currently have them visually connected to whichever section is the last one in an article. Moreover, according to WP:STUBSPACING stub tags are supposed to be double spaced, which just confirms that the navboxes should be treated in a similar way. — Dsimic (talk | contribs) 11:58, 1 August 2015 (UTC)
They are not separate from the article. This applies to all boxes at the bottom. The stub message is not a box though, and has no margin; that is why it is "usually desirable" to add an extra line to trigger a paragraph. -- [[User:Edokter]] {{talk}} 20:58, 1 August 2015 (UTC)
IMHO, navboxes are logically separate article sections. As I said, it's all about personal taste. — Dsimic (talk | contribs) 05:43, 2 August 2015 (UTC)
But "are logically separate" and "it's all about personal taste" are mutually exclusive approaches. Either it's objective or it's subjective.  — SMcCandlish ¢ ≽ʌⱷ҅ʌ≼  04:11, 7 August 2015 (UTC)
Well, my opinion remains unchanged, navboxes form logically separate article sections. With "it's all about personal taste", I wanted to say that other people clearly have different opinions. — Dsimic (talk | contribs) 04:56, 7 August 2015 (UTC)

Compensate for italic lean

The fact that italic text leans to the right leads to a problem we can easily compensate for. In some fonts, an italicized character fuses with, even overlaps, a non-italicized character that follows it, leading to a readability/parseability problem. See Template:Var/testcases, which may or may not actually demonstrate the problem for you, depending on your fonts. This problem has been catalogued by others before, e.g. on CSS blogs, math formatting guides, etc. See, e.g., Jukka Korpela (2000), "Math in HTML (and CSS)" at "Italic may cause spacing problems", IT and Communication, Finland: Tampere University of Technology.

This can be compensated for by adding padding-right: 0.07em; or maybe padding-right: 1px; for everything that is italic by default, including var { }, i { }, and em { }, though it is most important for var, since the issue mostly affects code and math presentation. We also would need to apply it to cite { } in theory, but it would actually be wiser to turn off italics on the element, as we did with dfn (which some browsers italicize by default); it's okay as a default style for sites that don't have their own style guidelines, but it doesn't make sense at Wikipedia.

Use of padding-right: 1px doesn't scale with increases in font size, so it doesn't work as well at large font sizes (generally always avoid doing anything in px that affects scaleable content; that's what's em exists for). But the difference is minor in the tests I've done so far (up to font-size: 500%;, which is what a legally-blind but still slightly sighted person I know uses), and 1px will work at very small font sizes, while 0.07em might round to 0 (I haven't been able to get it to do this at a font size that's legible; if it gets to where it's working in fractional pixels, it'll round first up to 0.1em before it ever rounds that to 0; it takes a really tiny font for 1/10 em to be smaller than 1 pixel.

I've tested both versions of the CSS in Mac OS X 10.10, several versions of Windows, CentOS Linux, Ubuntu Linux, FreeBSD, Android 4, iOS, and Chromium OS (freeware Chrome OS), usually with the default fonts provided by the OS and browsers; and in multiple browsers (all the common ones): Firefox, Chrome, Chromium, Explorer, Safari, Opera, Konqueror, even some oddballs like Samgsung Internet. This has no negative effects in any of them, using either version of the code above, which has been deployed in inline-style in {{Var}} as a proof of concept. Also tested with an unusually narrow monospaced font.

It cannot do anything to compensate for unrelated forms of undesirable weirdness. E.g., the default system fonts provided in a few of the test situations, including "vanilla" virtual machines of FreeBSD and CentOS, actually have a nearly opposite problem, with all italic text being shifted a hint leftward at the baseline, such that italic text apperars a bit closer to the preceding non-italic text than it should. The above solution to the identified problem that affects actual reability/parseability for real users, right now, has no effect on this other problem, pro or con (which just looks funny, and doesn't impact the ability to make out what the text says). An attempt to do something about that with margin-left or padding-left will have an exqual-but-opposite negative effect for everyone else, causing something like abc to look like bc. Most Linux users install Web fonts packages and such, and don't stick with default system fonts, anyway, so it's basically a non-issue.

The proposed tweak has no effect at all in Konqueror in its native rendering mode (which has incomplete CSS support), nor of course in non-GUI user agents.

PS: The source mentioned above suggests also setting margin to 0 on these elements, in case any browsers are auto-applying some by default. I'm not aware of any that are, but the Template:Var/sandbox is doing this, to test it. I can't find a case where it makes a difference, and I have a lot of virtual machines and browsers.

 — SMcCandlish ¢ ≽ʌⱷ҅ʌ≼  21:14, 19 July 2015 (UTC)

This seems a well-thought out proposal that addresses an observable problem and I can't see any downside to deploying it. It has my support - with a clear preference, of course, for the padding-right: 0.07em; over anything that works in pixels. --RexxS (talk) 22:09, 19 July 2015 (UTC)
I also am agreeable to this change for var, em, i, and cite. Turning off cite is a separate bridge to cross; see MediaWiki talk:Common.css/Archive 15#Restore default style for HTML cite element (and also MediaWiki talk:Common.css/Archive 15#cite: included work titles). --Izno (talk) 01:51, 20 July 2015 (UTC)
I can only support the 1px option, for reasons I explained on the template talk page; 0.07em will round to zero on many clients that still ude a pixel grid for font rendering, negating the intended effect. Plus, at larger sizes, the space is not needed, so we don't need scaling space. -- [[User:Edokter]] {{talk}} 05:28, 20 July 2015 (UTC)
The earlier discussion is at Template talk:Var. I can't see that 0.07em will round to 0 with any font size above 7px. And I can't read any text in a 7px-sized font anyway, so who would it affect? As for the argument that at larger font sizes, it's not needed: a lot of things are not needed, but are still worthwhile, and so it would be in this case. I wouldn't oppose the improvement that the 1px option would bring, but would still prefer the 0.07 em option, as I maintain it would look better than 1px at larger font sizes. --RexxS (talk) 08:36, 20 July 2015 (UTC)
(ec) Edokter: So, you'd oppose an improvement for almost everyone (approx. 97% of users, and identical for them to the other version of the padding) on grounds that it doesn't improve enough in the direction you favor, the edge case who have superhuman vision already, and where neither version is worse for anyone than doing nothing? That doesn't seem right. At very least one would support either version and prefer one. The px version produces a probably useless effect, for a user class who may not exist, and basically no effect for a substantial group of users, while the em version provides no effect in the case where probably no one would use it anyway, but a more useful effect than the px version does for the fairly large class of vision-impaired users. Just from an accessibility and usability perspective, wouldn't we go with the em version?  — SMcCandlish ¢ ≽ʌⱷ҅ʌ≼  23:07, 20 July 2015 (UTC)
I thought the whole point was to make the italics more legible at default and smaller font-sizes. Larger sizes do not suffer the problem, so why the need for more (scaling) space? It will look plain ugly. And what is the point of negating the effect below 7px; perhaps some people do read that comfotably (it depends on what font is used). The 1px makes it legible for all users, not most. -- [[User:Edokter]] {{talk}} 15:55, 21 July 2015 (UTC)
Larger sizes do suffer the problem, for visually impaired users (i.e., those using the large fonts). What "plain ugly" effect are you seeing? I blew this stuff up to 500% size, in multiple browsers on multiple OSes with different fonts, and encountered no such problem. But, maybe I'm making an accessibility argument that isn't significant enough to care about; I asked WT:ACCESS and WT:WCAG, since users who are actually in that class of partially-sighted people are regulars there and can give more direct feedback. As I said earlier, I'd be in favor of the 1px version over doing nothing. My concern is that there is no "maybe" about the fact that some users read at 500% font size, and actually need to. It seems to me that this trumps the hypothetical, that some users (who don't literally need to) could maybe actually read below 7px size.  — SMcCandlish ¢ ≽ʌⱷ҅ʌ≼  22:38, 29 July 2015 (UTC)

Test, if your browser settings will even allow a font to go that small: Using 0.07em padding @ 7px: Cc vs. Oc — and using 1px padding: Cc vs. Oc — and using no padding: Cc vs. Oc. That's even smaller than nesting <sup><sup>...</sup></sup>: Cc (which we wouldn't do without jacking up the font size in either HTML or switching to <math>. We just don't use fonts that small, and who would make them that small manually? Lots of users make text bigger though. I wear 2.25x reading glasses, and still get eyestrain and jack up font size toward the end of the day. The scaling difference between the em- and px-padded versions isn't a huge deal, but doing font-related stuff in px has been denigrated since the mid-'90s for good reason. Anyway, I actually tested this, blowing up a screencap of that 7px font 500%, and can confirm that the 0.07em version does lose its padding-kerning at that size, but does it matter? Who here can legibly see the difference in the three-way test above, without cheating (no ctrl-+ / cmd-+, no glasses changes, etc.)?  — SMcCandlish ¢ ≽ʌⱷ҅ʌ≼  23:07, 20 July 2015 (UTC)

I'm not entirely against this, but I do think it's sort of pointless in it's fragility. Truly, if you care about this level of detail of text rendering, it's time to start filing complaints with Operating System vendors, it might take longer, but at least it will benefit everyone. The web is the web and that comes with a certain amount of uncertainty about how your page will be rendered on a client. —TheDJ (talkcontribs) 18:18, 21 July 2015 (UTC)

As Edokter says, it's a font, not OS, or browser issue. (I guess its an OS issue in one minor sense in a couple of cases, i.e. the default fonts included, but users of those OSes rarely stick with them, so it doesn't matter.) The tweak doesn't seem "fragile" to me; it doesn't break anything, for any one, it just has to be optimized for one extreme of the spectrum of font sizes or the other. Web accessibility best practices already tell us which one of those to use. :-) In either case it is better for a minimum of 97% of users, yet worse for 0. Here we get to reduce a tiny bit of the GUI browser rendering uncertainty as zero cost (other than the time spent arguing about it).  — SMcCandlish ¢ ≽ʌⱷ҅ʌ≼  19:23, 22 July 2015 (UTC)
I should acknowledge a mistake I made in an earlier comment. Alakzi has pointed out to me that a least one browser (Chrome) uses a floor() function, not a round() function, to convert calculated ems to pixels. The effect of that in such browsers would be that 0.07em would round down to 0px below font sizes of 14px, which would negate the value of the fix at just the range where it would be most useful. In light of that, my preference would tip towards padding-right: 1px;, but as before, either fix would be an improvement over the present styling. --RexxS (talk) 21:31, 22 July 2015 (UTC)
@RexxS: Hmm. But it's not actually having the effect being predicted by you and Alakzi; Chrome is my everyday browser on the OS I use most, and I tested that browser specifically in multiple OSes, along with others.  — SMcCandlish ¢ ≽ʌⱷ҅ʌ≼  22:24, 29 July 2015 (UTC)
I'm going to agree with TheDJ here: you're screwing around with the kerning to make it look better for some users at the expense of others (including those with browsers/OSes/fonts that do it correctly)? No thanks. Anomie 18:24, 23 July 2015 (UTC)
@Anomie: Please re-read. It isn't done at the expense of anyone. It makes it look either better or visually indistinguishable (depending on fonts) for ~97% of users (all those using GUI browsers and who do not have vision problems); for the remaining ~3%, it will either also help those with vision problems (in my version), or not help them (in Edokter's version). For 0% of users does it have any negative effect of any kind. And TheDJ didn't say anything about this question, but suggested that it's an OS vendor problem (which it clearly isn't).  — SMcCandlish ¢ ≽ʌⱷ҅ʌ≼  22:24, 29 July 2015 (UTC)
In my browser and font stack it inserts unnecessary extra kerning, not terribly different from [3]. I haven't customized my browser or my font stack beyond installing DejaVu Sans. It's up to the fonts and font rendering engine (often part of the OS, otherwise part of the browser) to supply correct kerning. Anomie 11:56, 30 July 2015 (UTC)
In theory. In reality this essentially never happens for italicized text on websites unless they actually supply the fonts or do it with images. If the extra kerning for you doesn't render the material unreadable, then it wouldn't seem to be a big issue. In Edokter's version it's only 1px difference, and in mine, only more than that (by design) if you are using a large font. A 1px gap is unlikely to make any text unreadable, but when it separates run-together glyphs, it makes any affected text more readable.  — SMcCandlish ¢ ≽ʌⱷ҅ʌ≼  22:11, 30 July 2015 (UTC)
  • So, are we going to get on with this or what?  — SMcCandlish ¢ ≽ʌⱷ҅ʌ≼  08:56, 5 August 2015 (UTC)
    • Probably not. Regular italics is normally spaced, so the issue seems to be limited to the {{var}} template. -- [[User:Edokter]] {{talk}} 16:19, 5 August 2015 (UTC)
      • No, it's not:
        • xCo
        • xCo
If there's any visual difference at all it's because you're doing something on the user side to make them different.  — SMcCandlish ¢ ≽ʌⱷ҅ʌ≼  03:20, 7 August 2015 (UTC)

Eating the cake yet still having it: It would be a simple matter to have {{Var}} (and similar templates) have a |small=yes that changed the 0.07em to 1px, so that if the var in question is being used inside, e.g., <sup> or <small>. the effect that Edokter wants at tiny font sizes will happen, without this impacting the accessibility-desirable effect of the em default to larger font sizes. Win-win scenario. Implemented at Template:Var/sandbox; see bottom of Template:Var/testcases.  — SMcCandlish ¢ ≽ʌⱷ҅ʌ≼  03:53, 7 August 2015 (UTC)

This is looking more and more like a personal quest. No, I don't see any difference in your example (not that it would show in pre-formatted text anyway). The fact you only want it to happen above a certain font size, while ignoring the smaller font sizes, makes me believe that this is not so much about a universal solution, but rather a personal preference. I do not consider this issue a problem at all, and most of the time, the browser will display it correctly. This is a case of trying to micro-manage browser behaviour, and we should not fall into this trap, because there is no end once we start nitpicking over every minor pixel rendering issue. We shouldn't add any padding for any italics text, and frankly, I'd remove the 1px from {{var}} as well. -- [[User:Edokter]] {{talk}} 15:59, 7 August 2015 (UTC)
I think we're just talking past each other somehow, since I get the same impression about you. You only want anything to happen for a tiny font size people don't really use, and do not seem to care at all whether it also does something for an actual class of users, the large number of people with vision problems who use larger font sizes. Your solution is not universal at all, as has been pointed out multiple times. I think I'll just RFC this, since trying to get through your filibustering is, as usual, a total waste of time. This should just have been fixed weeks ago, with the version that clearly has accessibility-reasoned support from multiple editors. You're the one nitpicking over pixels; my proposal specifically avoids doing that.  — SMcCandlish ¢ ≽ʌⱷ҅ʌ≼  12:45, 9 August 2015 (UTC)

I can confirm that there are people who need abnormally large font sizes in order to read comfortably; my supervisor at work is one of them. However, I cannot confirm (and in fact doubt) the existence of users who can only comfortably read text which is abnormally small, and I don’t think anyone has put forth a use case where this would be necessary. So I’m voicing my support for the scalable option here. —67.14.236.50 (talk) 14:57, 9 August 2015 (UTC)

As has been said earlier, the scalable option doesn't work in Chrome for body text, with the browser sans-serif default being 16 pixels. Alakzi (talk) 00:45, 10 August 2015 (UTC)
@Alakzi: Did you see SMcCandlish’s 22:24, 29 July 2015, comment about that? —67.14.236.50 (talk) 04:44, 10 August 2015 (UTC)
Right, I'm using Chrome and Chromium right now, at the same time, and it's working fine in both of them. I actually developed all of it in Chromium to begin with, and subsequently did testing and made adjustments using other browsers and OSes later (including Chrome OS)! Whatever theoretical problem there could be with Chrome, it isn't an actual one.  — SMcCandlish ¢ ≽ʌⱷ҅ʌ≼  06:16, 10 August 2015 (UTC)
Responding with "there is no problem" after being told there is one is exceedingly productive. What operating system did you test it in? What version of Chrome/Chromium are you using? Have you altered the browser font defaults? Is your zoom level above 100%? Alakzi (talk) 08:11, 10 August 2015 (UTC)
@Alakzi: Telling me there must be a problem, that you can't demonstrate, is what's unhelpful. Just because you read somewhere something that suggests there could be a problem if the math works out the way you think it will doesn't mean there's a real problem. Provide screenshots and your own system details if you can demonstrate an issue. I already detailed earlier in the thread what OSes I tested it in. I'm using the current stable version of Chrome (auto-updated), and a recent nightly build of Chromium (not the very, very latest; I run Chromatic periodically to update it, when I'm satisfied that people's aren't saying something broke in the last set of commits). No, my zoom level hasn't changed. This whole thing is a tempest in a teacup. Even if this somehow didn't work for Chrome, it would have no negative effect and would still work for everyone else. But it works fine in Chrome. I'll post a screenshot myself if you like; what do you want it to demonstrate, specifically, that isn't demonstrated by firing up Chrome yourself and viewing the examples in this talk page discussion and the Template:Var/testcases page?  — SMcCandlish ¢ ≽ʌⱷ҅ʌ≼  08:46, 10 August 2015 (UTC)
@SMcCandlish: I have explained it previously. I didn't "read it somewhere"; I've actually tested it in Chromium nightly (v46) on OS X, and RexxS appears to have been able to confirm my findings. Specifically, Chromium rounds percentages down to integers, with the resultant padding always being 0 below 15 pixels font size. Alakzi (talk) 08:50, 10 August 2015 (UTC)
RexxS didn't confirm anything, he just repeated and cited you: Alakzi has pointed out to me that .... If this effect happens at all in Chromium, it's a bug/misfeature they need to fix. I cannot reproduce the problem you are reporting, and you are reporting problems with bleeding-edge alpha software that you should be filing bug reports about with the Chrome/Chromium developers, not here. Just for you, I installed the very newest Chromium nightly (which is buggy as hell; I'm retrograding to at least the last Dev version immediately). I'll just do an inline test right now:
  • CoCoCoCoCoCoCoCo – kerned
  • CoCoCoCoCoCoCoCo – bare
The kerning works down to 12pt at least (my eyes can't tell the difference between the kerned and unkerned below that) even in Chromium nightly (46.0.2478.0, on Mac OS X 10.10.4). If it's not working for you, I don't know what to tell you, other than maybe you're using less than 100% normal size. I just double-checked my settings and zoom level is "100%". If it doesn't work for you, oh well. It does no harm, and it helps everyone else. Is WP even using any text smaller than that? Why would we need to do something for font sizes so small they don't matter? Wouldn't most people just ctrl-plus or cmd-plus (per OS) to temporarily make it bigger if the text was painfully small? If they do, it'll auto-scale up to a font size Chromium doesn't do something stupid with. And I repeat that it's not our job to compensate for issues found in alphaware. If I can figure out where to report this as a problem to the Chrom* devs, I'll do so happily. They need to use the same rounding everyone else in the world does.  — SMcCandlish ¢ ≽ʌⱷ҅ʌ≼  13:11, 10 August 2015 (UTC)
I didn't bother to test it with the current version of Chrome, because I know the issue's been there for ages. But for your benefit, I've downloaded the latest version of Chrome, binned my browser profile, and took a screenshot: [4]. Would this be a good time to stop haranguing me? Alakzi (talk) 13:28, 10 August 2015 (UTC)
URL Goes to a 404 error. I don't see reporting that my results differ from yours and providing test code for us all try out as "haranguing".  — SMcCandlish ¢ ≽ʌⱷ҅ʌ≼  01:32, 24 August 2015 (UTC)
@Alakzi: Do you maybe have some user-CSS overriding it? Does it look the same when you are not logged in to the wiki? —67.14.236.50 (talk) 02:13, 11 August 2015 (UTC)
I’m seeing identical results to Alakzi in Chrome v26.0.1410.65 (I haven’t run it in a while) on OS X v10.10.4. And after relaunching Chrome… still the same in v44.0.2403.130 (64-bit). Kerned and unkerned look identical, whereas in Safari (6.0.7) there is a noticeable difference. —67.14.236.50 (talk) 02:33, 11 August 2015 (UTC)
PS: Here's a test with relative font sizes. The kerning works all the way down to 82%, and shuts off at 81% or lower, in Chromium at 100% zoom (I took screenshots and blew them up so I could see):
  • CoCoCoCoCoCoCoCo – kerned
  • CoCoCoCoCoCoCoCo – unkerned
Do we really need it to go lower? Is it more important that it do something for super-tiny font sizes (what's the use case?) than for all non-tiny font sizes, including those used by people with vision problems? That is, given that both the em and fixed px versions do something useful most of the time, and do no harm, and thus one or the other should be implemented, how is it better to do the tiny font thing instead of the accessibility thing? Roughly 3% of people have severe vision problems, so that's one edge case. I'm skeptical that we're using super-tiny fonts 3% of the time, and even if we did, divide that number by percent of browser users who are Chrom* users, as the other edge case. Other browsers show the em kerning all the way down to 8px, so even tiny fonts are not an issue for most users, if we are using them. It's basically Chrom* users with great vision vs. everyone with poor vision, in a contest where it's not clear there are any real-on-WP Chrom* issues anyway.  — SMcCandlish ¢ ≽ʌⱷ҅ʌ≼  13:11, 10 August 2015 (UTC)

Also: “No, I don't see any difference in your example (not that it would show in pre-formatted text anyway).” Oh, but it does:

Markup Renders as
<code>x<var style="padding-right:5em">C</var>o</code>

xCo

67.14.236.50 (talk) 15:08, 9 August 2015 (UTC)

His above example did not use any padding. Doing so would negate the use of preformatted text anyway. As for scalability; as the font grows, the 'problem' is negated as the character grow further apart with size. I still maintain we should not mess with any font's natural kerning. -- [[User:Edokter]] {{talk}} 15:31, 9 August 2015 (UTC)
The only problem with that philosophy - which is generally commendable - is that editors sometimes find ways of using text in unnatural ways. When the font designers set up the oblique version of their fonts, I doubt that they expected italic to run into normal fonts without an intervening space. But it is precisely what happens with some mathematical formulae where you may see something like afL. Now, I don't know how good your vision is, but I can't read that accurately as the three characters a, f and L without considerable effort. Something - anything - that improved that would be a blessing for me. --RexxS (talk) 17:48, 9 August 2015 (UTC)
Exactly. This "never interfere with the purity of font design" stuff has jack to do with what WP needs to do at a practical level, as an encyclopedia for real-world readers. WP is not a CSS showcase, it's an informational publication using an imperfect medium that sometimes must be compensated for and worked around.  — SMcCandlish ¢ ≽ʌⱷ҅ʌ≼  05:44, 10 August 2015 (UTC)
The characters don’t grow further apart, though. Well, they do, but in direct proportion to the size of the letterforms, so it’s a wash. They still run together; they just do it bigger. —67.14.236.50 (talk) 18:18, 9 August 2015 (UTC)
But it doesn't make the text unreadable. That may only happen at smaller sizes. -- [[User:Edokter]] {{talk}} 18:58, 9 August 2015 (UTC)
At unreadable sizes that there's no use case for? Well, sure. It also makes text more difficult to read even at larger sizes, especially for those for whom normal text is unreadable. So let me ask again, what is the use case that you are envisioning here? —67.14.236.50 (talk) 23:57, 9 August 2015 (UTC)
(edit conflict) Edokter, it seems that you are thinking of huge fonts from the perspective of normal vision; it's a false equivalence. The accessibility issue being addressed by the em-based, instead of px-based, version is this: When you have to wear "Coke-bottle-bottom" glasses, and use 500% font size, and put your face 1 cm away from the screen to make out letter forms, the situation of two letters running together at 500% font size is precisely the same for that person as the same two letters running together at 14 pt size for someone with normal vision. I am not exaggerating. I know someone with albinism who has to read monitors this way. He keeps screen wipes around because he often ends up rubbing his nose on the monitor and getting skin oils on it. Have you not noticed that every modern OS includes a built-in screen magnification accessibility app? Surely you realize people actually use them; they were not included as some kind of gimmick. Meanwhile, I'm skeptical that anyone else in the world but you cares about the theoretical case of someone trying to read the same character string at 7pt size on WP (which is notably smaller than even <sup> nested inside another <sup>, at any sane default font size). This 7 pt font size thing is a use case that does not exist on WP. If you're sure I'm wrong, please demonstrate where it is used, and why it should not be fixed to use a rational font size. And I already provided a workaround for this "need" of yours, at Template:Var/sandbox just to keep you happy (which instead prompted a "This is looking more and more like a personal quest" accusation from you that pretty clearly boomerangs right back in your own direction).  — SMcCandlish ¢ ≽ʌⱷ҅ʌ≼  05:44, 10 August 2015 (UTC)
My point is, you cannot fix this for everybody. Your 0.07em padding is based on your display/findings and do not necessarily work for others, and may in fact harm readability for those, depending on what font settings are used. Your latest example does not show any different for me (my monospace font is Consolas), and using padding in preforematted text (which is well where vars may end up in) is definitely undesirable. This is not a fix-for-all. And I am not going to implement any kerning that is not guaranteed to work for everyone in any situation. Reading this discussion, there is no consensus to do so anyway. Since no one else has actually complained, I recommend you fix this using your personal CSS instead. -- [[User:Edokter]] {{talk}} 16:48, 10 August 2015 (UTC)
Isn’t anything with absolute measurements (e.g. 1px) in text guaranteed not to work for everyone? I ask because you have voiced support for such an option, and you seem to be contradicting yourself here. —67.14.236.50 (talk) 02:18, 11 August 2015 (UTC)
Same in thread below this one, arguing for 40px instead of something in em. No one asked Edokter to make this change; this page does not belong to him. He seems to think his version works for everyone, but it doesn't. It's optimizing for people who don't need it. See up top when I first posted this, I've tested it extensively cross-platform. There isn't any way for this to do negative things. All it does is add a very, very tiny sliver of space to the right (without any effect on the left) to prevent characters from butting up against (or worse, overrunning) each other, in a scalable way. It's not possible for it to magically cause a giant gap in one browser, or fused text on the other side in another browser, or any other bad thing. It just doesn't work that way. The problem with Edokter's 1px version is that it does not scale up, but always stays that size. For people who need large fonts, this difference visually disappears, like trying to use a piece of paper as a mattress, and the characters will still appear run up against each other. They won't if you have Edokter's apparently normal vision, but you wouldn't be reading WP at 400% font size if you had such vision. It boggles the mind that we can still be trying to establish this concept after weeks now. No one else seems confused by this.  — SMcCandlish ¢ ≽ʌⱷ҅ʌ≼  19:32, 11 August 2015 (UTC)
The only problem is, in some user agents (at least in Chrome on the latest Mac OS), the 0.07em causes no change at normal text sizes. So this is a NOOP for non-sight-disabled people using Chrome. On one hand, that means this only benefits Chrome users with large fonts, and non-Chrome users with all sizes. On the other hand, if you have trouble reading you’re likely to be using large fonts, and we are not responsible for aberrant browser behavior. So despite Chrome’s failure to render it properly, I still support the em padding. —67.14.236.50 (talk) 22:19, 11 August 2015 (UTC)
I agree about using ems. The Chrome issue is not specific to OS X. Alakzi (talk) 01:30, 12 August 2015 (UTC)
And if the incredibly small change from 0.07em to 0.08em fixes the issue even for Chrome, then that sounds like a win–win. I'm preparing a bug report for the Chrome devs about the problems caused by their use of floor() instead of round()  — SMcCandlish ¢ ≽ʌⱷ҅ʌ≼  01:44, 24 August 2015 (UTC)

Italics padding comparisons

For reference, and to play with zooming and font sizes:

  • No padding-right: afL
  • 0.07em: afL
  • 1px: afL
  • And just for kicks, 0.08em: afL (which does work in Chrome, if this is an option)

67.14.236.50 (talk) 22:19, 11 August 2015 (UTC)

Felt like doing a comparison table:

1px padding vs 0.07em padding
1px 0.07em
Normal viewing Perceptible difference on all user agents Perceptible difference on most user agents;
no difference for some Chrome users under Mac OS X 10.10.4
Using zoom feature Perceptible difference Perceptible difference
Larger font sizes set on a webpage Diminishing returns Perceptible difference
Larger font sizes set by browser settings Diminishing returns Perceptible difference

67.14.236.50 (talk) 01:11, 12 August 2015 (UTC)

It should be noted that, with Chrome having the largest usage share worldwide, "perceptible difference in normal viewing on most user agents" is not a very meaningful metric. Alakzi (talk) 01:30, 12 August 2015 (UTC)
Second largest, behind IE, according to https://netmarketshare.com. Chrome is also second largest on mobile, behind Safari. But you have a point, so I’ve altered the wording. —67.14.236.50 (talk) 02:53, 12 August 2015 (UTC)
Does using a value of 0.08em behave as expected in all browsers, including Chrome where 0.07 doesn’t? Are there reasons not to use 0.08 in favor of 0.07? Because at the moment, it seems to me to solve all the problems that have been brought up. —67.14.236.50 (talk) 03:16, 12 August 2015 (UTC)
Yeah, it works fine. I was using that value, among others, in earlier tests, and started with much larger ones, like 0.12em. I went down to 0.07em as the absolute minimum that produced a visible difference and prevented run-together text at typical font sizes. The problem with a value like 0.12em is that on some (mostly *n*x) systems, a few default fonts don't really have much of an italic lean issue, so padding that large looked funny, rather like "af L" in your examples and "C o" in mine. Obviously undesirable.

But the visual difference between 0.07em and 0.08em is virtually undetectable (if you're at a font size large enough that Chrom* doesn't "vanish" the 0.07):

0.07em fL+Co
0.08em fL+Co
1px fL+Co
none fL+Co
In Chrome, at page zoom 100% all three of the first are legible for me (yes, I know for you and Alakzi it's not; my guess is I'm doing something at the system-wide level somehow that's affecting my display across applications, but I can't seem to track it down); the fourth is not, with the f overlapping the L. At 90%, 0.08em and 1px are legible, but the bottom and top options are not. At 80% (what I'm guessing will be 90% for you), the 1px version is not much better than no kerning, but the 0.08 version is notably more legible than the 1px version! At 70% (your 80%, I think) it all just makes my eyes hurt. And I think we were generally aiming to not use font sizes on WP below about 80% anyway, right? Jacked up to 110%, all three of the first options are great, the bottom one is crap. At 250% ditto, and the 0.08em and 1px versions are identical, a hair better than 0.07em. I can fire up the VMs and test in Windows, CentOS, FreeBSD, whatever if anyone wants.  — SMcCandlish ¢ ≽ʌⱷ҅ʌ≼  02:24, 24 August 2015 (UTC)
Are you starting to understand why there is no one value that will fix it for everyone (or perhaps even most)? For it to be perceptible, you have to be within a tight range of parameters for this to work: 1) no zoom 2) default font-size 3) MacOS 4) ... Anything falling outside these parameters will have unpredictable results. That is why I oppose these kind of changes; they do not fix these issues per se, only for some. There is no solutions for this wihtout breaking something else. -- [[User:Edokter]] {{talk}} 15:40, 24 August 2015 (UTC)
No, Edokter. At least three of us have now confirmed this has nothing to do with Mac OS X. It does not break anything for anyone. The initially demoed value of 0.07em solved the italic lean problem for everyone except [some] users of Chrom*. Now the 0.08em version even works for them, unless they go down to ridiculously small font sizes no one GAF about, while having no effect on anyone else, because the difference is so small, all it's doing is working around Chrom*'s floor() bug (which has already been reported for fixing anyway, and which WP is not obligated to compensate for to begin with). The more you zoom the better it works. Everyone seems to be understanding this except one person. The only way to break anything with this is to use an extreme value like 0.12em, which no one is proposing. Using 0.08em is the solution. It works fine for normal wikitext, and helps those with vision problems. I'm sorry no one is buying your 1px idea, which does nothing for people with vision problems, and is optimized for insanely small font sizes no one uses. Isn't this a stick you can just drop?  — SMcCandlish ¢ ≽ʌⱷ҅ʌ≼  23:28, 24 August 2015 (UTC)
I thought that tight range was where a value of 0.07 em in Chrome didn’t work; Chrome is the only browser that has been shown to have unpredicted results. That padding (as well as 0.08 em) is beneficial in every other setup and at any higher magnification (zoom or size) on all systems. And importantly, no matter what the circumstances, none of these solutions make anything worse for anyone—either the text is made more legible, or it’s not. The benefit in all cases. A relative value just benefits more use cases than an absolute one (and no one has even suggested a use case where the reverse is true). —67.14.236.50 (talk) 02:00, 25 August 2015 (UTC)
I’m having trouble finding any place to upload SVG files to, but here’s a link to a PNG version of an Euler diagram I threw together (including a sloppy freehand shape) illustrating the circumstances under which 0.07 em padding will and will not work, based on all that’s been reported here. I hope it’s readable. Oh, and for 0.08 em, the “does nothing” area would be smaller (since it actually does work with some smaller fonts). —67.14.236.50 (talk) 03:30, 25 August 2015 (UTC)
I still don't see the benefit, and still see the issue of preformatted text being unresolved. -- [[User:Edokter]] {{talk}} 16:44, 25 August 2015 (UTC)
The benefit is reducing or eliminating the overlapping of characters hindering readability. Could you demonstrate how the proposed solution may be problematic in preformatted text? Maybe modify something copied from an article? Or at least point to something where italics are used in preformatted text? —67.14.236.50 (talk) 22:52, 25 August 2015 (UTC)
Again, these are edge cases. If we start 'fixing' those (and with arbitrary values not working for everyone), there will be no end in sight. It is too minor an issue for a fix that may have a major impact. I don't know a page offhand, but consider the following (using 1px to guarantee the issue is visible):
This is line one and two and three and four and five.
And this is text wihtout padded italics.
See how the alignment becomes completely lost. That is an unacceptable side effect, and quite hard to filter in CSS. So again, no. -- [[User:Edokter]] {{talk}} 16:58, 26 August 2015 (UTC)
Okay, but again, when would that ever happen? Preformatted text tends to be Roman. With my question, I was looking for a case that was plausible on Wikipedia, preferably one where the difference would really matter. All that comes to mind is ASCII art (which wouldn’t use any bolding or italics) and programming code (which may use syntax coloring, but otherwise unformatted). So this seems to be a non-issue, quite frankly. Also, a value of 0.08 em does appear to work for everyone. —67.14.236.50 (talk) 22:19, 26 August 2015 (UTC)
Now this is a non-issue? There are plenty of code samples that employ italics. And this probably occurs more often then the cases prompting for this change. Can I have some real examples that necessitate the extra padding in site CSS, and which are not already served by the template's inline CSS? -- [[User:Edokter]] {{talk}} 09:47, 29 August 2015 (UTC)

Summary

Guys, the more discussion I read about optimal values, the less I am convinced this is actually needed. I say again, don't mess with default kerning. If letters touch, that is one thing, but at least they don't overlap. Hell, the touching may even be intended. In any case, this is not something we should be fixing. First, it happens in very rare cases, with only a few fonts, and very few people are affected by it. There are other pitfalls, such as in preformatted text, where it will disrupt layout. Those that are actually affected should use personal CSS; but a site-wide CSS solution is way unappropriate. -- [[User:Edokter]] {{talk}} 15:47, 12 August 2015 (UTC)

I suppose that’s the other side of a coin I mentioned earlier: we are not responsible for aberrant browser behavior, but we are also not responsible for poor font design. —67.14.236.50 (talk) 22:25, 12 August 2015 (UTC)
I'm afraid that on my normal setup (Win7/Chrome/Monobook), in afL, the 'f' actually does overlap the 'L'. Using afL, the 'f' just touches the 'L'. Using afL, there is a visible gap. Of course I have to zoom to 200% to see the actual effect, but I know that in every browser I try, I can discriminate the letters at 100% in either of the two latter cases, but not in the first. Anyway, it's no big deal for me, I can just fix it in my personal CSS. That doesn't help a reader who's not registered, of course, but I won't push the point any further. --RexxS (talk) 00:06, 13 August 2015 (UTC)
I can confirm RexxS's results in MacOSX 10.10.5 / Chromium stable / Monobook. I'm not convinced by Edokter's "summary". There's zero evidence to support notions like "the touching may even be intended" and "it happens in very rare cases" and "with only a few fonts" and "very few people are affected by it" and "There are other pitfalls" and "in preformatted text ... it will disrupt layout". Edokter supported one version of this solution, but the discussion hasn't favored his version all that much, and now he's now declaring all solutions undesirable, which seems like sour grapes. I think an RfC, not Edokter's individual view, should determine the outcome of this question.  — SMcCandlish ¢ ≽ʌⱷ҅ʌ≼  01:01, 23 August 2015 (UTC)
@SMcCandlish: I have a theory about your experiences with 0.07em on Chrome/Mac differing from ours, as discussed earlier. It hinges on the question of whether you are using a Retina display, in which case your Chrome has more pixels to play with than ours at the same physical text sizes. The gap you see (which we don’t) may be some fraction of the size of a standard pixel, which for some ineffable reason Chrome chooses to round down on standard displays.
If you don’t have a Retina display, then I have absolutely no idea why you see different behavior in an identical setup. —67.14.236.50 (talk) 01:01, 24 August 2015 (UTC)
I have a pair of Apple LED Cinema Displays, 27 in, at 2560 × 1440 px, dating to 2011. These are not Retina devices (I wish!).  — SMcCandlish ¢ ≽ʌⱷ҅ʌ≼  01:12, 24 August 2015 (UTC)
  • Anyway, the 0.08em version seems to work around the problem. I've filed a Chromium bug report here, and if they fix it, we could actually use 0.07em, not that there's much difference, but I wouldn't hold my breath.  — SMcCandlish ¢ ≽ʌⱷ҅ʌ≼  05:17, 24 August 2015 (UTC)

Hide changetags button and checkboxes in histories for non-admins/EFMs

Manual tags are being requested (e.g. Wikipedia:Edit filter/Requested#WPCleaner) but the added UI was deemed too obtrusive for most users, so until this patch gets deployed (which might take a while), I suggest we hide it with css:

#pagehistory input[type="checkbox"],
.mw-history-revisionactions {
	display: none;
}

and override at MediaWiki:Group-sysop.css and MediaWiki:Group-abusefilter.css. Cenarium (talk) 16:09, 2 September 2015 (UTC)

Done, also logs. Cenarium (talk) 13:02, 4 September 2015 (UTC)

Fix for very long-standing problem of blockquote not working with images

There's a long-known problem of blockquote being "invisible" next to floated images. It's because (somewhere, I have not identified where yet) the left and right indentation of the blockquote is being done with margin instead of padding. This was never desirable anyway, I would think, because it moves the content box to "hug" the content, instead of keeping it the same size as a regular div, and keeping the extra left and right whitespace as part of the element's internal content instead of extraneous to it.

It's fixed with this:

blockquote {
    margin-left: 0; margin-right: 0; padding-left: 2.8em; padding-right: 2.8em;
}

The "2.8" was measured, not a guess.

I've sandboxed this, in multiple browsers on multiple OSes, at Template:Quote/testcases-images (you may need to give yourself a smaller font temporarily, to keep the tests' textual content beside/between the images).

While this could be just added to Template:Quote it should really be done site-wide, so it silently fixes all block quotation to work properly with all our floated images.  — SMcCandlish ¢ ≽ʌⱷ҅ʌ≼  03:01, 30 July 2015 (UTC)

I support this change. This is an old bug that needs to be fixed. – Jonesey95 (talk) 11:36, 30 July 2015 (UTC)
Such is the nature of floating block elements; they overlap with other block elements. As block elements are not supposed to be side-by-side, this is expected behaviour. That is not to say this is worth a try... barring any ill effects inside a blockquote. For example, this will affect styling such as background color, which will continue to overlap floating content. Also, what you "measured" is just 40px; which is the default margin for blockquotes (margin: 1em 40px; in all user agents). It just happens to be around 2.8em with 14px font size. So if we do this, we should use 40px. -- [[User:Edokter]] {{talk}} 16:18, 30 July 2015 (UTC)
Ah, good catch on the 40px. I was fooled by it growing proportionally as I changed the font-size on the fly with ctrl-plus, but would have caught it if I'd manually changed the font size in the code. We probably should have been overriding the 40px with a relative amount, anyway, and using my em-based version works fine. Expected behavior from the point of view of box-model theoretics doesn't really mean much to us; this being a practical publication not an HTML demo site, we need the work-around, since this is a real, long-standing problem that people vent about, and which they do bad things to get around, like italicize quotations, misuse pull-quotation templates as block-quotation templates, etc. The background-appearance issue should really only affect {{quote box}} and any very similar templates (where there'd be an undesirable gap between the border and the quotation's background), and this can be resolved with a class or by tweaking the CSS of the individual templates.  — SMcCandlish ¢ ≽ʌⱷ҅ʌ≼  22:04, 30 July 2015 (UTC)
There are several issues like this when it comes to the "default settings". Simply having left and right margins of child elements (Paragraphs in this case) within the parent blockquote tag inherit the aforementioned 40px throughout produces the same results fwiw. -- George Orwell III (talk) 00:28, 1 August 2015 (UTC)
I like the idea, but unfortunately, that produces a double indentation when there is no floating content. -- [[User:Edokter]] {{talk}} 08:29, 1 August 2015 (UTC)
Yeah, I already tested that sort of thing before I saved the first copy of the test page. Here's a demo of that failure.  — SMcCandlish ¢ʌⱷ҅ʌ≼  09:47, 1 August 2015 (UTC)
Ok, point taken. Still, I'm uncomfortable in changing the default specs for the blockquote tag to achieve non-block like inline rendering when images are part of the mix. That scenario, to me, seems to be the exception rather than the norm when it comes to the application of the "plain" blockquote tag. Being the exception, I'd much rather see a class definition assigned to accommodate the proposed change for those image situations or the equivalent inline stylings within a specific template geared just for those same exceptional image scenarios.

Its things like that which ultimately make it harder to for semantic layout conversions to other formats more troublesome than they should be. Plus both approaches should also be viewed in mobile mode - their rendering includes quote marks. -- George Orwell III (talk) 20:18, 1 August 2015 (UTC)

"Those image situations" cannot actually be predicted at all, because the content flows and adjusts to fit the viewport and other constraints. Every single page with an image fits "the exception", so it is our "norm". I don't know what you mean by "non-block like inline rendering". Nothing at all about the display: block; is being changed. We're just compensating transparently for a problem with the element's spacing being handled with margin by default instead of padding. Purism concerns have to take a back seat to "can people read the encyclopedia?" Right now they often cannot except when editors do MOS-violating things to work around this blockquote-and-images problem, like italicizing quotations, or abusing pull quote templates with giant quotation marks (which will turn into redundantly doubled quotation marks in some mobile browsers). If we really wanted to be purist about this and to stonewall against any changes to "default" behavior, why not ask why we're using float for almost every image and wrapping it in in a box with a caption thing, in a style that bears little resemblance to what HTML+CSS do by default, when this is obviously unnecessary and causes problems like this one? If we're going to stick with that brittle over-styling, we have to be willing to compensate for the problems it causes to the central content (text) of the encyclopedia.  — SMcCandlish ¢ ≽ʌⱷ҅ʌ≼  09:08, 5 August 2015 (UTC)
Fixing this sooner than later would be good. Resolution of this is holding up other things.  — SMcCandlish ¢ ≽ʌⱷ҅ʌ≼  10:17, 1 August 2015 (UTC)

It's been over a week with no unaddressed objections.  — SMcCandlish ¢ ≽ʌⱷ҅ʌ≼  05:46, 10 August 2015 (UTC)

We haven't even decided on values yet. If we swap margin and padding (left/right), we should use 40px for now and go from there. -- [[User:Edokter]] {{talk}} 17:09, 10 August 2015 (UTC)
Why would we use a fixed pixel size instead of something that adjusts proportionally? This isn't 1996.  — SMcCandlish ¢ ≽ʌⱷ҅ʌ≼  19:20, 11 August 2015 (UTC)
Because the current user-agents implement a fixed size (for the margin), and that seems to be working fine. Was the basic idea not to simply swap margin and padding? And if we go proportional, what should we use then? Some arbitrary value, or perhaps something that fits with our current indent values, such as 1.6 or 3.2em? -- [[User:Edokter]] {{talk}} 19:34, 11 August 2015 (UTC)
Whatever seems to work better and isn't a fixed size. The 2.8em value worked well for me in various tests. I suspect that 1.6em would be too small a difference to some people (and has same problem, with regard to unnumbered lists). Though 3.2 would be more than sufficient, some might think it's too much, since it "squeezes" the content from both sides. I think it's looks fine, and don't really care much, just as long as the current "does not indent next to an image" problem is fixed ASAP. See tests in later post below: There's a reason not to use the 1.6em or 3.2em values, which is that they are already being used for unnumbered and numbered lists, respectively, and blockquotes could thus be confused with list content. (noted added 23:13, 24 August 2015 (UTC))

Some tests so people can see the difference:

1.6em

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Present default (fails next to images)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

2.8em

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

3.2em

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

 — SMcCandlish ¢ ≽ʌⱷ҅ʌ≼  01:23, 23 August 2015 (UTC)
What is problem with a fixed size? Images have fixes sizes too. In mobile, the blockquotes also hase fixed-size padding, as do lots of elements. Not everything needs to scale all the time. The current 40px margin never was a problem (value-wise). -- [[User:Edokter]] {{talk}} 15:52, 24 August 2015 (UTC)

We don't know that it was never a problem; absence of complaints is not evidence of absence of any problem, especially in a venue with an unusually high level of resistance to change. The obvious issue with it is that at a very small font size that some people might prefer who have really great eyesight, especially if they're on smaller devices (and which they may set with user-side CSS or browser font-size preferences, not with overall screen zooming), a 40 px indent will be very large compared to the font size. For someone with poor vision, doing the opposite, the 40 px indent will not be as distinct as intended at 250% font size:

Wee font, pixel indent

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  1. Lorem ipsum dolor sit amet, consectetur adipiscing el
  2. Lorem ipsum dolor sit amet, consectetur adipiscing el

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Normal font, pixel indent

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  • Lorem ipsum dolor sit amet, consectetur adipiscing el
  1. Lorem ipsum dolor sit amet, consectetur adipiscing el
  2. Lorem ipsum dolor sit amet, consectetur adipiscing el

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

250% font, pixel indent

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  • Lorem ipsum dolor sit amet, consectetur adipiscing el
  1. Lorem ipsum dolor sit amet, consectetur adipiscing el
  2. Lorem ipsum dolor sit amet, consectetur adipiscing el

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Contrast this with the proportionally padded version (using 2.8em in this case):

Wee font, proportional indent

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  • Lorem ipsum dolor sit amet, consectetur adipiscing el
  1. Lorem ipsum dolor sit amet, consectetur adipiscing el
  2. Lorem ipsum dolor sit amet, consectetur adipiscing el

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Normal font, proportional indent

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  • Lorem ipsum dolor sit amet, consectetur adipiscing el
  1. Lorem ipsum dolor sit amet, consectetur adipiscing el
  2. Lorem ipsum dolor sit amet, consectetur adipiscing el

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

250% font, proportional indent

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  • Lorem ipsum dolor sit amet, consectetur adipiscing el
  1. Lorem ipsum dolor sit amet, consectetur adipiscing el
  2. Lorem ipsum dolor sit amet, consectetur adipiscing el

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

If we use 1.6em or 3.2em, this will exactly match the indentation used by other things, and this may produce visually confusing results seemingly including a block quotation as part of a multi-paragraph list item:

1.6em after bullet list

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  • Lorem ipsum dolor sit amet, consectetur adipiscing el
  • Lorem ipsum dolor sit amet, consectetur adipiscing el

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

3.2em after numbered list

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  1. Lorem ipsum dolor sit amet, consectetur adipiscing el
  2. Lorem ipsum dolor sit amet, consectetur adipiscing el

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

The unique value was evidently chosen to avoid this problem. But it will not remain unique at all font sizes, because it does not scale:

40px exactly aligned with numbered list (on my system) at 89% font size

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  1. Lorem ipsum dolor sit amet, consectetur adipiscing el
  2. Lorem ipsum dolor sit amet, consectetur adipiscing el

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

To preserve the unique indent accordingly, use 2.8em, which matches 40px at 100% font size, and scales it consistently (already demoed with a trio of examples above).

We don't know that it was never a problem. Actually, I am going to take the absense of complaints as being not a problem. Otherwise, this is turning into a "silent majority" discussion, and I won't take part in that. Fact is, no one complaind about the 40px ever before, so it shouldn't be a problem now. And nothing is set in stone and it can always be changed again. So, do you want the change, which is an improvement, or are you going to cling to 2.8em, which you only came to because it happens to match 40px at 100% in your research, and torpedo this entire endevour?
As there is obviously no consensus as to what value to use, I'm going to take the user-agent default for the time being. That means, no change in overall spacing of blockquotes. In the mean time, we can open an RfC (or simply call more attention here) to discuss improving the valeue for the padding. -- [[User:Edokter]] {{talk}} 10:06, 29 August 2015 (UTC)
@Edokter: typo in one of the comments at "Avoid collision of blochquote w". --Izno (talk) 16:04, 29 August 2015 (UTC)
There is no absence of complaints about the blockquote-next-to-images issue, so yes of course we should get on with it and fix the blockquote-next-to-images problem, the solution to which I posted over a month ago, and which I believe you disabled the post-discussion edit-protected request for (i.e. "torpedoed"). Why? The further discussion you demanded has consisted of me demonstrating in great detail why to use a flexible value, you denying on a "I don't see the problem" basis, and then saying that I'm the one torpedoing the proposal. That's completely bassackwards from reality, Edokter.
But whatever. Yes, if we stick with 40px, it will mostly-work in the interim, until we re-re-rediscuss, and I prove the same point I've already proven about using fixed values. In the interim, it's more important to fix the constantly, genuinely problematic issue, than to do so as scalably as some of us would prefer. PS: The supposed fact that people did not complain about a problem before doesn't mean it doesn't exist and hasn't been demonstrated. Using that logic, nothing would ever change on WP; WP would already be completed. For the record: I have complained about the 40px, so you can't say "no one complained about the 40px ever", hence forth.  — SMcCandlish ¢ ≽ʌⱷ҅ʌ≼  09:43, 8 September 2015 (UTC)

Copy-pasteability of lists

This jogged my memory that we have a another problem, in which the bullets, and the numbers of numbered lists, either are or are not copy-pastable, depending on browser. This seems like a pretty lame-ass problem, and it's been around since before WP's time. Wouldn't we want to fix this somehow? I can think of multiple approaches to this, and even did some templating to work around it a while back (deets below). I've seen approaches like this at Billiard ball, using some {{ordered list}} trickery, but it seems unnecessarily obtuse [and is anti-semantic, as pointed out below]:

Behold the belcherousness:
{{ordered list|type=none
<!--This orders them properly, but suppresses display of the list numbers, which are added manually, because most browsers do not allow the auto-generated numbers to be copy-pasted!-->
| {{0|1}}1.  Yellow
| {{0|1}}2.  Blue
| {{0|1}}3.  Red
| {{0|1}}4.  Purple (pink in ball sets for televised competitions, for improved color contrast)
| {{0|1}}5.  Orange
| {{0|1}}6.  Green
| {{0|1}}7.  Brown or maroon (tan in TV ball sets)
| {{0|1}}8.  Black
| {{0|1}}9.  Yellow and white
<!--
-->
| 10.  Blue and white
| 11.  Red and white
| 12.  Purple and white (pink and white in TV ball sets)
| 13.  Orange and white
| 14.  Green and white
| 15.  Brown, or maroon, and white (tan and white in TV ball sets)
| {{0|1}}{{lidot2}}{{Cuegloss|Cue ball|Cue ball}}, white (sometimes with one or more spots)
}}
  1. 11.  Yellow
  2. 12.  Blue
  3. 13.  Red
  4. 14.  Purple (pink in ball sets for televised competitions, for improved color contrast)
  5. 15.  Orange
  6. 16.  Green
  7. 17.  Brown or maroon (tan in TV ball sets)
  8. 18.  Black
  9. 19.  Yellow and white
  10. 10.  Blue and white
  11. 11.  Red and white
  12. 12.  Purple and white (pink and white in TV ball sets)
  13. 13.  Orange and white
  14. 14.  Green and white
  15. 15.  Brown, or maroon, and white (tan and white in TV ball sets)
  16. 1  Cue ball, white (sometimes with one or more spots)

I created a [semantic] system of templates to work around this problem (listed here), back in 2011 I think, that work with {{unbulleted list}}, and it was also unwieldy, but addressed problems that the {{ordered list}} and {{unordered list}} approaches can't on their own. Just having MW generate smarter lists is probably a better plan, and would fix a lot more things like the fact that it restarts numbering with "1." when you nest two ordered lists, which is decidedly suboptimal. So is generating piles of lists markup for things that are not lists, like <dl>...</dl> for people just trying to indent stuff, or <ol>...</ol> for inserting a bullet to highlight something. Another obvious case is being unable to have multi-line items inside *-style list items. Etc., etc.  — SMcCandlish ¢ ≽ʌⱷ҅ʌ≼  09:43, 8 September 2015 (UTC)

Please don't break the semantic web simply because Operating Systems, user agents or apps are making mistakes with this... Fix them instead. The web has this defined and working just fine, the problem is with some of the other software. By making changes like suggested you are breaking years of progress in getting away from hard coded assumptions in software, by reintroducing these assumptions. —TheDJ (talkcontribs) 17:54, 8 September 2015 (UTC)
I'm the biggest fan ever of the semantic web. That's why I think that the version in the collapse box is blecherous; it's using tricks to reset the actual, semantic numbering of list items to "0" and suppress them, then using in-text numbering. My solution is semantically sound, using unordered lists (i.e. just "lists"), and injecting order into them via another method. Not all semantic value must come from HTML+CSS markup; it's just undesirable to violate that which does, with the goal of getting some presentational result. It's not WP's job to fix the browsers and the web, it's to provide encyclopedic content that people can use properly. A numbered list that will not paste with the numbers is very frequently unusable. The proper server-side implementation appears to me to be for MW to suppress display of auto-generated default bullets and numbers (because they do not work consistently), and replace them with copy-pastable ones on the fly, that always work, while preserving the semantic value of the original order (for ordered lists). And the web is not "working just fine"; this has been a problem for decades (since the early days of "the WWW"), and no progress has been made on it. The problem comes from the misconceptualization (common to certain but only certain developer communities) that lists' numbering/bullets are not content but just meaningless presentation. This is rarely true, and when it's not, it's often "fatally" untrue, rendering the content meaningless without the numbers, as in the example above (which, yes, does need to be done differently than the code I copied out of that article).  — SMcCandlish ¢ ≽ʌⱷ҅ʌ≼  08:43, 9 September 2015 (UTC)

Getting rid of giant CJK text in Latin script

What can be done to work around the CSS alterations that are being applied in cases of, e.g., ''<span lang="ja">judogi</span>''? It's being done to make kanji, kana, han, etc., more readable, but it needs to be easily overridable for roman transliterations. This: judogi, should look like this: judogi (just like juego does, with ''<span lang="es">juego</span>''), after whatever has been done has been undone with inline style by {{Nihongo romaji}} or whatever (template is empty right now; I'm sandboxing it somewhere or other, and ran into this "Godzilla-sizing" problem). So far it seems to be a combination of font-size increase and font-weight reduction, but I'm not sure of the exact values or where they're coming from, and it seems inescapable, triggered by any presence of lang="ja", etc.

I seem to get revert-warred when I try to compensate for problems like this in inline CSS in the templates I create and maintain, without getting "permission" from someone first, and tend to get berated here (usually by the same party) when the compensating values I arrive at do not perfectly correspond to whatever is buried in some off-site file somewhere that cannot actually be found via WP:CLASS any longer. So, I ask directly for the necessary information.  — SMcCandlish ¢ ≽ʌⱷ҅ʌ≼  10:16, 8 September 2015 (UTC)

Romanized transliterations are not written in their respective languages; they are romanized. So they should not appear inside lnaguage tags. -- [[User:Edokter]] {{talk}} 11:02, 8 September 2015 (UTC)
Actually, technically, they ought be inside something with their language tag, but that language tag should be postfixed with for instance the -Latn script postfix or similar modifiers. In practice, nothing in the world supports it, so that's why such language tags are disabled in for instance {{transl}}. —TheDJ (talkcontribs) 11:33, 8 September 2015 (UTC)
I read that, and the rationale no longer seems to hold; moved details to Template talk:Transl#Revisiting -Latn  — SMcCandlish ¢ ≽ʌⱷ҅ʌ≼  10:32, 9 September 2015 (UTC)