Some improvements to blockquotes

Question

Update

Sorry for the delay! I’ve been thinking about this feedback in between my other projects, and I’ve landed where I’ve started 😕

I’ve made sure to continue highlighting spoilers in gray. The differentiation from normal blockquotes is super important since their behavior is so different. I explored keeping spoilers yellow, but that still has the same theming issues throughout the network. Red seemed too powerful, with its error connotations.

I understand completely that folks are using blockquotes to highlight images. However, I don’t think that’s a cowpath we want to formally pave. I’m ok with being opinionated here—blockquotes should be used for quoting, not as a way to highlight images. I understand that this will be frustrating to Machavity who made excellent points about differentiation in his answer, but I don’t think image highlighting ought to dictate how blockquotes are styled.

I’m also cautious of adding borders to images as explored by user1306322 for the same reasons and for the additional fear of being too prescriptive in how we display images there.

It’s a tough one! I went back and forth with the design team and I still think this is the best path forward.

Original post

We’re making a few changes to blockquotes soon. Historically, we had a bit of feedback that the yellow backgrounds were overpowering, reducing the contrast of the quote itself. The yellow border also lacks contrast with the background. Others have indicated that there should be more visible differences between block quotes and spoilers and between code and quotes.

These yellows also compete with theming in our communities, especially those with backgrounds that aren’t perfectly white like English Language & Usage and Role-Playing Games.

We’re proposing we switch to a single gray bar in our blockquotes. This should fix those theming issues and make it easier to distinguish between quotes, spoilers and code.

This will also improve blockquote nesting, since our current nesting is a mess because the darker yellow bar is barely noticeable on the paler yellow background.

Spoilers should pretty much behave exactly the same way. More room for later improvements there.

Here’s how our current blockquotes look. You can click to expand:

Here’s what we propose:

There is a lot of prior art out there for this approach. GitHub has styled theirs this way for a long time. So has Slack.

Let me know what y’all think. I think these changes will be an improvement, and I hope you do too.

Huge thanks to Catija for gathering some meta posts on blockquotes and creating an awesome blockquote playground post for testing.

Answer 1

The blockquote yellow does two things

1. Indents
2. Differentiates

I feel like this focuses on #1 and leaves out #2. For simple uses it would be fine, but when skimming long Q&A I often use the yellow blocks to focus on what the person is saying, rather than the quotes. Yellow may not be the answer, but removing the colored block entirely doesn't seem useful.

Answer 2

This is a retrograde step for sites that need quotes to be differentiated from text.

While I agree that there is a need to differentiate spoilers and quotes, and the light grey for spoilers works quite well to do this, removing the yellow background from quotes makes them less clear and much harder to differentiate when reading a question and answer.

Sites like RPG Stackexchange have questions and answers that need to quote rules text from the game systems they are discussing. Having that rules text highlighted both distinctly and differently to the regular text is important, as it clarifies what text is in the author of the post's "voice" and what text is from the game system itself.

For example, this snippet from a recent answer on RPG Stackexchange:

---

---

The quoted text is from the rulebook for a specific game. It's point is to backup the answer, but be distinct from the answer text. When reading this answer, the quoted section is now less clear than it would have been yesterday that it is different to the rest of the answer.

Github and Slack are mentioned as examples of prior art in this respect, but those sites have a different focus to stackexchange.

Slack allows for instantaneous messages between colleagues. The messages it is optimised for are therefore short and ethereal. They are also being exchanged between people who are intimately familiar with the message content, since they are communicating about their work and livelihoods. There isn't as much need for a particular slack message to be revisited once a relatively short time period has passed. On Stackexchange however, questions and answers are expected to have a long life, and how they are presented is significantly more important.

Similarly, Github is a site primarily focused on code, specifically repositories of different collections of code. Comments on the code within those repositories are (usually) focused on a specific change made at a specific time. They are similarly ethereal. In addition, these comments do not need the same level of differentiation between quotes and comment text, as the audience reading them are going to be experts on the specific code repository being commented on and the specific topic being discussed. This is not the case on stackexchange. Here we expect the answerers to be experts, but the readers of those answers will generally be non-experts, looking for an answer given by the experts. Thus having strong differentiation between quoted and non-quoted text is important here.

If having the transparent background is felt to be important, then some other measure should be used to indicate that the text is quoted. For example, in news articles and academic texts, quotes are quite deeply indented (and sometimes formatted with a different font):

---

---

Increasing the indentation on the quote formatting would go a long way to giving the differentiation that is needed. This may, however, run into issues with right-to-left typed languages that the solid background colour did not.

Answer 3

See my answer on EL&U and tell me the new blockquotes is an improvement. At a glance, the citations and my words look pretty much all the same now.

Please bring back "block colour"; change the sickly yellow tone to pink, make it azure, make it more striking and different from the rest of the sites; why does Stack Exchange have to be the same as Slack or GitHub?

Do you know what the single gray bar says? It spells drab. If the aim was to make quotes look dull and lacklustre, then the design team has achieved exactly that.

Could changing the gray bar to emerald green or even funky purple help give the content a more lively appearance ? I like Aryun Beezadhur's version

One last thing before I forget, what about users new and/or with no IT engineering background? Is the gray bar self explanatory to them? Was the design tested on people who were not "Stackers" or employees? I mean, I know today that a piece of indented text represents a quotation but would a newcomer to any of the language or non-technical sites in the SE universe?

UPDATE

Monday 16 March, 2020

In the highly prestigious The New York Times, quotations are normally differentiated by the use of double curly quotes while single curly quotes are used for nesting quotes.

Occasionally, the American newspaper uses the single gray bar to distinguish quotations from the rest of the article; however, they also reduce the font size.

Note how the first snippet with its stark white background blends seamlessly with that of Meta's. With the second snippet, I added the gray bar, now it is clearer that the enlarged font (on the SE mobile site it actually appears smaller) is not due to some HTML wizardry. But how many users on non-technical sites will actually bother to add blockquotes to a screenshot?

Answer 4

Across the network blockquotes are by far more commonly used than spoilers, so it seems unfortunate to sacrifice the readability/identifiability of blockquotes to differentiate them better from spoilers.

(This change would seem like a good idea if the usage of quotes vs. spoilers was something like 1:50, but across the network it's probably more like 50000:1.)

I totally understand the idea of making them visually distinct, but would suggest reverting the change for blockquotes and adapting the design of the spoilers instead.

(For example, by using a slightly different shade of yellow, or a subtle texture/pattern for the yellow in spoilers that "covers" the spoiler and disappears on reveal.)

Answer 5

Visually displaying the quotation marks, as well as the color differences, may help.

e.g. (Using "FontAwesome" Symbols)

Answer 6

I thought stackoverflow started out as being a programming site...Let's see:

• Python documentation uses color.
• Java API uses color.
• Even MSDN has color (verifiable here.)

Now we're supposed to go ASCII retro black&white and consider that better? No amount of rationale would lead me to believe that. (SO is not a .txt file, I don't recall seeing 1 single spoiler on SO that would justify/motivate losing color in quotes.)

I don't believe the "github" comparison either, it's not meant for intense SE style interactions read over&over, but check documentation on readthedocs it has plenty of color in key quotes.

Answer 7

I'm all for the general idea, and I'd like to see higher contrast ratios across the board at SE.

However, this poses a slight issue with images. Quote markup is often used to provide a border around images that have a light background that mixes into the page background. Especially with screenshots, it makes them clear and less confusing as they stand out as separate images rather than appearing to be part of the UI.

The way that your proposal currently works, it will end up breaking this border around existing images, and no longer provide the benefits that it previously provided. I'd highly recommend searching this Meta site for images, especially within my posts; you'll see many cases where others and I have used quote markup as a means of providing a nice border around images that would otherwise mix into the background.

Can we at the very least please provide an alternative way for providing such borders that doesn't involve (ab)using quote markup? Also, if possible, can we automatically rewrite images that are the sole part of a given instance of quote markup to use this new method, so that previous posts that were using it won't need to be bumped to be fixed?

Answer 8

Note that this did not solve the problem with spoilers you wanted to solve. Uncovered spoilers still look exactly like quotes:

If you click this spoiler to permanently uncover it, it will look just like the quote below.

This is a quote.

Update: With further changes to formatting, this is now obsolete.

Answer 9

This is IMHO totally counter productive.

There might be some remote cases where the nesting is better rendered with the left bar style, but for the most part you are breaking the intent of posters on SO who want the contrast provided by the light-yellow background.

This move does not fix any real problem. You should at least apply the common sense wisdom: if it aint broke, dont fix it.

Was there a vote on this change? Who makes this kind of decision?

PLEASE Change it back!

Answer 10

I tried to live with this for two three months now, and I gotta say: I still really miss the older layout.

I understand the problem with spoilers and design on some communities with different background colors, and I appreciate the improved nesting of quotes. I'm also not worried at all for those people abusing block quotes to highlight images; that's not what this is about. But for quoting from the question or documentation as part of an answer, the change has been a real loss for readability of block quotes throughout the big Stack Overflow site.

---

"When you have people adding things like horizontal lines, extra quote marks, and italics to make the quotes stand out more, it's strong evidence you've made things worse, rather than better."

---

I especially dislike those work-arounds because some of the formatting options used to accomplish them are supposed to have different semantic meanings in html. In other words, this change has effectively also made things worse for people who rely on assistive technologies.

We don't need to go back to the yellow background, but you should do something to better distinguish block quotes from other text. More indentation, brighter-colored bar, font adjustment, I don't care. What we have now isn't enough.

Answer 11

Suggested compromise

The major design goal of this change appears to be to remove the "overpowering" background:

Historically, we had a bit of feedback that the yellow backgrounds were overpowering, reducing the contrast of the quote itself. The yellow border also lacks contrast with the background.

Yet, according to users, differentiation is also important:

Having that rules text highlighted both distinctly and differently to the regular text is important, as it clarifies what text is in the author of the post's "voice" and what text is from the game system itself.

So, it looks like the solution is just to use a gentler color, and perhaps a border? (Probably only a border on the outermost blockquote)

With nested blockquotes, something like

Answer 12

I agree with most of what has been said so far in the other answers. Quotes are intended to be separate from the main content, and this change makes it harder to tell apart quotes from other text. I tend to skip it automatically because I just see it as indentation, and not a quote.

You mentioned GH, but took their quote entirely out of context. This screenshot is from their markup guide:

See how the quotes slightly change the color of the text to differentiate the quotes? I'm not much of a fan of that either (especially when pictures get involved), but it's still possible to tell the quotes apart from other text.

Speaking of images, a colored background makes it a lot easier to tell apart from the page itself, especially when the image color matches the website background color. From the question:

What I see with CSS reverting the change (see the end of this answer):

Other sites take other approaches. Medium, as far as I can tell, enforces italics on blockquotes, and has a significantly darker line. You use a color that nearly blends into the page. Other sites take various other approaches. Some sites add lines at the top and bottom, with a quote in the middle of the line. Others use a colorized line with a quote. Text size reduction also happens from time to time. The new quotes on SO just contain a grey line, with no text differentiation. It does, in no way, stand out as a quote.

Slack and Discord take the same approach, though:

But Slack and Discord has one thing in common; they're chat services. They're not massive, public websites on the internet where formatting matters a whole lot more.

By all means; do redesign the blockquotes, but please don't throw the differentiation aspect out the window while you do.

---

Until this gets changed or reverted (preferably the first), I've made a userscript and a stylus script (stylesheet? iDunno) to revert back to the old quotes. It's not optimal, but it maintains the contrast for those who want it. It won't change it for everyone, obviously, but it's a workaround for those of you who want it.

• TamperMonkey (direct install). Note: slower than Stylus (tiny delay before the userscript kicks in)
• Stylus (haven't found a way to install automatically; copy it and paste it into the "import" dialog in stylus)

Update: should also work fine with dark mode now. Thanks animuson! (TL;DR: --yellow-050 as the background color instead of a hard-coded hex value extracted from the internet archive)

Answer 13

I like the loud coloration for blockquotes as it makes the content appear foreign in the post which a quotation actually is.

However I consider the unlimited availability of infinite depth quote something of an

antifeature

Answer 14

I recreated for the most part the post in the example screenshot here in the sandbox, and here's my spin on your proposition. Current style on the left, my variant on the right.

In blockquote removed background-color, changed border-left to 4px solid #ccc.

To .spoiler added background-color: #eee; and border-left: 4px solid #ccc;

To the existing style selector .post-text blockquote img adding outline: 10px solid #ddd really helps to set it apart from the white background.

Even from this reduced screenshot size the quote blocks are immediately recognizable.

---

Answer 15

If the reason why you made this change was to support the dark theme I'd be be happy if instead, to support that, you used the same dark yellow which you use for the right-hand sidebar on SO, i.e.

Answer 16

Quotes look too much like code.

Here's a real example from a question on the front page of SO.

The author had an errant > in the question.

It looks exactly like bad code markdown, which is frequent with copy-pasted code and new members.

Like so:

---