Code editor font size is ridiculously large

[PatchMixolydic]

Recently, the code editor's font size has become unreasonably large (other programs + address bar + "Run" button for scale):

(It's a little hard to tell from this screenshot; it looks much worse in person)

This makes it much harder to read (and therefore write) any substantial code examples in the Playground.

Seems to have been changed in e8f3cb1.

[shepmaster]

I don't have any plans to revert this change; as noted in the commit you linked, this appears to be the only way to have a dark mode and still pass contrast guidelines.

[RalfJung]

I reflexively hit Ctrl-0 when visiting the playground today since things were so big, I assumed I had left it zoomed to 130% or so from a live demo... but turns out now, this is the new default now. I agree with the OP, this means a lot less code now fits on the screen. For now I've set browser zoom to 80% to get the code size back to around where it used to be -- that makes the UI tiny but I know all these buttons anyway.

Maybe the large font size can be restricted to dark mode then? As someone who anyway thinks dark mode makes things harder to read, I am not surprised dark mode needs larger fonts to ensure sufficient contrast -- that agrees with my subjective experience. But why should light mode be affected by this?

[SabrinaJewson]

I would like to chime in and agree that the font size makes the playground a much worse experiënce for me.

As a suggestion, maybe there could be a zoom button, that toggles resetting the font size to what it was before, such that the playground remembers locally whether the user has the zoom enabled?

Edit: Actually, would probably be better to have a direct “font size” input in the config menu

[chriskrycho]

@shepmaster any interest in making this configurable? Setting the default this high for accessibility reasons seems like an eminently reasonable move (though another option there is to provide high contrast themes for users who need it, which is what e.g. VS Code and GitHub do to tackle that!), but making it possible for users to then set it to something appropriate to their own needs would give everyone what they need. If you’re open to that, I have time to do some work on it even this week.

Edit to add: For folks who want to tweak this in the meantime, you can use a user style sheet and simply target body. I set mine to 14px and it’s at a much more comfortable size for me now.

body {
  font-size: 14px;
}

[shepmaster]

making this configurable

It is configurable, using existing browser tools. As RalfJung did, you can reduce the scaling of the page ¹. As you did, you can apply user-specific styles.

As an extreme counterexample, I have no plans to add every possible CSS rule for every selector to the playground's configuration menu.

Likewise, I have no plans to make the playground expose every possible command line option for {rustc,cargo,miri,rustfmt,clippy}. My primary driving case for the playground is for casual users of Rust. When I can accommodate advanced and expert users without degrading the experience of the common person, I will. (and no, based on the usernames of people I recognize, none of you are casual users of Rust 😉).

for users who need it

This isn't a matter of me attempting to cater to a marginal group of people that we otherwise would rather pretend doesn't exist. I am (attempting) to follow industry best practices to have reasonable contrast for everyone. Using their interactive calculator to play with values (or using the experimental option in Chrome's inspector), you can see that it's basically impossible to achieve with a dark background without increasing font sizes.

I'm much more tempted to create another theme (or two?) called "low-contrast" that reduces the font sizes back to the original, for those with better eyesight.

Maybe the large font size can be restricted to dark mode then

This is another possibility. How many people here complaining about the font size are using light mode vs dark mode?

Footnotes

1. Although as mentioned, this does make the UI buttons smaller so I might later increase their base size to keep the ratios appropriate. ↩

[shepmaster]

I'm also happy to learn that I'm using my tools wrong, if anyone cares to go on an accessibility and color perception journey with me.

[chriskrycho]

Just to be extra clear: I’m wholly in support of your goals here, and I have done a ton of web accessibility work over the years, including making sure “white-labeled” web apps had appropriate contrast ratios (not a good time dealing with custom brands that way 😳) and making sure dark mode implementations hit WCAG AAA guidelines (intense!). I myself am very frustrated by the low contrast in many themes.¹ My suggestion was not in the least a matter of treating users for whom higher contrast is necessary as second-class. Nor do I think you should expose a setting for every single feature!

I think the current default size is actually a perfectly good default, as is making the default theme sufficiently high-contrast that it serves as many users as possible. My own approach here would be to default to a theme for the UI and the editor which matches the prefers-color-scheme and a theme for the editor which matches the prefers-contrast, using high-contrast themes in the case where the user has requested it by making explicit choices in the OS. But just defaulting to the highest contrast mode is also good!

What I am asking for (and what I take others to be asking for) is just the font size equivalent of the theme selector, though. There are any number of themes on offer which are nowhere close to even WCAG AA compliance. That’s fine, though, because users can opt into selecting them if they’re more comfortable for those users, and the baseline experience is a good one for as many users as possible—and meanwhile, there are actual downsides for many users to not offering that.

To make this really concrete: I actually cannot set up a user style sheet on my iPad, which is one context I am quite likely to reach for the playground. If I am using an iPad without an external keyboard, I also cannot readily change the zoom. And as you note in your footnote, just changing the zoom of the page has other knock-on effects, and a UI should not automatically adjust things like button size as a user zooms.

Restricting the font size shift to dark themes is probably not a great solution. That would make for an extremely jarring experience when intentionally toggling between the two, and would force many users to choose between a more comfortable/desirable text size and a more comfortable/desirable theme.

Footnotes

1. I know a lot of developers love their low-contrast themes—looking at you, Solarized—but I am not among them. ↩