Color of certain elements in Main site doesn't match up with the rest of the page

Question

It is obvious that the grey of the blocks and the grey in the horizontal rule don't match up with the rest of the page.

Adding a small amount of the color from the background to it could greatly improve the look.

Answer 1

Please ‘never’ use 𝚖𝚘𝚗𝚘𝚜𝚙𝚊𝚌𝚎𝚍 𝚝𝚎𝚡𝚝 on ELU

---

tl;dr

1. Please don’t use ˋbackticksˋ at all: use italics instead.
2. Please don’t use preformatted indented blocks except for tables.
3. Nonetheless, you were right about one aspect of the trouble: the color.

---

Thank you for pointing that out. While you have indeed identified a genuine problem, I am afraid that you have slightly misdiagnosed it.

The main problem isn’t so much that color of the monospaced stuff is off — although you’re quite right that it is. Rather, the greater problem is that one should never be using that 𝚞𝚐𝚕𝚢 𝚖𝚘𝚗𝚘𝚜𝚙𝚊𝚌𝚎𝚍𝚏𝚘𝚗𝚝 at all on ELU.

It looks atrocious and makes no sense here. Have you ever seen a dictionary or encyclopedia that uses garbage that looks like this? I sure haven’t. And I can assure you that the professional linguistics literature in refereed journals never does so either.

The root cause of this horrific misformatting that plagues ELU seems to be that programmers more accustomed to the programming-related StackExchange sites than they are to correctly typeset English text come to our English Language & Usage site expecting to use ˋbackticksˋ when they wish to make a use–mention distinction, which a programmer equates to making a literal out of something:

In written language, mentioned words or phrases often appear between quotation marks (“Chicago” contains three vowels) or in italics (When I say honey, I mean the sweet stuff that bees make), and style authorities such as Strunk and White insist that mentioned words or phrases must always be made visually distinct in this manner.

Here at ELU, we prefer that one set mentions in an italic face, the way reputable dictionaries always do. If I were to mention the word discombobulate, I would write it that way, never as discombobulate. See the immense difference?

All works on language work this way. Notice the way the Oxford English Dictionary (OED) employs italics in the Etymology section of discubiture when making the use–mention distinction for citing the Latin discubitura, discubit-, and discumbere:

---

Fixing your text

It isn’t just the OED that works this way. All texts that talk about language do the same thing.

So how should your text be optimally rendered? Those should respectively be a > quotation for the full sentence and then either a “quoted phrase” or a *quoted phrase* for the embedded part. One employs an italic face for the use–mention distinction here, not ˋugly monospaceˋ, which looks unprofessional.

Here follow two different alternate representations of your text, both superior to the “ransom-note look” that using an 𝚞𝚐𝚕𝚢 𝚖𝚘𝚗𝚘𝚜𝚙𝚊𝚌𝚎𝚍 𝚏𝚘𝚗𝚝 introduces.

---

Superior Formatting: #1 of 2

Here I indent your full sentence using a > instead of whitespace, which makes it look correct, and I use paired quotation marks around the “inlined” instance. I’ve put the whole thing in a <pre> ... </pre> preformatted literal block so that all markdown formatting characters are displayed as literals, not as markdown:

I need an adjective. I am describing a programming language that has
features from many other existing languages. The sentence I want to
use it in is along the lines of: 

> In short, this language is a ______ of {*list of names of other languages*}.

I know I could use “this language has features from ______”,
but this seems a better fit to me.

Here’s what that example should look like:

---

Superior Formatting: #2 of 2

There is of course a problem with using paired quotation marks for the mention case, and that is that we use quotation marks for so many other things, such as when I referred above to an “inlined” mention case, there using scare-quotes for their customary meaning. Therefore, an italic face is usually to be preferred over mere quotes. Here I also choose a bullet for the citation sentence rather than the citation indentation style.

I need an adjective. I am describing a programming language that has
features form many other existing languages. The sentence I want to
use it in is along the lines of: 

* In short, this language is a ______ of {*list of names of other languages*}.

I know I could use *this language has features from ______*,
but this seems a better fit to me.

Here’s what that should look like:

---

Exceptions to the rule

There are a few places where one has no choice but to employ the StackExchange literalizing markdown, but it is never for the use–mention case per se.

1. If ever one needs to show actual formatting characters in the markdown, like to tell someone who wants something set it italics to type in the literal characters *set in italics*. It is for this reason that I indented the two reformatted versions I displayed above, so that you could see the literal markdown characters themselves, and how it should be done.

2. For the formatting of actual tabular information, when exact column alignment is therefore required. So from this fine answer, we see:

                                     BNC    COCA       Google

     ARE NOT CURRENTLY (BEING)     18 (1)  70 (8)   72.6M (21.9M)
     ARE CURRENTLY NOT (BEING)      4 (0)  17 (0)   10.1M ( 9.6M)

Here is what that should look like:

Oh, ick!

That’s suddenly a startling grey against our otherwise tasteful field of subdued peach, like a light beige or an agèd ivory. Our normal background color is meant to suggest the color of old pages in a book, at least by intent. That awful grey splattered atop it looks like so much water damage.

Which leads to my next point, in which we return to the one aspect of your original bug report that was indeed spot on the money, and should be fixed.

---

Where you were spot on the money

Now, you might justly point out that the background color on the preformatted section is an atrocious clash with that of the site in general. That was part of your original point, and I agree with you about that. There is certainly room for improvement there.

But the actual valid uses of preformatted text are so rare that I don’t think anyone has paid much attention to the matter.

A related bug is that using indentation to make a table produces inferior results to using an actual <pre> ... </pre> block as I have done here.

---

Summary: Use Italics

But apart from those two very special — and frankly rather uncommon — instances, you do not want to use the terrible monospaced ugliness here on English Language & Usage, nor on any other non-coding site. For not only does it clash with custom and established practice, it is aesthetically discomforting in the extreme.

You instead want to use one of the other mechanisms outlined above, all of which which are less unsettling to the eye — normally italics.

---

---

Addendum for SE Staff

This is an example of the use–mention distinction citation not working in a posting.

This is an example of the
[use–mention distinction](http://en.wikipedia.org/wiki/Use–mention_distinction) 
citation not working in a posting.

Answer 2

This is what you should be seeing, Mari Lou:

I don’t know why you are not seeing them after having done those things.

Answer 3

Since this seems to have become a sort of weird-formatting troubleshooting thread, I’ll chime in as well with a bit of Macness. :-)

Safari Mobile (7.0) on iOS 7.1.1:

Safari Desktop (6.1.3) on OS X 10.

Chrome (34.0.1847.131) renders everything like Safari; Firefox (28.0) renders everything correctly; Opera (12.15.1748) renders all the fancy Unicode stuff correctly, but surprisingly renders the italics in headers wrong, ‘doubling’ the italicising (using the correct italic variant of Georgia, but faux-italicising it).