New want: I would like a text zoom setting to be revealed in the document api.

[aarongustafson]

---

title: I would like a text zoom setting to be revealed in the document api.
date: 2020-02-29T00:02:18.792Z
submitter: PRIVATE
number: 5e59aa0a939898418293aaa9
tags: []

Text sizing on the web is hard. I wanted to be able to adjust it according to each user's preference, and so I added that to Twitter web: https://twitter.com/i/display

But it's not enough. I don't want each person to have to configure each website they visit. I want a global setting.

Safari supports that kind of styling, by resizing certain fonts automatically. You can use font: -apple-system-body, but in a modern web app stack, that doesn't fit. I'd have to lay out some text, measure it, and derive sizes from that, during first load.

Can we just have a value in the document api? Like a zoom value that tells us the user intent? It would be so much easier to handle.

So perhaps my javascript would set the text size to 15px * document.textScaleSetting

[aarongustafson]

Thinking on this a bit more (I was a little distracted when responding to your tweet), browsers do currently have global scaling:

Here’s Edge Canary’s:

And Firefox Dev Edition’s:

From there (and forgive me if you already know this)…

• "100%" on the root element will always be the user’s default font size in the browser. (It’s also customizable via text zoom and tracked per-site, which you can test by enlarging a single tab, then opening a new tab to the same page.)
• That 100% value is the basis from which rem values are calculated (and em, but the math is far more complex).
• To do more interesting things, you can combine rem with other units (e.g., vw) within calc() to have some basis for adjusting the font size to grow when screens are especially wide (or when they are small, depending on your math).

Given all of this, I guess what I want to know is what are you missing for being able to tune your font sizes?

[kennethkufluk]

I see how that is possible from CSS. I think everything available to CSS should be easily available to JS APIs.

In this case, we have reasons why we’re using px measures rather than ems or rems.

[monospaced]

For this to work in practise

1. cannot have a font-size declaration on the root element, and
2. can only use releative units (no px) for text, and also for the entire UI if you want everything to scale in proportion (including media queries).

We did that here: https://thomsonreuters.com.

It added some complexity for sure. One trick to help code readability was to declare dimensions like this calc(10rem / 16) (to mean, "10px in the default size"). This helped us to reason about dimensions without getting lost in relativity.

Control of the root element cannot always be gaurenteed (thinking design-system supporting "brownfield" adoption) and the complexity trade-off is non-trivial. So worth exploring alterantives IMO.

[aarongustafson]

@kennethkufluk How challenging would it be for you to throw together a reduced example of what you are trying to accomplish? Maybe on CodePen or something.

As a side note, if you are only looking for programmatic access to this info, window.getComputedStyle() can be useful:

window.getComputedStyle( document.querySelector('html'), false )
  .getPropertyValue('font-size'); // "16px" (default)

// or 

window.getComputedStyle( document.querySelector('html'), false ).fontSize; // "16px"

Folks have been setting up synthetic font resize events for quite some time too. Here’s a straightforward example from 2007 and another from a container query polyfill.

[aarongustafson]

we have reasons why we’re using px measures rather than ems or rems

@kennethkufluk Can you share what those reasons are?

[aarongustafson]

@kennethkufluk Gentle nudge… have you had a chance to look at window.getComputedStyle() or the text resize events I suggested?

[kennethkufluk]

I think it's likely the "window.getComputedStyle()" option would work, though once I've set it, I wouldn't have a way to measure it any more.

I think in terms of this project, the "web we want" would provide direct access to such properties rather than indirect methods like creating hidden text areas and measuring height changes.

[jfkthame]

One point to keep in mind is that exposing some kind of "user's preferred text scaling" value to sites may be a privacy issue. If I habitually browse the web with 150% scaling, will the advertising networks use that signal to start pushing ads for laser eye surgery at me everywhere?

[aarongustafson]

I think it's likely the "window.getComputedStyle()" option would work, though once I've set it, I wouldn't have a way to measure it any more.

I think in terms of this project, the "web we want" would provide direct access to such properties rather than indirect methods like creating hidden text areas and measuring height changes.

It feels like the "want" might be best re-written to focus on the desire for a native font resize event. That, combined with window.getComputedStyle() should enable any site or component to do any additional calculations they need to that could not be accomplished purely via CSS. Does that sound reasonable?

[aarongustafson]

::bump:: @kennethkufluk Does the above sound reasonable?

[aarongustafson]

#45 looks like it might address this use case as well.

[kennethkufluk]

I implemented the suggestion to set the default text scale setting on your first visit to Twitter.com. I hope it helps someone. Thanks for the hint. 🙏