Setting font-size

[andrewpbray]

First of: terrific work here! I'm using this extensively at a course that serves 800 intro students a semester here at UC Berkeley.

I'm trying to figure out how to restyle the webr code cells using css so that they don't look so categorically different from normal code cells and also the surrounding text. Most glaring to me is the font size, which is larger than both body text and code cell text in normal quarto code cells. I find that it makes a quarto-live page very visually busy - it's difficult for me to tell what i should be reading and in what order. I've been able to reduce the font size using font-size: .85em, but more systematic fixes seem to be failing like font-size: 1rem.

I know you're offshoring that css to CodeMirror, but I haven't yet been able to figure out how to reset some of those defaults. I'm no css expert, so any guidance would be appreciated!

[georgestagg]

Hi, thanks for the kind words!

Yes, we're handing off the editor to CodeMirror, so CSS rules that work for CodeMirror should work here. In terms of getting to the editor via CSS classes, your best bet will be something like: .exercise-editor .exercise-editor-body .cm-editor.

There are several classes in the file live-runtime/src/css/live-runtime.css, for the editor in both bootstrap and reveal.js slides, and they should be able to be overridden in your Quarto project. We should probably document the most useful of these, and so I will leave this thread open as a reminder to do just that.

---

Most glaring to me is the font size, which is larger than both body text and code cell text in normal quarto code cells

On my machine the browser is reporting that both the body text and the editor text are 17px. I guess a visual difference could be due to the switch to a monospaced font, but to me the editor text looks reasonably scaled. Perhaps it depends on specific machine settings and the CSS could be refined a little to better handle that. If there is a significant difference in text size between the editor and body text on your machine could you please post a screenshot and details of your OS and browser?

---

I've been able to reduce the font size using font-size: .85em, but more systematic fixes seem to be failing like font-size: 1rem.

The rule font-size: 1rem should in fact be the default value. Well, in truth the default is the CSS variable --bs-body-font-size, which is inherited from the Bootstrap style used by Quarto to build the page. In the Bootstrap CSS I'm looking at in a test website this variable is essentially defined to be the same as the root font size, i.e. 1rem.

The result should be that the code blocks scale with the base font size used in the rest of the page.

OTOH, it looks like the text size in Quarto/Bootstrap code cells are scaled down, at least in the testing page I'm currently looking at. Specifically, code and pre elements have font-size: 0.875em set. You could also apply that to the CodeMirror editor, but you'd probably also want to scale the editor header and padding down a touch to match.

So, I think this can be recreated with a SCSS style override in your Quarto document:

/*-- scss:rules --*/
.exercise-editor .exercise-editor-body .cm-editor {
  font-size: 0.875rem;
}

.card.exercise-editor .card-header.exercise-editor-header {
  font-size: 0.875rem;
  padding: .3rem 1rem;
}

---

BTW, I am not sure what you mean by "systematic". If you can give me some other concrete examples of changes you'd like to make to the code editor input element, drop them in a comment here and I can try building up some more CSS examples for you to work from as a base.

[andrewpbray]

This is very helpful - thanks!

When I look at the computed styles, I'm seeing body and quarto live code as 17 px and normal Quarto code cells as 14.875px. Here's what it looks like on the Quarto Live docs site, with Chrome 128.0.6613.138 and Mac OS Sonoma 14.6.1.

My aim is to make the code in the live cells appear more similar to the way it does in the normal code cells. I didn't realize that Quarto used .875em for code and pre - that pretty well explains it! (and why .85em seemed to work well for me)

By "systematic fix" I was referring to something I've done poorly in the past with em font size. Since em is multiplicative, if several different rules applying different scaling multipliers upstream of your rule, it feels very brittle to add yet another multiplier. If one of those upstream rules gets turned off, then suddenly my em value is wrong. In this case, though, it sounds like I'm in the clear because there is no upstream em rule; in fact that's the cause of the difference between a live cell and a normal Quarto cell!