WordPress.org

Make WordPress Core

Opened 9 years ago

Closed 9 years ago

Last modified 8 years ago

#17640 closed enhancement (fixed)

Monospace font in HTML post/page editor

Reported by: jane Owned by: markjaquith
Milestone: 3.2 Priority: low
Severity: minor Version: 3.2
Component: Editor Keywords:
Focuses: Cc:
PR Number:

Description

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.

Attachments (5)

posteditor.png (131.4 KB) - added by jane 9 years ago.
Image of editor using monospace font
fullscreeneditor.png (146.6 KB) - added by jane 9 years ago.
In dfw mode
monospace.patch (904 bytes) - added by jane 9 years ago.
MT's patch
default-xp.jpg (41.1 KB) - added by Ipstenu 8 years ago.
Default HTML view on XP
my-xp.jpg (43.4 KB) - added by Ipstenu 8 years ago.
HTML editor forced to Monaco

Download all attachments as: .zip

Change History (20)

@jane
9 years ago

Image of editor using monospace font

@jane
9 years ago

In dfw mode

@jane
9 years ago

MT's patch

#1 @markjaquith
9 years ago

  • Owner set to markjaquith
  • Resolution set to fixed
  • Status changed from new to closed

In [18102]:

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

#2 follow-up: @toscho
9 years ago

  • Cc info@… added
  • Resolution fixed deleted
  • Status changed from closed to reopened

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.

#3 in reply to: ↑ 2 ; follow-up: @azaozz
9 years ago

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).

#4 in reply to: ↑ 3 @toscho
9 years ago

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?

#5 follow-up: @iammattthomas
9 years ago

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.

#6 in reply to: ↑ 5 @toscho
9 years ago

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. :)

#7 @ryan
9 years ago

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

#8 @koopersmith
9 years ago

  • Resolution set to fixed
  • Status changed from reopened to closed

In [18118]:

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

#9 @chipbennett
8 years ago

  • Cc chip@… added

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:

(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.

#10 @iammattthomas
8 years ago

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.

#11 @chipbennett
8 years ago

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
8 years ago

Default HTML view on XP

@Ipstenu
8 years ago

HTML editor forced to Monaco

#12 @Ipstenu
8 years ago

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.

#13 follow-up: @iammattthomas
8 years ago

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.

#14 @azaozz
8 years ago

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

#15 in reply to: ↑ 13 @esmi
8 years ago

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;
Note: See TracTickets for help on using tickets.