Maniphest T207789

Logos should scale with font-size
Closed, DuplicatePublic
Actions

Assigned To

Authored By

	• nray
	Oct 23 2018, 8:05 PM

Description

The logo of Minerva (and Vector) does not scale with font-size. It's proposed we add an inline style that sets width and height in relative units in addition to the width and height attributes.

QA steps / Acceptance criteria

On iOS 9+ devices, header / header-holder issues can be observed by going to "Settings" > "General" > "Accessibility" > "Larger Text" > Toggling on "Larger Accessibility Sizes" > Sliding the slider at the bottom all the way to the right (the biggest font size) and open up the page in a Safari (other browsers should have similar issues)
Our site varies in its level of support for Android browser text sizing ranging from no support (Chrome) to full support (e.g. Firefox). Additionally, I could not find an Android browser that would let me increase the font size to a level that was large enough to cause issues (as in iOS).
On latest versions of Chrome desktop browser, our site actually looks pretty good at the largest font-size setting of "Very large"
On latest versions of Safari desktop browser, header issues can be observed by going to "Safari" > "Preferences" > "Advanced" > Check "Never use font sizes smaller than" and put a large font size like "55".
On latest versions of Firefox desktop browser, header issues can be observed by going to "Preferences" > "Default Font Size" > Select large font size like "56".

The mobile site's logo should scale with different font sizes.

Details

	Subject	Repo	Branch	Lines +/-
	Logo scales with font size	mediawiki/skins/MinervaNeue	master	+2 -1
	Logos defined with pixels should be scaleable in browsers	mediawiki/core	master	+49 -7

Customize query in gerrit

Related Objects
Search...

		Status	Subtype	Assigned	Task
		Resolved		Jdlrobson	T287097 [GOAL] Accessibility compliance focus (new development & fixes)
		Duplicate		Jdlrobson	T207789 Logos should scale with font-size

Event Timeline

• nray created this task.Oct 23 2018, 8:05 PM

Restricted Application changed the subtype of this task from "Deadline" to "Task". · View Herald TranscriptOct 23 2018, 8:05 PM

Restricted Application added a subscriber: Aklapper. · View Herald Transcript

• nray renamed this task from [Bug] Fix header & page action design elements from breaking at large default font sizes to [Bug] Fix <header> & #heading-holder design elements from breaking at large default font sizes.Oct 23 2018, 8:05 PM

• nray mentioned this in T204807: Minerva should respect the system font-size settings on iOS.Oct 23 2018, 9:00 PM

• nray mentioned this in T207038: [Spike] Wikipedia logo and navigation link elements should scale accordingly with font-size increases.Oct 23 2018, 9:07 PM

Jdlrobson moved this task from Incoming to Needs Prioritization on the Web-Team-Backlog board.Oct 24 2018, 9:56 PM

@ovasileva please let me know if this is a higher priority then this.

Jdlrobson moved this task from Needs Prioritization to Triaged but Future on the Web-Team-Backlog board.Oct 29 2019, 4:58 PM

Jdlrobson edited projects, added Web-Team-Backlog (Design); removed Web-Team-Backlog.Jan 17 2020, 11:25 PM

Jdlrobson moved this task from Backlog to Blocked on the MinervaNeue board.

Jdlrobson edited projects, added Web-Team-Backlog (Tracking); removed Web-Team-Backlog (Design).Jun 17 2021, 9:49 PM

Jdlrobson added a parent task: T287097: [GOAL] Accessibility compliance focus (new development & fixes).Jul 26 2021, 8:41 PM

Jdlrobson edited projects, added Web-Team-Backlog (Needs Prioritization (Tech)); removed Web-Team-Backlog (Tracking).Aug 24 2021, 9:07 PM

Jdlrobson moved this task from Backlog to Accessibility on the Web-Team-Backlog (Needs Prioritization (Tech)) board.Aug 24 2021, 9:12 PM

Might be fixed by T207038. This is the last task of the accessibility focused goal.

Jdlrobson claimed this task.Aug 30 2021, 5:47 PM

What problem are we actually trying to solve here? The blue bar is not part of our codebase, it was a CentralNotice banner we used to test with, so that seems out of scope here.

I checked out the latest in Safari and it doesn't look too bad,

Screen Shot 2021-09-03 at 9.11.09 AM.png (1×2 px, 170 KB)

especially when you compare it to other sites e.g. Google

Screen Shot 2021-09-03 at 9.08.29 AM.png (744×2 px, 245 KB)

Using font-size 30px I get a clearer idea of what's happening:

Screen Shot 2021-09-03 at 9.13.39 AM.png (1×2 px, 323 KB)

Screen Shot 2021-09-03 at 9.13.57 AM.png (1×2 px, 289 KB)

Everything here is at least 30px as expected and the header appears usable to me.
The only thing that doesn't seem to scale is the logo.

If we want the logo to scale, we need to define its width and height in rem, via CSS
F34631055}

@nray would it make sense to repurpose this task as making the logo scale?

Change 717493 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/skins/MinervaNeue@master] Logo scales with font size

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

gerritbot added a project: Patch-For-Review.Sep 3 2021, 4:33 PM

@nray would it make sense to repurpose this task as making the logo scale?

@Jdlrobson I checked firefox, chrome, and safari and I agree with you - things look pretty good at large font sizes (and much better than the images I posted years ago) except for the logo (which doesn't scale). I also checked iOS safari with dynamic type set to large and things look a little worse (toolbar icons are not scaling for some reason, see below), but I'm I'm fine repurposing this task to be about the logo.

Jdlrobson renamed this task from [Bug] Fix <header> & #heading-holder design elements from breaking at large default font sizes to Logos should scale with font-size.Sep 3 2021, 10:22 PM

Jdlrobson updated the task description. (Show Details)

Restricted Application added a subscriber: Masumrezarock100. · View Herald TranscriptSep 3 2021, 10:22 PM

Change 719308 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/core@master] Logos defined with pixels should be scaleable in browsers

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

Jdlrobson closed this task as a duplicate of T207038: [Spike] Wikipedia logo and navigation link elements should scale accordingly with font-size increases.Sep 8 2021, 4:28 PM

Change 719308 merged by jenkins-bot:

[mediawiki/core@master] Logos defined with pixels should be scaleable in browsers

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

ReleaseTaggerBot added a project: MW-1.37-notes (1.37.0-wmf.23; 2021-09-13).Sep 8 2021, 8:00 PM

Change 717493 merged by jenkins-bot: