Page MenuHomePhabricator

Minerva should respect the system font-size settings on iOS
Closed, ResolvedPublic3 Estimated Story Points

Description

User Story

As someone with not the best vision, I increase the font-size on my iPhone by going to Settings -> Display & Brightness -> Text Size -> and moving the slider up. When I open Wikipedia on Safari though, the font size is still pretty small. I could use the Safari "reader-mode", or, I could go to the Settings screen on Mobile Wikipedia and increase the font-size there, but I as an average user, I might not be aware that those settings exists, and besides, I already set the font-size in my System settings.

Acceptance Criteria

  • When I increase the font-size in system settings, the font-size on mobile Wikipedia should also increase
  • The css rule is well documented, ideally pointing to a URI that we can refer to in future when we wonder "what's this for"

Developer Notes

In order to use the system font-size known in iOS as "Dynamic Type", iOS provides a proprietary CSS font rule for Safari: font: -apple-system-body;.
We could add this to the body tag in order to set the font-size there. More information on this property is available here http://www.interactiveaccessibility.com/blog/text-resizing-web-pages-ios-using-dynamic-type

body {
    font: -apple-system-body; 👈 for iOS browsers only
    font-family: 'Helvetica Neue','Helvetica','Nimbus Sans L','Arial','Liberation Sans',sans-serif;
    line-height: 1.4;
    color: #222222;
    background: #fff;
    -webkit-tap-highlight-color: rgba(0,0,0,0.2);
}

QA Steps

Environment: https://en.wikipedia.beta.wmflabs.org
Browser & device: mobile/iOS 9+ Grade A browsers
Skin: minerva
Steps: Warning: Unfortunately, this change affects the scaling of many design elements (text size, button size, etc) and is far-reaching. Therefore, it will be probably difficult to fully QA.

  1. On your iOS device, goto Settings > General > Accessibility > Larger Text and make sure the font size slider is in the middle (the default setting)
  2. Visit http://readers-web-staging.wmflabs.org/w/index.php?title=Barack_Obama&mobileaction=toggle_view_mobile in Safari
  3. Assert that the sizing of the design elements looks the same as production's site https://en.m.wikipedia.org/w/index.php?title=Barack_Obama&mobileaction=toggle_view_mobile
  4. On your device, goto Settings > General > Accessibility > Larger Text and increase the font size slider at the bottom all the way to the right
  5. Refresh the page, and assert that the scaling of design elements has increased and that it hasn't broken the design.
  6. Go back to Settings > General > Accessibility > Larger Text and decrease the font size slider at the bottom all the way to the left.
  7. Refresh the page, and assert that the scaling of design elements had decreased and that it hasn't broken the design.
  8. This change will also affect other iOS browsers including Edge, Firefox, and Chrome so it might be a good idea to repeat the steps on those browsers as well (although it should affect those the same way).

Event Timeline

Restricted Application changed the subtype of this task from "Deadline" to "Task". · View Herald TranscriptSep 19 2018, 7:22 AM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript
Izno moved this task from Unsorted to iOS on the Accessibility board.Sep 22 2018, 6:03 PM
ovasileva set the point value for this task to 3.Sep 26 2018, 4:46 PM
ovasileva moved this task from Triaged but Future to Upcoming on the Readers-Web-Backlog board.

Change 464154 had a related patch set uploaded (by Nray; owner: Nray):
[mediawiki/skins/MinervaNeue@master] Enable Dynamic Type in iOS Safari

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

@alexhollender this code is on staging. Can you take a look and give me your blessing to merge?

nray updated the task description. (Show Details)Oct 4 2018, 6:40 PM
nray updated the task description. (Show Details)Oct 4 2018, 7:09 PM
nray updated the task description. (Show Details)Oct 8 2018, 11:03 PM
nray updated the task description. (Show Details)

Looks good to me. The only element that doesn't seem to be scaling in the Wikipedia logo. Here is an extreme example of it looking out of proportion with the rest of the UI:

nray added a comment.Oct 9 2018, 7:19 PM

Looks good to me. The only element that doesn't seem to be scaling in the Wikipedia logo. Here is an extreme example of it looking out of proportion with the rest of the UI:

Yeah, that logo's size uses pixels, not em units so that's why it doesn't scale. I also noticed that the menu's text is not vertically centered with the icons when the browsers text size is not the default ( 16 px ).

I'm sure there are other peculiarities with elements using px instead of relative units like em. Given that those bugs are not unique to this feature (they also currently surface if you adjust your desktop browser's default font size on the mobile site), I propose we tackle these issues in future cards. I think otherwise this card will explode in scope. How does that sound @alexhollender @Jdlrobson ?

Change 464154 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Enable Dynamic Type in iOS 9+ browsers

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

alexhollender added a project: Product-QA.

Apologies for the delay here. Moving to QA and creating a separate ticket for the two issues identified above.

ABorbaWMF added a subscriber: ABorbaWMF.EditedOct 16 2018, 12:08 AM

Looks good on the iPad across a few browsers. I did find some issues with the largest font and the banner/header area on phones.

nray claimed this task.Oct 19 2018, 4:02 PM
nray added a subscriber: Ryasmeen.
nray added a comment.Oct 22 2018, 6:56 PM

Looks good on the iPad across a few browsers. I did find some issues with the largest font and the banner/header area on phones.

@ABorbaWMF What device model and iOS version is the above screenshot tested with?

iPhone x with iOS 12.0.1

nray added a subscriber: ovasileva.Oct 23 2018, 9:00 PM

@ABorbaWMF @ovasileva After looking more into the observations made by @ABorbaWMF, I made another card T207789 to address these and propose we tackle them in that card. The feature that this card enabled was the ability for iOS users to adjust their browser's default font size and have Minerva respond to that setting. However, other devices / browsers (android browsers / desktop browsers) let the user adjust their default browser size without us needing to "enable" anything on Minerva's side.

As can be seen by T207789, similar issues surface at large default font sizes in numerous non-iOS browsers, and these issues are not unique to the feature worked on in this card (which, again, is only "turned on" in iOS browsers). The common trait they share, however, is that some of our design element's CSS just don't handle large font sizes that well, and I think there is a large discussion to be had on what our design should look like when large default font sizes are used (I posted some of these questions on T207789) .

Given that this card's patch is already in production and seems to work fairly well at most font sizes except the largest font sizes supported by iOS, I personally don't feel it is necessary to revert this patch as doing that would prevent users from seeing any text adjustment on Minerva that they did on their iOS device. Additionally, the underlying problem would still exist and be visible in other devices / browsers.

Does that make sense?

nray added a comment.Oct 23 2018, 9:03 PM

As explained by the comment above, I'm moving this to the sign-off column although there are still some issues with this patch at the largest font sizes supported by iOS which I hope can be tackled in future cards (e.g. T207789)

nray removed nray as the assignee of this task.Oct 23 2018, 9:03 PM
ovasileva closed this task as Resolved.Oct 24 2018, 1:16 AM
ovasileva claimed this task.

@ABorbaWMF @ovasileva After looking more into the observations made by @ABorbaWMF, I made another card T207789 to address these and propose we tackle them in that card. The feature that this card enabled was the ability for iOS users to adjust their browser's default font size and have Minerva respond to that setting. However, other devices / browsers (android browsers / desktop browsers) let the user adjust their default browser size without us needing to "enable" anything on Minerva's side.

As can be seen by T207789, similar issues surface at large default font sizes in numerous non-iOS browsers, and these issues are not unique to the feature worked on in this card (which, again, is only "turned on" in iOS browsers). The common trait they share, however, is that some of our design element's CSS just don't handle large font sizes that well, and I think there is a large discussion to be had on what our design should look like when large default font sizes are used (I posted some of these questions on T207789) .

Given that this card's patch is already in production and seems to work fairly well at most font sizes except the largest font sizes supported by iOS, I personally don't feel it is necessary to revert this patch as doing that would prevent users from seeing any text adjustment on Minerva that they did on their iOS device. Additionally, the underlying problem would still exist and be visible in other devices / browsers.

Does that make sense?

Makes sense to me. I'll go ahead and resolve this for now and use the follow-up task for any future work. @alexhollender - feel free to open if there's objections from your side.

Restricted Application added a project: User-Ryasmeen. · View Herald TranscriptOct 24 2018, 1:16 AM
ovasileva updated the task description. (Show Details)Oct 24 2018, 1:16 AM
ovasileva updated the task description. (Show Details)

Sounds good. Wanted to make sure that T207038 and T207789 are not duplicative? (no action/response needed necessarily)