Page MenuHomePhabricator

OOjs UI is optimized for font-size of 12.8px (0.8×16px), but sets it inconsistently for windows and toolbars only, requiring CSS counteractions
Closed, ResolvedPublic8 Story Points

Description

OOjs UI is optimized for font-size of 12.8px (0.8×16px), but sets it inconsistently for windows and toolbars only, requiring CSS counteractions.

We should remove the font-size: 0.8em rules sprinkled throughout OOUI and instead set the right font-size for windows in each skin's CSS (unless the skin already sets a sensible font-size on body, which they all should but seemingly none does). This will be a delicate endeavor that must be synchronized, but it will also remove some technical debt that keeps breaking things (right now VE inspectors in MonoBook are being displayed with incorrect, massive font size, for example).

(This is in preparation to switching the MediaWiki theme to use 0.875em font size.)

Details

Related Gerrit Patches:
VisualEditor/VisualEditor : masterUpdate OOjs UI to v0.11.0
mediawiki/extensions/VisualEditor : masterUpdate for changes in OOjs UI (Ib40e3477)
mediawiki/extensions/MobileFrontend : masterUpdate for changes in OOjs UI (Ib40e3477)
mediawiki/extensions/Flow : masterUpdate for changes in OOjs UI (Ib40e3477)
mediawiki/core : masterUpdate OOjs UI to v0.11.0
mediawiki/vendor : masterUpdate OOjs UI to v0.11.0
mediawiki/core : masterUpdate OOjs UI to v0.11.0
oojs/ui : master[BREAKING CHANGE] Do not set font-size: 0.8em anywhere in the library
mediawiki/extensions/MobileFrontend : masterUpdate for changes in OOjs UI (Ib40e3477)

Related Objects

Event Timeline

matmarex created this task.Feb 28 2015, 3:10 AM
matmarex claimed this task.
matmarex raised the priority of this task from to High.
matmarex updated the task description. (Show Details)
matmarex added projects: OOUI, Vector.
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptFeb 28 2015, 3:10 AM

Adding some more projects that will be affected.

Restricted Application added a project: VisualEditor. · View Herald TranscriptFeb 28 2015, 3:11 AM
GOIII added a subscriber: GOIII.Feb 28 2015, 9:11 AM

OOjs UI uses font-size of 12.8px (0.8×16px) for windows and toolbars, but Vector skin uses 14px (0.875×16px) for body content, creating inconsistency between widgets in windows/toolbars and "free-standing" ones.

More often than not, the bigger issue when it comes to this nuance is the lack of an appropriate, accompanying line-height setting for every font-size deviation made in the document structure's body away from the outset default(s). The possible pitfall for overlooking this is explained nicely HERE

but Vector skin uses 14px (0.875×16px) for body content,

That should be true but I'm not sure every browser actually recognizes anything past 2 decimal points -- making font-size:0.87em (which is also the .css value we are set to in Vector) which means 13.93px (0.87×16px) is what we we're really dealing with instead of 14px.

(unless the skin already sets a sensible font-size on body, which they all should but seemingly none does)

Ahhh, the true issue behind the quandary in the previous two points. Why wiki-whoever went with the current font-size, line-height scheme in place is puzzling to me too. More on that is explained HERE

In T91152#1075492, @GOIII wrote:font

More often than not, the bigger issue when it comes to this nuance is the lack of an appropriate, accompanying line-height setting for every font-size deviation made in the document structure's body away from the outset default(s). The possible pitfall for overlooking this is explained nicely HERE

That is true, but also not at all the issue I am trying to solve here. It has its own bug, T4013. The situation here is that OOjs UI widgets' sizes are defined using em units, which are affected by the font-size set on ancestor elements. line-height has nothing to do with it (and OOjs UI widgets consistently set their own line-height, too).

but Vector skin uses 14px (0.875×16px) for body content,

That should be true but I'm not sure every browser actually recognizes anything past 2 decimal points -- making font-size:0.87em (which is also the .css value we are set to in Vector) which means 13.93px (0.87×16px) is what we we're really dealing with instead of 14px.

True. The actual size doesn't matter much in this case, what matters is that it is different in different places. OOjs UI's windows' font-size is also not exactly 12.8px, but apparently 12.8000001907349px (on my machine at least), which is probably just floating point rounding error, and which matters just as little for the issue at hand.

(unless the skin already sets a sensible font-size on body, which they all should but seemingly none does)

Ahhh, the true issue behind the quandary in the previous two points. Why wiki-whoever went with the current font-size, line-height scheme in place is puzzling to me too. More on that is explained HERE

That is also not what I meant at all. What I meant is that, for example, Vector sets font-size: 0.875em on .mw-body-content and not body, which means that elements inserted directly into the <body> node have different font size than the ones inserted into body content. MonoBook is even worse, setting font-size: x-small on body and then font-size: 127% on #globalWrapper, which means that the affected elements are tiny and unreadable rather than just oversized.

(unless the skin already sets a sensible font-size on body, which they all should but seemingly none does)

Ahhh, the true issue behind the quandary in the previous two points. Why wiki-whoever went with the current font-size, line-height scheme in place is puzzling to me too. More on that is explained HERE

That is also not what I meant at all. What I meant is that, for example, Vector sets font-size: 0.875em on .mw-body-content and not body, which means that elements inserted directly into the <body> node have different font size than the ones inserted into body content. MonoBook is even worse, setting font-size: x-small on body and then font-size: 127% on #globalWrapper, which means that the affected elements are tiny and unreadable rather than just oversized.

I totally follow what you are explaining there but -- at least in my travels -- it would not matter if the BODY element was "set" as you correctly state & in spite of those subsequent elements computing a value based on .mw-body-content, its the 100% font-size for the HTML element (class= client-js ? client-nojs ?) that truly screws things up "down document" as computed values using percentages seems to be the worst of the worst when it comes to this

/*@media screen*/
html {
    font-size: 100%;
}

Since HTML precedes BODY structure wise, I've always assumed 100% is what BODY "inherits" when left to its own devices.

Or is that 100% just an "IE" thing maybe?

GOIII added a comment.Mar 1 2015, 4:16 AM

True. The actual size doesn't matter much in this case, what matters is that it is different in different places. OOjs UI's windows' font-size is also not exactly 12.8px, but apparently 12.8000001907349px (on my machine at least), which is probably just floating point rounding error, and which matters just as little for the issue at hand.

As long as we touched upon it as an aside & in case anybody follows this stuff, to "get" exactly 12.8px for a font-size (using a fairly recent browser version release).....

12.8px font-size
element of your choice {
	font-size: calc(1rem - 3.20px);
}

...and for a 14.0px font-size.....

14.0px font-size
element of your choice {
	font-size: calc(1rem - 2px);
}

...making the optimal Vector default (at least in my book)...

ideal Vector default
.mw-body-content {
	font-size: calc(1rem - 2px);
	line-height: 1.5;
}

That works out to a ~21px line-height & a ~14px font size depending on the font-family in question, etc. etc.

Jdforrester-WMF lowered the priority of this task from High to Medium.Mar 3 2015, 5:54 PM
Jdforrester-WMF moved this task from Backlog to Next-up on the OOUI board.

Change 206101 had a related patch set uploaded (by Bartosz Dziewoński):
[BREAKING CHANGE] Do not set font-size: 0.8em anywhere in the library

https://gerrit.wikimedia.org/r/206101

Change 206102 had a related patch set uploaded (by Bartosz Dziewoński):
Update for changes in OOjs UI (Ib40e3477)

https://gerrit.wikimedia.org/r/206102

Change 206103 had a related patch set uploaded (by Bartosz Dziewoński):
Update for changes in OOjs UI (Ib40e3477)

https://gerrit.wikimedia.org/r/206103

Change 206104 had a related patch set uploaded (by Bartosz Dziewoński):
Update for changes in OOjs UI (Ib40e3477)

https://gerrit.wikimedia.org/r/206104

These four patches implement the cleanup part of this, removing the random 0.8ems and making it actually possible to choose a font-size when using the library. Two are fixups in VisualEditor repos, where we had some really painful things to work around the previous situations. One is a hack in MediaWiki core to ensure that skins get OOjs UI dialogs with a sane font size.

The part where we make OOjs UI on Vector use 0.875em rather than 0.8em will follow when I get over the PTSD that the changes above induced, and that will no doubt be induced further when the regression bug reports start rolling in. I'll also make the rest of built-in skins sane and remove the MediaWiki core hack I just introduced.

(Note that the breaking change only affects users of OOjs UI that use its windows or toolbars functionality. The core hack should prevent problems with on-wiki gadgets using windows, as long as they were using the recommended boilerplate code.)

Change 206305 had a related patch set uploaded (by Bartosz Dziewoński):
Update for changes in OOjs UI (Ib40e3477)

https://gerrit.wikimedia.org/r/206305

Change 206313 had a related patch set uploaded (by Bartosz Dziewoński):
Update for changes in OOjs UI (Ib40e3477)

https://gerrit.wikimedia.org/r/206313

Change 206313 merged by jenkins-bot:
Update for changes in OOjs UI (Ib40e3477)

https://gerrit.wikimedia.org/r/206313

Change 206730 had a related patch set uploaded (by Bartosz Dziewoński):
Update for changes in OOjs UI (Ib40e3477)

https://gerrit.wikimedia.org/r/206730

Change 206101 merged by jenkins-bot:
[BREAKING CHANGE] Do not set font-size: 0.8em anywhere in the library

https://gerrit.wikimedia.org/r/206101

Change 207702 had a related patch set uploaded (by Jforrester):
Update OOjs UI to v0.11.0

https://gerrit.wikimedia.org/r/207702

Change 207702 abandoned by Jforrester:
Update OOjs UI to v0.11.0

Reason:
Bah.

https://gerrit.wikimedia.org/r/207702

Change 207704 had a related patch set uploaded (by Jforrester):
Update OOjs UI to v0.11.0

https://gerrit.wikimedia.org/r/207704

Change 207704 merged by Catrope:
Update OOjs UI to v0.11.0

https://gerrit.wikimedia.org/r/207704

Change 206102 merged by jenkins-bot:
Update OOjs UI to v0.11.0

https://gerrit.wikimedia.org/r/206102

Change 206104 merged by jenkins-bot:
Update OOjs UI to v0.11.0

https://gerrit.wikimedia.org/r/206104

Change 206103 merged by jenkins-bot:
Update for changes in OOjs UI (Ib40e3477)

https://gerrit.wikimedia.org/r/206103

Change 206305 merged by jenkins-bot:
Update for changes in OOjs UI (Ib40e3477)

https://gerrit.wikimedia.org/r/206305

Change 206730 merged by jenkins-bot:
Update for changes in OOjs UI (Ib40e3477)

https://gerrit.wikimedia.org/r/206730

matmarex renamed this task from OOjs UI uses font-size of 12.8px (0.8×16px) for windows and toolbars, but Vector skin uses 14px (0.875×16px) for body content, creating inconsistency between widgets in windows/toolbars and "free-standing" ones to OOjs UI is optimized for font-size of 12.8px (0.8×16px), but sets it inconsistently for windows and toolbars only, requiring CSS counteractions.Apr 30 2015, 7:29 AM
matmarex updated the task description. (Show Details)
Restricted Application added a project: Collaboration-Team-Triage. · View Herald TranscriptApr 30 2015, 7:29 AM
Jdforrester-WMF moved this task from Next-up to Reviewing on the OOUI board.May 31 2015, 11:02 PM
Restricted Application edited projects, added User-Ryasmeen; removed OOUI (OOjs-UI-0.11.0). · View Herald TranscriptMar 7 2018, 1:35 AM