[Spike 1 hour] Investigate methodology for allowing users to change font size in the Web View
Closed, ResolvedPublic

Description

The outcome of this ticket should be a concrete technical solution to implementing changing font size in the web view.

The solution must:

  • Bump the font size of all fonts in the web view
  • Work without reloading web view
Fjalapeno updated the task description. (Show Details)
Fjalapeno raised the priority of this task from to Needs Triage.
Fjalapeno moved this task to Needs Estimation on the Wikipedia-iOS-App-Backlog board.
Fjalapeno added a subscriber: Fjalapeno.
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJul 10 2015, 5:55 PM
Mhurd claimed this task.Jul 27 2015, 9:05 PM
Mhurd added a comment.EditedJul 27 2015, 10:54 PM

Ok we have a pretty easy/minimalist css out for this I think:

*{
    -webkit-text-size-adjust: <SOME PERCENTAGE>%
}

Seems to do the trick. Could fairly easily hook this up to small / medium / large buttons setting the value to ~80% / 100% / ~120% or so respectively.

80%

100% (default)

120%

@Mhurd - sweet! Looks like a good way to do it.

Does this work without reloading the web view? Do we update the CSS using js?

Mhurd added a comment.Jul 28 2015, 1:43 AM

@Fjalapeno

No need to reload the web view. It will re-flow it of course, but not reload.

Yes we can update the CSS via JS. Should be pretty simple I think.

There also appear to be CSS attributes specifically for dynamic type. Seems the most straightforward way to do it. This demo project makes it seem pretty straightforward.

That said, changing CSS via JS seems doable based on this SO thread. Not entirely sure how to parse the CSS in JS (the API is a bit hard to grok), but agree w/ @Fjalapeno that reloading the page should be avoided.

To be clear, I'd rather we use the built-in CSS attributes if possible to avoid re-inventing wheels.

Fjalapeno closed this task as Resolved.

Got enough information to move forward with the real task.

Mhurd added a comment.EditedJul 28 2015, 2:49 AM

@Fjalapeno @BGerstle-WMF

Here's a working proof of concept:

https://github.com/wikimedia/wikipedia-ios/commits/T105535

(it even remembers the pre-resize scroll position)

Mhurd added a comment.Jul 28 2015, 5:27 PM

Per Brian's dynamic type comment (from irc):

The issue i have with that system-level setting is one of ux primarily. i think we *could* use it to set what the app uses as its default "normal" text size, so you initially see larger text for example, but most reader apps let you then increase or decrease text size w/o having to leave the app