Page MenuHomePhabricator
Create Task
Maniphest T91152

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 Estimated Story Points
Actions

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

SubjectRepoBranchLines +/-
Update OOjs UI to v0.11.0VisualEditor/VisualEditormaster+2 K -1 K
Update for changes in OOjs UI (Ib40e3477)mediawiki/extensions/VisualEditormaster+35 -23
Update for changes in OOjs UI (Ib40e3477)mediawiki/extensions/MobileFrontendmaster+1 -0
Update for changes in OOjs UI (Ib40e3477)mediawiki/extensions/Flowmaster+4 -4
Update OOjs UI to v0.11.0mediawiki/coremaster+482 -73
Update OOjs UI to v0.11.0mediawiki/vendormaster+336 -11 K
Update OOjs UI to v0.11.0mediawiki/coremaster+482 -73
[BREAKING CHANGE] Do not set font-size: 0.8em anywhere in the libraryoojs/uimaster+94 -121
Update for changes in OOjs UI (Ib40e3477)mediawiki/extensions/MobileFrontendmaster+1 -0
Customize query in gerrit

Related Objects
Search...

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 (legacy skin).
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptFeb 28 2015, 3:10 AM
matmarex added projects: VisualEditor-MediaWiki, Apex, MonoBook.Feb 28 2015, 3:11 AM

Adding some more projects that will be affected.

Restricted Application added a project: VisualEditor. · View Herald TranscriptFeb 28 2015, 3:11 AM
GOIII subscribed.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

matmarex added a comment.Feb 28 2015, 6:23 PM
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.

GOIII added a comment.Feb 28 2015, 10:53 PM
In T91152#1075860, @matmarex wrote:
In T91152#1075492, @GOIII wrote:

(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 moved this task from To Triage to TR6: Visual diffs on the VisualEditor board.Mar 2 2015, 12:45 AM
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.
matmarex mentioned this in T86865: Convert Special:MovePage to OOUI-based form.Mar 28 2015, 1:13 AM
matmarex mentioned this in rEVED4bfc19349a8d: Correct font sizes of everything on MonoBook.Mar 30 2015, 9:25 PM
matmarex mentioned this in T96273: Remove OOUI icon packs from MW 1.25 release.Apr 16 2015, 5:17 PM
matmarex raised the priority of this task from Medium to High.Apr 22 2015, 8:31 PM
matmarex mentioned this in T96628: [Regression pre-wmf3] Inspectors inside Media Settings>caption and Basic reference dialog are appearing too big.
gerritbot subscribed.Apr 23 2015, 12:15 PM

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

gerritbot added a project: Patch-For-Review.Apr 23 2015, 12:15 PM

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

gerritbot added a comment.Apr 23 2015, 12:15 PM

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

gerritbot added a comment.Apr 23 2015, 12:15 PM

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

matmarex added a comment.Apr 23 2015, 12:24 PM

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

gerritbot added a comment.Apr 23 2015, 10:22 PM

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

gerritbot added a comment.Apr 23 2015, 10:45 PM

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

gerritbot added a comment.Apr 23 2015, 11:35 PM

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

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

matmarex mentioned this in rMEXTc402faa6c21d: Updated mediawiki/extensions Project: mediawiki/extensions/MobileFrontend….Apr 23 2015, 11:36 PM
matmarex mentioned this in rEMFR32b589926ea9: Update for changes in OOjs UI (Ib40e3477).
gerritbot added a comment.Apr 26 2015, 10:36 PM

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

matmarex added a parent task: T96628: [Regression pre-wmf3] Inspectors inside Media Settings>caption and Basic reference dialog are appearing too big.Apr 29 2015, 9:37 AM
gerritbot added a comment.Apr 30 2015, 1:06 AM

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

matmarex mentioned this in rGOJUe425711e75c2: [BREAKING CHANGE] Do not set font-size: 0.8em anywhere in the library.Apr 30 2015, 1:06 AM
gerritbot added a comment.Apr 30 2015, 1:50 AM

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

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

gerritbot added a comment.Apr 30 2015, 1:52 AM

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

Reason:
Bah.

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

gerritbot added a comment.Apr 30 2015, 1:52 AM

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

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

gerritbot added a comment.Apr 30 2015, 1:58 AM

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

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

Catrope mentioned this in rMWVDadbaad59ccef: Update OOjs UI to v0.11.0.Apr 30 2015, 1:59 AM
gerritbot added a comment.Apr 30 2015, 2:00 AM

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

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

Jdforrester-WMF mentioned this in rGVED3fd7629c2e2e: Update OOjs UI to v0.11.0.Apr 30 2015, 2:00 AM
gerritbot added a comment.Apr 30 2015, 2:19 AM

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

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

gerritbot added a comment.Apr 30 2015, 2:19 AM

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

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

gerritbot added a comment.Apr 30 2015, 2:19 AM

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

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

gerritbot added a comment.Apr 30 2015, 2:19 AM

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

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

Jdforrester-WMF mentioned this in rMW5d62627a21e7: Update OOjs UI to v0.11.0.Apr 30 2015, 2:19 AM
Diffusion mentioned this in rMEXT0f97d19570d5: Updated mediawiki/extensions Project: mediawiki/extensions/Flow….Apr 30 2015, 2:20 AM
Diffusion mentioned this in rMEXT335e93929cc6: Updated mediawiki/extensions Project: mediawiki/extensions/MobileFrontend….
matmarex mentioned this in rEVED89b79bb373fa: Update for changes in OOjs UI (Ib40e3477).Apr 30 2015, 2:20 AM
matmarex mentioned this in rEMFRc4bde4fa2d9f: Update for changes in OOjs UI (Ib40e3477).
matmarex mentioned this in rEFLWe79e5c3c2492: Update for changes in OOjs UI (Ib40e3477).
Jdforrester-WMF closed this task as Resolved.Apr 30 2015, 2:21 AM
Jdforrester-WMF edited projects, added OOjs-UI-next-release, WMF-deploy-2015-05-06_(1.26wmf5), VisualEditor 2014/15 Q4 blockers; removed Patch-For-Review.
Jdforrester-WMF set Security to None.
Jdforrester-WMF edited a custom field.
Jdforrester-WMF moved this task from Nominated to Done on the VisualEditor 2014/15 Q4 blockers board.
Jdforrester-WMF edited projects, added OOUI (OOjs-UI-0.11.0); removed OOjs-UI-next-release.
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 mentioned this in T97631: Change OOUI WikimediaUI theme to be optimized for font-size of 14px (0.875em×16px), instead of 12.8px (0.8em×16px), like MediaWiki's Vector skin.
matmarex updated the task description. (Show Details)
matmarex edited projects, added StructuredDiscussions, Web-Team-Backlog; removed MonoBook, Apex, Vector (legacy skin).
Restricted Application added a project: Collaboration-Team-Triage. · View Herald TranscriptApr 30 2015, 7:29 AM
matmarex added a parent task: T97631: Change OOUI WikimediaUI theme to be optimized for font-size of 14px (0.875em×16px), instead of 12.8px (0.8em×16px), like MediaWiki's Vector skin.Apr 30 2015, 7:30 AM
• DannyH moved this task from Untriaged to Resolved on the Collaboration-Team-Triage board.Apr 30 2015, 5:38 PM
matmarex mentioned this in T97690: [Regression pre-wmf5] Article font a lot smaller while loading VisualEditor.Apr 30 2015, 7:41 PM
matmarex removed a parent task: T86865: Convert Special:MovePage to OOUI-based form.Apr 30 2015, 8:21 PM
Jdforrester-WMF moved this task from TR6: Visual diffs to FY 18-19 Q3/Q4 on the VisualEditor board.May 6 2015, 12:58 AM
Jdforrester-WMF moved this task from Next-up to Reviewing on the OOUI board.May 31 2015, 11:02 PM
matmarex mentioned this in T101538: Page title should not shrink when opening editor.Jun 6 2015, 10:59 AM
• Phabricator_maintenance moved this task from Incoming to 2014-15 Q4 on the Web-Team-Backlog board.Mar 7 2018, 1:35 AM
Restricted Application edited projects, added User-Ryasmeen; removed OOUI (OOjs-UI-0.11.0). · View Herald TranscriptMar 7 2018, 1:35 AM
Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL