Monospace font in the Markdown-only editor

Quick PSA:

For those of you testing the new composer (either here on meta or your own site) we just swapped the markdown (aka. source code) font to a monospace font.

This helps clarify to users that you are in “markdown” mode vs “rich” mode.

The change aligns the font choice to what is generally accepted in the industry (reddit / stack exchange)

The change only takes effect on sites with rich editor enabled, and should be live here in 20-40 minutes.

6 Likes

Because I don’t use either of those, but totally different branch of industry then, how can I change it back to using some more… nicer font? On self hosted instance, of course.

1 Like

You have the ability to introduce themes and components on your site, overriding this font choice is 3 lines of CSS.

The nicer font remains in the new composer, we do not switch to monospace there.

3 Likes

I normally write longer posts, and I don’t need WYSIWYG, but my users need, so I would stick in marksdown. But monospace is really hard to read, and there is a point why big majority of industry don’t use monospace in editors.

Just out of curiosity — what was the point of this change? It kind of breaks usability now.

But yeah, I’ll start digging classes when I’m on more user friendly device what iPad is in this matter :joy:

1 Like

This is not really true, all coding editors out there use monospace it is the industry standard.

That said, live with the change here, if it really really annoys you on meta I recommend trying to click on this:

The rich editor works extremely well here. We are listening out for feedback on the font thing.

5 Likes

I don’t use coding editors. I’m creating text and content.

It works.

It really annoys me, but I can live with it here, because I don’t write much. But I got a hint from you how to fix this to my forum, and that worked. Thanks.

But I got the answer, even I still don’t understand the meaning and purpose for that change, but I don’t need to either. Meta is doing what Meta is doing, and I can change that on my end. Most of the people are happy.

1 Like

While that’s true, I’m wondering if this the right metaphor here. If I think of writing posts in Discourse with Markdown in them, I’m mentally not in the “coding space”, but rather in the “web editing space”. And if I look at Discord or JIRA, where I also write Markdown-formatted posts, both do not use monospace fonts.

Now I’m mostly fine with the new editor (since it can be used in a kind of “semi-WYSWYG mode”, where you still enter Markdown and it is formatted after you complete the line block), and I think I will resort to the old one less once it is rolled rolled. However, if you do decide to keep the monospace font, I think it would be good to reduce the font weight, so it is closer to that of the rendered text. Currently, the text looks a bit too bold.

7 Likes

This is an interesting change! Having used it to write some longer posts today, the main thing I am having trouble getting used to is that the left side takes up more space than the right side, which means that the two sides quickly get out of alignment.

I’ve gotten so used to watching the preview as I write to confirm that it looks like I want it to, to the point that even after all these years I STILL sometimes click on the preview side instead of the markdown side!

With this change, that will of course no longer be a problem. It’s quite clear where I should be typing.

Will have to give this some time to get used to it, but I do think I agree with @schneeland that the markdown font could be smaller.

5 Likes

I understand the intent to have a visual cue. It makes sense in this context! Sometimes, I wonder whether I’m using the rich editor.
It is also important to hint in favor of the rich editor, as it has been performing remarkably well overall.

I’m still using the markdown editor often because of the bugs with the rich editor.
Right now, it isn’t easy to read:

As Schneeland said, I don’t consider the Markdown editor a coding editor; it will take time to get accustomed to it. It would be great if the font size could be adjusted to match the preview font more closely.

6 Likes

If you download a browser extension called Stylus for Firefox and Chromium browsers, you can override the CSS on other websites.

I don’t use Safari much and haven’t tried it, but there is a setting to add a custom stylesheet under AdvancedStyle Sheet.

A screenshot of the Safari setting

I think this CSS will work:

.d-editor-input {
    font-family: var(--font-family) !important;
}

(Replace var(--font-family) with another font name if you want a different font.)

This has been repeat feedback, I am going to experiment with pulling in jetbrains mono and fiddle with size a bit to see if stuff can align better.

A big point this helped make clear is that all of us experience monospace a bit differently, making a consistent experience may help here.

2 Likes

This how it looks with JetBrains Mono set to 14px:

Direct comparison:

JetBrains Mono looks fantastic to me. It’s definitely easier to read and matches the preview font well.

Additionally, it would make sense to highlight the content now that it’s treated as code. There is a topic, but I can’t remember the content. E.g.:


6 Likes

Likely not helping the look of the monospace font is that it’s using system defaults for --d-font-family--monospace, unlike the default base Inter in --font-family. At 14px (the font size for code blocks), it looks fine, but at the font size of the text editor, it feels weird next to Inter.

Firefox - Windows

Firefox - MacOS

Safari - MacOS

While this behavior of falling back to system defaults matches other coding focused sites like GitHub and StackOverflow, it’ll probably be better to find a specific monospace font that pairs well with the default Inter body font.

5 Likes

This should be live here in a soonish, just finishing review on the PR.

Those screenshots you have will be resolved @Alteras

This is tricky, I am not against this, but it would be a pretty big change.

We render markdown in a TEXTAREA now, to do that fancy highlighting we would need to swap it to use Ace (which we ship) or CodeMirror (which we do not) or a custom ProseMirror setup (which would be very complicated)

I personally like syntax highlighted markdown, but I think a side quest in this department would heavily distract us all from the progress being made with the rich editor.

5 Likes

I’m still wondering wouldn’t the most obvious solution be not using monospace at all. And use simple component when monospace is wanted.

But I see the difference of policy here:

  • markdown is for devs and coding
  • rich editor is for everyone else
  • if one is member of everything else and likes to use markdown, then must choose

What I really don’t understand is there real need and demand to offer monospace when creating content for writing, that is shown using totally different font.

What bugs me a lot is again feeling that something is again done by drawing border between devs and common people — but perhaps devs are a majority globally — but that feeling is propably just my issue, because everyone elese in this topic are totally happy (if font size question can be fixed).

Well, very academic topic for me, because on my forum that CSS-trick works, and my users don’t need this magnitude pointer to tell which one, markdown or rich one, they are using. And because I have feeling that meta about why and what it gives aren’t wanted or needed, it is better for everybody that I jump off — because after all, I’m not a dev and I don’t need coding/code editor, but markdown editor for content.

3 Likes

We need the change to breath for a bit, all changes are jarring when you make them. The refinements today made the change significantly less jarring.

Monospace comes with other advantages when it comes to markdown, tables are a lot easier to work with, pre-formatted text is a lot easier to work with.

I am here, listening for comments, if eventually we reach a stage where we feel this is too much due to overwhelming feedback we may revise or refine the decision.

The change today also has a side-effect which is fantastic for Discourse. Monospace meant different things to different people cause every OS has its own interpretation. People with the rich_editor enabled now have a consistent monospace experience across the product.

I totally get the feedback yesterday, but today, I am feeling a lot more comfortable with adjusted font. It is good, and it does allow me to write this:

  \(^-^)/
    |
   /\

And it looks in the composer exactly like it does in preview.

7 Likes

I agree, it makes complete sense as default.

And an opportunity for a theme component to provide more flexibility (a sticky font drop-down??)

1 Like

Thanks for the update! It looks natural, and it’s pretty comfortable now.
This small change makes a big difference, and I can already see myself getting used to it. :chefs_kiss:

4 Likes

I’m not such a fan. I find that the monospace font makes me overly aware of the fact that I’m typing in one window and the actual text is rendered in another. It evokes some LaTeX memories…

If this is gonna be implemented long-term, then I think it should have a dedicated font variable like --d-font-md-composer. Rather than the default monospace font --d-font-family-monospace. That way it can be easily changed on a site basis without affecting the monospace font.

4 Likes

I noticed that the font for the Composer here on the forum changed:

image

Don’t know if this is on purpose, or not?
If it is on purpose, I hope it’s not an update to all Discourse users, as I like the normal “Arial/Helvetica/sans serif” font. Or at least that we can change it ourselves in the admin panel.

EDIT: Since my post was a topic that got split, it kinda feels weird in this current topic, so never mind. I know it’s on purpose…


My 2 cents: I understand why having different fonts for 2 different editors could make sense, but for example Obsidian is a markdown tool, and doesn’t use monospace as the default. And as someone said, I don’t see this space as “coding” even though we can indeed add things that the “average” person wouldn’t understand, when they use the rich text editor.

I don’t know, it just feels weird, because it’s a font we don’t use on a regular basis (if at all) when we are typing text/messages. I got used to using both Discourse and Obsidian the “old” way, so it’s kinda weird to either type with monospace or use the rich text editor.

Couldn’t this be a feature each user could change?