Maniphest T207038

[Spike] Wikipedia logo and navigation link elements should scale accordingly with font-size increases
Closed, ResolvedPublic3 Estimated Story PointsSpike
Actions

Assigned To

Authored By

	• alexhollender_WMF
	Oct 15 2018, 2:29 PM

Description

This was discovered here: T204807#4652971

Description

iOS has a setting that allows you to increase the font-size on your phone. The Wikipedia mobile site is responsive to that setting (i.e. the font gets bigger), however there are some non-text elements that don't scale accordingly.

Wikipedia logo	nav icons

These two elements were noticed because they are quite prominent, however it might be worth going through the website more extensively looking for other elements that don't scale.

Environments

iOS / Safari & Chrome browsers

Questions to answer

Is this bug still reproducable
Is there anything we can do here?
If so, how much work is involved?

QA Results - Prod

AC	Status	Details
1	✅	T207038#7361971

Details

	Subject	Repo	Branch	Lines +/-
	resourceloader: Resolve SkinModule wordmark/tagline tech debt	mediawiki/core	master	+4 -11
	Logos defined with pixels should be scaleable in browsers	mediawiki/core	master	+55 -7

Customize query in gerrit

Related Objects
Search...

		Status	Subtype	Assigned	Task
		Resolved		Jdlrobson	T287097 [GOAL] Accessibility compliance focus (new development & fixes)
		Resolved	Spike	Jdlrobson	T207038 [Spike] Wikipedia logo and navigation link elements should scale accordingly with font-size increases

Event Timeline

• alexhollender_WMF created this task.Oct 15 2018, 2:29 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptOct 15 2018, 2:29 PM

ovasileva triaged this task as Medium priority.Oct 15 2018, 11:14 PM

ovasileva moved this task from Incoming to Needs Prioritization on the Web-Team-Backlog board.

Jdrewniak mentioned this in T207104: Reconsider `em` values in CSS with current state browsers.Oct 16 2018, 1:02 PM

Jdlrobson added a subscriber: Volker_E.Oct 16 2018, 9:51 PM

@Jdrewniak do you have any idea why these icons are not scaling? I don't know enough about how this iOS font handler works.

Side note, when I visit the settings page on iOS, changing font sizes seems to have no impact. Is this just me

• nray mentioned this in T207789: Logos should scale with font-size.Oct 23 2018, 8:05 PM

In T207038#4672412, @Jdlrobson wrote:

@Jdrewniak do you have any idea why these icons are not scaling? I don't know enough about how this iOS font handler works.

Side note, when I visit the settings page on iOS, changing font sizes seems to have no impact. Is this just me

@Jdlrobson are you testing with iOS 9+? The dynamic type feature we enabled in T207789 will only take effect in iOS 9+ browsers...

• alexhollender_WMF mentioned this in T204807: Minerva should respect the system font-size settings on iOS.Oct 24 2018, 4:52 PM

@ovasileva also let me know if the priority here needs bumping. A spike would be the obvious next step for the font issue problems.

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

Jdlrobson added a project: Accessibility.Jul 26 2021, 8:39 PM

Jdlrobson added a parent task: T287097: [GOAL] Accessibility compliance focus (new development & fixes).

Jdlrobson moved this task from Triaged but Future to unsed on the Web-Team-Backlog board.Jul 26 2021, 8:56 PM

Jdlrobson renamed this task from [Bug] All UI elements should scale accordingly with font-size increases to [Bug] Mobile UI elements should scale accordingly with font-size increases.Aug 2 2021, 7:56 PM

Jdlrobson renamed this task from [Bug] Mobile UI elements should scale accordingly with font-size increases to [Bug] Wikipedia logo and navigation link elements should scale accordingly with font-size increases.

Jdlrobson moved this task from unsed to Needs Prioritization (Tech) on the Web-Team-Backlog board.Aug 10 2021, 8:50 PM

Jdlrobson edited projects, added Web-Team-Backlog (Needs Prioritization (Tech)); removed Web-Team-Backlog.

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

Jdlrobson renamed this task from [Bug] Wikipedia logo and navigation link elements should scale accordingly with font-size increases to [Spike] Wikipedia logo and navigation link elements should scale accordingly with font-size increases.Aug 23 2021, 5:02 PM

Jdlrobson edited projects, added Web-Team-Backlog (Kanbanana-FY-2021-22); removed Web-Team-Backlog (Needs Prioritization (Tech)).

Jdlrobson added a project: Spike.

Jdlrobson updated the task description. (Show Details)

Restricted Application changed the subtype of this task from "Task" to "Spike". · View Herald TranscriptAug 23 2021, 5:02 PM

Jdlrobson moved this task from Needs Analysis to Upcoming on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.Aug 23 2021, 5:23 PM

Jdlrobson updated the task description. (Show Details)Aug 23 2021, 5:27 PM

LGoto set the point value for this task to 3.Aug 23 2021, 5:29 PM

LGoto moved this task from Upcoming to Ready for Development on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.

The solution should be technically quite simple and doesn't only affect iOS.
The logo is currently carrying width and height attributes, whose values are limited to pixel:
<img src="/static/images/mobile/copyright/wikipedia-wordmark-en.svg" width="119" height="18"">

Try by setting your font-size to anything different than default ('Medium') in browser settings, here in Google Chrome:

Overriding those either with inline styles or a CSS selector to carry relative unit like rem should result in resized logos on all platforms according to user preferences.

I think the logo is the only thing that needs fixing here. See T207789 for how we could do that

Nav elements scale well. Both icons and text are using relative units.

Screen Shot 2021-09-03 at 9.19.06 AM.png (700×2 px, 141 KB)

LGoto assigned this task to • nray.Sep 7 2021, 5:31 PM

Jdlrobson merged a task: T207789: Logos should scale with font-size.Sep 8 2021, 4:28 PM

Jdlrobson added a subscriber: Masumrezarock100.

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

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

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

gerritbot added a project: Patch-For-Review.Sep 8 2021, 6:44 PM

Jdlrobson reassigned this task from • nray to Edtadros.Sep 8 2021, 7:31 PM

Jdlrobson moved this task from Code Review to QA on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.

Change 719501 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/719501

Jdlrobson removed Edtadros as the assignee of this task.Sep 8 2021, 9:08 PM

Jdlrobson moved this task from QA to Code Review on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.

Jdlrobson added a subscriber: Edtadros.

Change 719501 merged by jenkins-bot:

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

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

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

Jdlrobson assigned this task to Edtadros.Sep 8 2021, 10:24 PM

Jdlrobson moved this task from Code Review to QA on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.

@Jdlrobson I'm not sure what the acceptance criteria are, so here are my findings:

Smallest

Largest

Largest using Accessibility

Moving to QA in Prod. Per standup, I will be testing on Italian wiki and looking at just the logo.

Test Result - Prod

Status: ✅ PASS
Environment: enwiki, itwiki
OS: macOS Big Sur
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps

✅ AC1: Verify the wikipedia logo is resized as text is resized by iOS.
The logo size does increase/decrease as expected. I verified this in itwiki as well. The rest of the images below are for reference. As the text gets really large there are elements on the screen that overlap, and search requires scrolling to the right to see the magnifying glass icon. A user may not know it is there. Search text size doesn't increase.

Default Size
Smallest Size
Large Size
Largest Size

@Jdlrobson, I'm assigning this to you just to highlight the behavior at the largest text size. The issues with search text size, the search clear x button misalignment, and overlapping text are outside of the scope of just the logo, but I thought you would like to note them in case you feel they warrant a fix. If everything looks good let me know and I'll move it over to Ready for Signoff.

Edtadros updated the task description. (Show Details)Sep 17 2021, 1:47 PM

The logo looks great in all of these.
Thanks for the detailed analysis of all the other font sizes. Things don't look great there, but someone viewing the site could always toggle "view desktop mode" to clean that up so at least some workround exists.

Have created T291503 to capture potential future work.

Change 807204 had a related patch set uploaded (by Krinkle; author: Krinkle):

[mediawiki/core@master] resourceloader: Resolve SkinModule wordmark/tagline tech debt

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

Change 807204 merged by jenkins-bot:

[mediawiki/core@master] resourceloader: Resolve SkinModule wordmark/tagline tech debt

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

	F34646054: IMG_2953.jpg
	Sep 17 2021, 1:46 PM

	F34646016: IMG_2936.jpg
	Sep 17 2021, 1:46 PM

	F34646035: IMG_2942.jpg
	Sep 17 2021, 1:46 PM

	F34646015: IMG_2935.jpg
	Sep 17 2021, 1:46 PM

[Spike] Wikipedia logo and navigation link elements should scale accordingly with font-size increasesClosed, ResolvedPublic3 Estimated Story PointsSpikeActions

Description

Description

Environments

Questions to answer

QA Results - Prod

Details

Related ObjectsSearch...

Event Timeline

Test Result - Prod

QA Steps

[Spike] Wikipedia logo and navigation link elements should scale accordingly with font-size increases
Closed, ResolvedPublic3 Estimated Story PointsSpike
Actions

Related Objects
Search...