Template talk:Var

A hint of kerning

Moved to Mediawiki talk:Common.css § Compensate for italic lean

I added a tiny bit of padding-right to kern the text to compensate for the slant of the italic face and keep it from overlapping the next character in Chrome, Chromium, and a few other browsers, without overcompensating and causing problems in others. I've tested it on Mac OS X 10.10, several Win machines and VMs (Vista, Win7, Win8.1), CentOS (with and without addition of fonts almost everyone installs and uses, given the terrible quality of the stock ones), Ubuntu, Android, iOS, and OpenBSD; and in multiiple browsers (all the commonly used ones, like Firefox, IE, Chrome, Chromium, Opera, Safari, Konqueror (which is not affected in any way, as its CSS support isn't so great - not sure notices any such padding declaration on inline elements at all), even Samsung Internet. I tried an even smaller hint to margin-left kerning, and it had to be taken down to 0.1em before it stopped having a negative consequence on one oddball browser or another (the iOS version of Safari, and the OpenBSD version of Firefox, as I recall), so I just removed it, since at that size it wasn't having a noticeable positive effect on the browsers for which it might have slightly helped.  — SMcCandlish ☺ ☏ ¢ ≽^ʌⱷ҅_ᴥⱷ^ʌ≼  05:37, 19 July 2015 (UTC)

This is in its core a font problem. It also depends on used font-size and what not. We should not try to micro-manage how user-agents render fonts. If this is a common problem, then we have to asume all italic text is affected, and a common solution is needed (one that does not involve injecting inle CSS in every template that uses italics). -- [[User:Edokter]] {{talk}} 08:11, 19 July 2015 (UTC)

This does not affect how user agents "render fonts". That idea isn't even cogent; nothing about this code involves CSS font directives in any way. This is about slightly compensating for the fact that italic text (in all fonts, used by all GUI browsers, on all OSes) leans toward the right (the code in question is irrelevant in all non-GUI user agents). It is not "micromanagement", it's problem-solving. This lean in some cases, even using the browser-default fonts (as most non-"power users" do), has legibility/parseability problems, especially in source code (the #1 use of {{var}}). The only way to fix this is to introduce a tiny hint of non-semantic visual spacing between {{var}} and what follows it. I've tested this cross-platform and cross-browser. But you're objecting on a "what if" basis. Even if some use of some font in some browser on some OS produced sub-optimal output with this CSS adjustment in place, there's no way that it can be worse than the running-together problem (in which the characters in Cc become virtually indistinguishable from Oc, for example).

If you think it should be done in site-wide CSS then you add it to common.css. Your post here is an obvious catch-22: You oppose doing this in the template, and suggest that it should be done site-wide, but you will also oppose doing it site-wide. For years you have programmatically resisted the use of CSS to compensate for problems in default rendering, whether in templates or in MediaWiki:Common.css. As far as I can recall, every single time I've sought to add anything to common.css, you've filibustered it on the grounds that everything should be left to user-agent defaults (so often that I basically I just don't go to common.css any more). And you've revert-warred me on other templates as you've been doing here. Your personal design philosophy that the user agent is always right is not a view shared by everyone.

There is no actual need to do it site-wide to all italic text (which we couldn't do anyway except with site-wide Javascript; there's no other way for us to auto-add padding to all use of font-style:italic;). The "injecting inline CSS in every template that uses italics" concern is a red herring; no one proposed doing any such thing. This slight display problem does not really affect italicization in running prose, where the reader is scanning and parsing rapidly, recognizing words in entire blocks, a process that is very tolerant of character-level issues. Ths mangld sntence ilustrtes ths clrly. It's only a problem in source code, math, and other cases where character-level, exacting precision actually matters. That's {{Var}}. It's also <var>, technically, but not many WP editors use that here. The ideal solution would be adding this padding-right to var in common.css. So feel free to do that, then remove it from this template, where it is resolving an actual reader-facing problem, without doing any violence to odd user-side setups (and serving as a proof-of-concept for wider application).  — SMcCandlish ☺ ☏ ¢ ≽^ʌⱷ҅_ᴥⱷ^ʌ≼  17:01, 19 July 2015 (UTC)

It is a font-rendering problem; it demonstrates that inter-font kerning has not been taken care of. Some typefaces do, some don't. Here's why the 0.07em does not work: Most user-agents will render coordinated elements on a pixel grid, meaning the 0.07 will be rounded to the nearest pixel. That means eihter 0 or 1 px. There are very little user agents that do not round. Linux perhaps and DirectWrite I know of. All other will round. If overlap is the problem, you never want 0, because that means no net effect. On the other hand, at larger font sizes, the problem and counter-effect become inverse negligable instead of scaling with the size.

I do oppose messing with the browser's way of handling standard text in general, but I do recognize there are some cases where this might fail. If that is the case, my filosophy is to fix it right the first time. So in this case, I am open to a fix in Common.css, using the 1px right padding. -- [[User:Edokter]] {{talk}} 18:30, 19 July 2015 (UTC)

We were just talking past each other on "font rendering". Yes, I understand that it has to do with how fonts render italics. But we can't do anything about that, ultimately. What we can do is prevent crappy fonts from being able to mash right-slanted text into non-italic text that follows it (within the realms of fonts any sane person would use among their default reading fonts in a browser). We don't have to be able to address anything about font rendering directly, only observe the basic facts that italic slants right, and thus the spacing at the top is narrower when italics are followed immediately be non-italics, so move it by a hair. As for rounding, 0.07 should round to 0.1, at any practical font size. If we're scaled to the point where 0.1 itself will legitimately round to 0px in rendered output, I'm skeptical we could care; this is not where anyone reads text. Even changing 0.07 to 0.06 or 0.08 has a detectable effect, even at pretty small-scaled text. The circumstance you seem most concerned with doesn't appear to be one that arises for wikitext.

Anyway, I'm drafting a proposal to implement this at common.css; please don't revert the changes to {{Var}} again in the interim. It serves most of our code-readability needs right now being in this template, and the live template is a good distinction between something I'm testing in sandbox. The test cases page can contrast the px version the em version and no kerning all at once, while I can also test the margin-zeroing an external site recommended, by changing the sandbox but not the template (if it makes a difference, it'll be visible regardless of the extant different between the template and the sandbox template).  — SMcCandlish ☺ ☏ ¢ ≽^ʌⱷ҅_ᴥⱷ^ʌ≼  19:58, 19 July 2015 (UTC)

Update: I've tested also adding margin-left:0;margin-right:0; in case any browsers are adding some margin on the fly in an attempt to compensate by themselves. It makes no difference in any test I've done in my collection of VMs.  — SMcCandlish ☺ ☏ ¢ ≽^ʌⱷ҅_ᴥⱷ^ʌ≼  20:15, 19 July 2015 (UTC)