Page MenuHomePhabricator

[Goal] Font-size: Use `rem` in modern Vector
Open, MediumPublic

Description

Relying on rem units is close to possible with accepted T248061: RFC: Remove IE 8 from basic support and proposed T262946: Bump Firefox version in basic support to 3.6 or newer.

We should consider using rems in modern Vector as

  • it provides a way of building interface with a relative sizing unit, which is providing fully accessible zooming, both on text zooming via user preferences and full-page zooming WHILE
  • it provides a much simpler handover between design and development

Browser support for rems.

Related Objects

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes
ovasileva set the point value for this task to 5.Sep 14 2020, 5:19 PM

Nit: copying from T261334:

These are also unsupported in IE8, but are not unlocked by this RFC due to other older browsers not yet supporting them either:

  • Using rem units. This would be a very nice benefit, but even with IE 8 out of the picture not yet in reach as long we support Firefox <= 3.6 in basic.

Perhaps it's time to drop basic support for ancient firefox. Turnilo says there are 4.3m page views in the last 30 days using Firefox 3.* from real users.

@Daimona, captured in T262946.

I'm moving this back to the backlog. because as discussed in the gerrit patch here I think we should create a separate variables file for modern Vector if we're going to have different font-related variables (at least at first) in modern and legacy Vector.

The work to create those files (and generally bring more consistency to the CSS folder structure) has been captured in https://phabricator.wikimedia.org/T264309

Change 622742 abandoned by Jdlrobson:
[mediawiki/skins/Vector@master] [POC] Switch font-size to rem

Reason:
abandoning POC for now (is associated with phab ticket)

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

Jdlrobson assigned this task to Volker_E.
Jdlrobson moved this task from Triaged but Future to unsed on the Web-Team-Backlog board.
Jdlrobson added a subscriber: ovasileva.
Jdlrobson subscribed.

Let's talk about this tomorrow and create some kind of action plan.

Jdlrobson removed the point value for this task.Aug 2 2021, 10:31 PM
Jdlrobson edited projects, added Web-Team-Backlog (Tracking); removed Web-Team-Backlog.

@Volker_E I know you are busy right now, but when you get a moment let's chat about what we want to achieve here and how. I am also not sure how this fits in with WVUI / Vue.js decision making.

For the Vector interface I think rem is fine to use now (when ensuring that it doesn't break extensions in a not documented and shared way). For content I don't think we're able to use it yet as it takes up too much testing capacity and too many unknowns. Also interoperability between skins would be under threat.
WVUI/Vue.js has nothing to bring to the table in this case as any future shared UI library has to work across themes – as long as something like T262928 isn't in place no relation here.

I am very interested in using rems instead of ems to avoid the cascading headaches associated with ems. Based on @Volker_E's comment above, I assume this is okay to do this now?

Since we only questionably support IE11, I don't think there are any technical reasons not to use them.

I don't think we need an explicit task for using rems. I was imagining we'd do this as part of font changes (T313828) whenever those happening.

Jdlrobson renamed this task from Use `rem` in modern Vector to Font-sizE: Use `rem` in modern Vector.Jun 27 2023, 8:55 PM

We'll likely need rem support for font size changes so it would be good to make this switch. Note stylelint currently complains about rem units - I've asked over at https://github.com/wikimedia/stylelint-config-wikimedia/issues/98#issuecomment-1610198614

Jdlrobson lowered the priority of this task from Medium to Low.Jul 6 2023, 5:43 PM
Jdlrobson raised the priority of this task from Low to Medium.

@Jdrewniak how does this fit in with the work on font-size this quarter? e.g. when / how do we want to do this?

The new Zebra design uses rem's so when that goes live we'll be all in on rems.
We have no plans to use rems in legacy Vector which is effectively frozen at this point.

Volker_E renamed this task from Font-sizE: Use `rem` in modern Vector to Font-size: Use `rem` in modern Vector.Aug 2 2023, 12:02 PM

Given the rollout of Zebra is stalled, I think we should pursue this task as part of the font-size work, separate from Zebra.

Change 966897 had a related patch set uploaded (by Jdrewniak; author: Jdrewniak):

[mediawiki/skins/Vector@master] Normalize small font sizes in Vector 2022

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

Jdlrobson renamed this task from Font-size: Use `rem` in modern Vector to [Tracking] Font-size: Use `rem` in modern Vector.Oct 19 2023, 5:55 PM
Jdlrobson renamed this task from [Tracking] Font-size: Use `rem` in modern Vector to [GOAL] Font-size: Use `rem` in modern Vector.
ovasileva renamed this task from [GOAL] Font-size: Use `rem` in modern Vector to [Goal] Font-size: Use `rem` in modern Vector.Oct 19 2023, 5:56 PM
ovasileva moved this task from Not ready to estimate to Epics/Goals on the Web-Team-Backlog board.

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

[mediawiki/skins/Vector@wmf/1.42.0-wmf.2] [Visual change] Normalize small font sizes in Vector 2022

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

Change 966897 merged by jenkins-bot:

[mediawiki/skins/Vector@master] [Visual change] Normalize small font sizes in Vector 2022

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

Change 968314 abandoned by Jdlrobson:

[mediawiki/skins/Vector@wmf/1.42.0-wmf.2] [Visual change] Normalize small font sizes in Vector 2022

Reason:

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