Page MenuHomePhabricator

Interface icons in Wikidata should scale based on the default font size
Closed, ResolvedPublic

Assigned To
Authored By
Nikki
Jan 30 2023, 11:38 PM
Referenced Files
F44460476: Bildschirmfoto_2024-04-04_10-46-23.png
Apr 5 2024, 12:07 PM
F44459973: Bildschirmfoto_2024-04-04_10-39-21.png
Apr 5 2024, 12:07 PM
F44459972: Bildschirmfoto_2024-04-04_10-39-37.png
Apr 5 2024, 12:07 PM
F44458733: Bildschirmfoto_2024-04-04_10-02-31.png
Apr 5 2024, 12:07 PM
F44458726: Bildschirmfoto_2024-04-04_10-02-52.png
Apr 5 2024, 12:07 PM
F36562998: entityschema.png
Jan 30 2023, 11:38 PM
F36563020: form-2.png
Jan 30 2023, 11:38 PM
F36563012: form.png
Jan 30 2023, 11:38 PM
Tokens
"Like" token, awarded by Moebeus.

Description

Browsers let users adjust the default font size, e.g. for accessibility. Interface icons should be relative to the default font size so that they also get bigger.

There are a number of places in the Wikidata interface where that does not happen. This includes:

  1. the triangular expand/collapse toggle icon for "In more languages"
  2. the statement rank icon
  3. the icon for selecting novalue, somevalue or custom value for statements
  4. the triangular expand/collapse toggle icon for references
  5. edit, add, publish, remove, cancel, help icons when editing statements
  6. edit, publish, cancel, help and remove icons when editing sitelinks
  7. sitelink badges
  8. edit, publish and cancel icons when editing lemmas
  9. edit, add, publish, remove and cancel icons when editing senses
  10. edit, add, publish, cancel, help and remove icons when editing forms
  11. edit icons when editing entity schemas

Screenshots from Firefox with the default font size set to 32:

1

inmorelanguages.png (44×289 px, 5 KB)

2-5

statement.png (995×958 px, 80 KB)

6

sitelinks.png (536×621 px, 68 KB)

7

sitelink-badges.png (376×449 px, 44 KB)

8

lemma-edit-2.png (356×1 px, 28 KB)

lemma-edit.png (354×1 px, 49 KB)

9

sense-add-3.png (939×1 px, 84 KB)

10

form.png (228×1 px, 21 KB)

form-2.png (872×1 px, 76 KB)

11

entityschema.png (525×691 px, 31 KB)

Pages used in these examples:

Event Timeline

I attempted to find where in the source code the icons are defined:

Wikibase:

WikibaseLexeme:

EntitySchema:

I couldn't work out where the triangular expand/collapse icons (1, 4) get added but the icons themselves seem to be in MediaWiki core.

Change #1016776 had a related patch set uploaded (by Nikki; author: Nikki):

[mediawiki/extensions/Wikibase@master] Use relative sizes for icons

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

The above change looks okay to me so far; there are still some icons that have the wrong size (most notably, the little “triangle” to collapse or expand things like references or the legacy termbox), but those might not be under our control (that triangle’s styles come from jQuery UI, shipped with MediaWiki core). And overall, the change certainly feels like an improvement already.

@Sarai-WMDE do you have any objections to this?

I think that patch should fix 2, 3, 5, 6, 7, 9 and 10 from the description.

1 and 4 are the triangular expand/collapse toggle icons. It would be possible to override the styles for it on the elements where Wikibase uses it, but I didn't include that because I have no idea which file to put it in or if I would even be allowed to do that.

It wouldn't be ideal, those icons are PNGs, so scaling them up makes them slightly fuzzy. I would argue that it's still be an improvement, because crisp edges are not much use to you if it's not big enough for you see what it is.

Here's how it looks scaled up for me with Chrome's "large" and "very large" default font sizes (150% and 200% I think):
Bildschirmfoto_2024-04-04_10-02-52.png (26×171 px, 2 KB) Bildschirmfoto_2024-04-04_10-02-31.png (29×204 px, 3 KB)

The rest of the changes are in different repositories (WikibaseLexeme and EntitySchema). I can make those use relative sizes too, but the icons in both of those extensions are inconsistent with the rest of the site, so if I do, I would really like to make them consistent (maybe most people don't notice, but I do), not just change the units:

The icons for lemmas claim to have been copied from .wikibase-toolbar-button .wb-icon (link), but the size and opacity are different (20px instead of 16px, 0.7 opacity instead of 0.87).

Screenshots of how the lemma buttons (at the top) and the senses buttons (at the bottom) currently look at a normal font size on the same page:
Bildschirmfoto_2024-04-04_10-39-37.png (284×115 px, 3 KB) Bildschirmfoto_2024-04-04_10-39-21.png (310×189 px, 6 KB)

The icons for entity schemas also claim to have been copied from .wikibase-toolbar-button .wb-icon (link) but the size, opacity and colour are all different (15px instead of 16px, 0.67 opacity instead of 0.87, blue instead of black).

Screenshot of how the edit buttons on entity schema pages currently look at a normal font size:

Bildschirmfoto_2024-04-04_10-46-23.png (118×60 px, 2 KB)

Change #1016776 merged by jenkins-bot:

[mediawiki/extensions/Wikibase@master] Use relative sizes for icons

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

Sarai-WMDE claimed this task.

The patch was merged 🎉 Now most icons in Wikidata pages resize nicely if the base font size is modified 🔍 Thanks for the great contribution, @Nikki!