Monospace font in HTML post/page editor

[jane]

from @iammattthomas:

Right now if I'm using the HTML editor, I'm seeing HTML code in a variable-width font (Arial). This doesn't really make sense if I'm writing HTML -- Arial isn't meant for HTML code. It also imparts that font's personality onto the words, making the distraction-free HTML editor not fully distraction-free.

So I'm thinking, make the HTML editor use the monospace font stack. These are the same fonts we already use in the visual editor for <code> blocks. And then the visual editor shows visual style, the HTML editor shows raw plain text.

I've attached two screenshots that you can compare against Beta 2. If you like it, there's a tiny patch as well that I can upload to a ticket if you'd prefer.

..................

I'm in favor of this small but meaningful improvement.

[jane]

Image of editor using monospace font

[jane]

In dfw mode

[jane]

MT's patch

[markjaquith]

In [18102]:

Use monospaced font for HTML editor. props iammattthomas. fixes #17640

[toscho]

From the patch:

font-family: Consolas, Monaco, Courier, monospace;

Put "Courier New" in front of Courier. Old Windows versions (XP) have neither Consolas nor Monaco, and Courier is a Bitmap font on Windows without anti-aliasing and in very view fixed sizes.

My suggestion:

font-family: Consolas, "Courier New", Courier, Monaco, monospace;

Also note that Monaco ist not a real monospace font – the bold letters are slightly wider. Browsers usually fix that internally, so it is probably not a problem.

[azaozz]

Replying to toscho:

I would suggest removing Courier from there completely, even better: leave it only as monospace. There is no reason why we should overwrite the user's preference for which fixed-width font to use (for example I may not like Consolas on win7, prefer Courier New).

[toscho]

Replying to azaozz:

leave it only as monospace. There is no reason why we should overwrite the user's preference for which fixed-width font to use (for example I may not like Consolas on win7, prefer Courier New).

Oh, that’s much better. Maybe monospace, serif as ​suggested by Eric Meyer for admin themes with relative font sizes?

[iammattthomas]

While I recommend keeping Consolas and Monaco for reasons of readability, I'd agree with dropping Courier and Courier New from the stack. They're the fonts that browsers will default to anyway, and while Courier New is better on Windows, it's far worse than normal Courier on Mac.

[toscho]

Replying to iammattthomas:

While I recommend keeping Consolas and Monaco for reasons of readability, I'd agree with dropping Courier and Courier New from the stack.

Then we need to override this in the RTL stylesheet. Consolas has no Arabic or Hebrew letters while Courier New has. It is better not to rely on the browser’s glyph substitution here.

I still have doubts about Monaco. Reminds me of Comic Sans … but that’s a personal preference. :)

[ryan]

Agreement during bug scrub on Matt's suggestion in comment #5.

[koopersmith]

In [18118]:

Remove Courier from the monospace font stack. fixes #17640.

[chipbennett]

I would recommend reverting this change.

The HTML editor is not intended for writing primarily code, but rather, for writing primarily text, with some HTML markup.

User feedback appears to be predominantly negative:

• ​http://wordpress.org/extend/ideas/topic/return-the-html-editor-back-to-a-sans-font-instead-of-the-new-consolas-font
• ​http://en.forums.wordpress.com/topic/ugly-font-appears-now-in-html-version
• ​http://onecoolsitebloggingtips.com/2011/06/06/wordpress-html-editor-font-change/

(Yes, there is some overlap in the voices represented in these links; however, the number still outweighs anything I can find in support of this change.)

These sorts of changes should consider usability first and foremost. I don't claim to be any sort of usability expert, but based on anecdotal evidence, it appears that this change has caused readability issues for a non-trivial number of users.

[iammattthomas]

I thought it might help if I clarified my thinking behind my suggestion to switch from a sans-serif to monospace font for the HTML editor. The visual editor is a readable, user-friendly way to compose where the text is styled to look like text published on your site. The HTML editor should take a different route, then, and be a real text-only editor. And not just for writing HTML code, but for seeing what you're writing without the style imparted by a particular font. A utilitarian monospace font separates the content from the style, as it should, which is why monospace fonts are used by text editors like TextMate and newer distraction-free writing apps like WriteRoom and iA Writer.

Separate from the sans-serif vs. monospace issue is what the particular monospace we're using looks like in people's browsers. I'm on a Mac, so I see Monaco and it looks fine. Since Consolas is at the top of the stack, it's possible that it does in fact look bad depending on your OS and your font smoothing settings. There may be a solid case for using a different monospace font in the stack, but I don't think the aesthetics of the chosen face would necessitate that we revert all the way back to Arial.

[chipbennett]

That's a very reasonable approach, @iammattthomas. It does appear that the primary culprit here is Consolas, at least based on the comments in the WPCOM support thread.

On a related note: where do font-stack discussions, in general, take place? (I ask, because any further questions along font-stack lines are probably outside of the scope of Trac, and this ticket piques some curiosity.)

[Ipstenu]

Default HTML view on XP

[Ipstenu]

HTML editor forced to Monaco

[Ipstenu]

I added those images to show you what it looks like, RIGHT NOW, on XP, and what happens after I force it to monaco with css.

The 'fuzzy edges' of the Consolas font on Win XP are painful to use. I'm perfectly happy editing my htmleditor.php mu-plugin code for myself, but XP is still more popular than IE 6 and in use by a lot of major corporations who are being shafted by regulatory applications which aren't rebuilt for Win 7 yet (basically banks, governments, etc are STUCK on XP for a while, thanks :/ )

Do we need to cater to XP still, given how old it is? God no. But we should be a little BETTER at backwards compat if we can be.

[iammattthomas]

Consolas on XP would be a quite rare occurrence, I'd think, given that Consolas didn't come with XP. What you've labeled as "Monaco" is actually Courier, which your browser is using because you don't have Consolas or Monaco installed.

The "fuzzy edges" are a result of Windows XP's font smoothing and not the font itself. Given the many shortcomings with XP's typographical abilities, choosing Vista/Win7 and Mac fonts for the top of the stack and falling back to Courier for XP is the best monospace option I've seen for that platform.

[azaozz]

Confirmed what @iammattthomas said above. XP uses the monospaced font, looks like Courier New in the screenshots.

[esmi]

Replying to iammattthomas:

Consolas didn't come with XP.

It's on my XP machine. My guess is that it shipped with one of the later XP service packs - which means that most XP users will have it installed. And on this Win 7 machine, the end result is pretty awful (partly due to Consolas' very small x-height). May I suggest:

font-family:'Lucida Console',Consolas,Monaco,monospace;