Page MenuHomePhabricator

Logos should scale with font-size
Closed, DuplicatePublic

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)
    • IMG_0018.PNG (2×1 px, 176 KB)
  • 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"
    • Chrome.png (1×4 px, 1 MB)
  • 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".
    • safari.png (2×2 px, 459 KB)
  • 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".
    • firefox.png (1×3 px, 454 KB)
  • The mobile site's logo should scale with different font sizes.

Event Timeline

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
Jdlrobson lowered the priority of this task from Medium to Low.Oct 30 2018, 9:42 PM
Jdlrobson added subscribers: ovasileva, Jdlrobson.

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

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

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

IMG_0030.PNG (2×1 px, 208 KB)

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.Fri, Sep 3, 10:22 PM
Jdlrobson updated the task description. (Show Details)

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

Change 719308 merged by jenkins-bot:

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

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

Change 717493 merged by jenkins-bot:

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

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