Allow custom font and font size

[craffert0]

Describe the feature request.

The default font size for the code is very small, but Cmd-+ to zoom it to a readable size makes everything else comically huge. Similarly, I'd like to be able to specify a more readable fixed-size font.

Another alternative would be for Sourcegraph to honor the Chrome Font preferences, like "Font Size" and "Fixed-Width Font".

Is your feature request related to a problem? Please describe.

No.

Describe alternatives you've considered.

I'm trying to work through the Stylus Chrome Extension, but without documentation on css elements used, it's a long slog of trial & error.

Additional context

Nothing.

[beyang]

cc @francisschmaltz @felixfbecker

[francisschmaltz]

Hey @craffert0! I'm Sourcegraph's product designer and my focus for next month is to take a look at pain points like this, especially ones accessibility focused, and resolve them. Beyond the font size of the code, is there anything else you want to toss my way as a concern?

[craffert0]

That's really the only issue. As I said, just respecting the "Font Size" and "Fixed-WIdth Font" setting in Chrome would be enough. But custom stylesheets would be awesome.

[sqs]

Half of this issue (font size) will be addressed by fixing https://github.com/sourcegraph/sourcegraph/issues/133.

The other half (letting you specify a fixed-width font) will not be, so I retitled this issue to reflect just that.

[craffert0]

This is great. 90% of the original request is really about font size. Choice of font is just a bonus.

[francisschmaltz]

Much like an IDE, we should allow font size to be changed on a user's config.

[laubzega]

@francisschmaltz Hi Francis. So, it's been some time since August. Any progress on this issue? Thanks.

[francisschmaltz]

@laubzega this is a feature that we want to implement but is not prioritized for 3.0-preview or 3.0.

[francisschmaltz]

Changing the issue title to reflect the ask (supporting custom font/font size).

Currently the plan is to allow implementing a custom base font size, but not a custom font. We will continue to use the system font for Sourcegraph.

[stale[bot]]

Please post an update or close this with an explanation if it is no longer relevant. This will be closed automatically if there is no more activity.

[stale[bot]]

Stalebot is closing this due to inactivity.

[maxmilton]

For a moment there I thought there was some progress but alas it's just stale bot cleaning up.

I know this seems like a simple thing but to be honest, readability is the main thing holding me back from using sourcegraph more than just an occasional toy. The tiny, contastless font is a challenge to read. Developers tend to be picky about their code editor environment so some customizability here would be amazing :trophy:

My suggestion is leave it completely up to the developer font wise by using an editable CSS custom property on the code editor font property. Something like:

code, kbd {
  font: var(--code-font);
}

+ maybe allow --code-font to be set via a field/s in the user settings.

The cool thing about the CSS font property is its shorthand for a heap of font-related properties. It includes everything I would want to change: font-size, font-family, font-weight, font-variant, and line-height.

While we could inject our own CSS or adjust the system font rendering settings, this really feels like something that should come out of the box with Sourcegraph. Otherwise, a very interesting product — looking forward to see where it goes :100:

[tim-clipchamp]

To add to what MaxMilton said, this issue is the one reason I haven't run a trial at my company yet.

SourceGraph is about reading and digesting code. The look and readability has a massive impact on that.

In terms of changing the general font setting for whole the browser, the requirements for the most usable UI and font is different in SourceGraph than the general web.

Please please please re-open and fix this issue.

[christinaforney]

Hey @MaxMilton and @tim-clipchamp - thanks for chiming in that this is still a very relevant issue. Adding it to the list to discuss for upcoming priorities!

[redstrike]

Oh no, SourceGraph is awesome. But I didn't know that it's 2020 and we cannot find a proper way to adjust the font size for the better reading experience. I'm using a 29 inches ultra-wide monitor, and the default font size of source code is very small, even if I'm not using 4K resolution.

I hope this issue could be fixed soon.

[unknwon]

Though I agree it is very nice to have, but as long as the application has stable CSS classes and rendered HTML structure (which I believe we do), use browser extensions like Stylus is more robust and customizable solution IMHO. Of course we could document this and share an example stylesheet.

[felixfbecker]

I think it's a bit more nuanced then that - we should strive for the font sizes of the web app to make sense in relation to each other, i.e. not one part of the UI being weirdly larger than the other. With that invariant, browser zoom (which is persisted per-website) would be sufficient for anyone who has a different font size preference. If it's true that that invariant is not true right now though, we need to look into that.

[lf-]

;-)

Browser zoom is, as you say, at present a non-solution to this issue. However, here's the CSS to make the font size usable.

.code, code, kbd {
    font-size: 16px;
    line-height: 20px;
}

As a bonus, here's the user style to do the same thing on github.com:

.blob-code-inner {
    font-size: 16px;
}

.blob-code {
    line-height: 24px;
}

It is really not great that I have to use CSS to make the code viewer accessible for me, but GitHub, Canvas, Zybooks, and this one have already failed that test.

[caowent]

I also faced the same problem (using the chrome extension application), I hope to change the default font a bit larger, the current font is really a bit small.

small

ok

[github-actions[bot]]

Heads up @jeanduplessis @alicjasuska @felixfbecker - the "team/frontend-platform" label was applied to this issue.

[imcom]

one could use Chrome extension Stylus to the rescue first

[djaddison]

From a usability perspective it's confusing why certain visual settings (ex: dark theme) aren't part of the user settings JSON object in the user settings.

Could the font settings (ex: font family, size, line height, letter spacing) be exposed thought user settings? Something similar to how vscode allows configuration of the editor visual properties.

Based on other comments it appears the css could be adapted to take a css variable as input. How easy is it to connect that css variable to a user setting? Is there a mechanism to inject those user settings into the front-end?

Could it work something like:

• user setting
• inject into document as top level :root css variable
• .code picks up css variable to apply font settings

[djaddison]

For additional context: I only care about the font size for the code viewer. It's way too small for me.

[chrislovett03]

Customer request

[marcleblanc2]

Also reported by customer 8205 in support ticket 13441, can we take a look at this one?

[laubzega]

Please absolutely do not hurry. Ideally, I'd recommend spending another five years carefully pondering on this thoroughly bizarre concept of having adjustable font in a text reading application. Who knows, maybe it'll go away by itself, or with a bit of luck, a bot will close it. No rush.

We'll be admiring from the sidelines.

[limitedmage]

We definitely respect the browser's font size setting, if that is not working in some place, please let us know.

If you're using an extension that lets you customize userstyles, you can use the following snippet to change the font size globally:

:root {
    --font-size-base: 1rem !important; /* or whatever size you want, default is 0.875rem */
}

[marcleblanc2]

I thought I'd try the suggestions myself.

The browser's page zoom, font size, and custom font settings seem to work pretty well, though depending on your browser, these settings may be for all sites instead of per site.

I thought I'd try out the Stylus browser extension, it works pretty well too, yet I can see how it wouldn't be ideal. Here's the custom theme I tried:

:root {
    --font-size-base: 1rem !important; /* default 0.875rem */
    --code-font-family: wingdings !important;
}

As this issue is almost 5 years old, the product today is vastly different than it was 5 years ago, so I highly recommend giving it another thorough testing on either sourcegraph.com/search, or v5.0.1, and adding screenshots / recordings of what's not meeting your needs today.

[thiagomgd]

We definitely respect the browser's font size setting, if that is not working in some place, please let us know.

Only sourcegraph font is too small and hard to read. I don't want to make every other webapp/site font bigger, just sourcegraph

Please absolutely do not hurry. Ideally, I'd recommend spending another five years carefully pondering on this thoroughly bizarre concept of having adjustable font in a text reading application. Who knows, maybe it'll go away by itself, or with a bit of luck, a bot will close it. No rush.

They spent way more time and effort dismissing adding this setting, than adding the option 😂 I guess for them it's just a joke at this point

[wellmorq]

Still no way to change font size? fr?

[wellmorq]

Such a great tool is completely impossible to use because of the size of the code. On github it is 4!!! times larger than in sourcegraph