What is meta? ×
Meta Stack Exchange is where users like you discuss bugs, features, and support issues that affect the software powering all 131 Stack Exchange communities.

I often need some effort to distinguish a Code Block from a Blockquote: overall because they share the same background.

Don't you think Blockquote elements would be more readable and distinguishable from Code Block elements if they had a different style?

For example:

  • yellow background
  • different font
  • quotation marks on top left and bottom right corners

Is it possible to improve Blockquote style? And how would you change it?

share|improve this question
7  
+1 from me; I always found it a bit confusing that the styles (except for the font) are just the same. –  Hendrik Vogt Apr 4 '11 at 15:13
3  
I don't much care for quotation marks. I think you get a lot more value out of a thin, vertical line in the left-hand margin. Super User already has this (random example). That makes it obvious the snippet is not code, but also doesn't intrude on readability. It's a minor change, but I think an improvement. –  Cody Gray Apr 4 '11 at 16:33
    
It's in a different font already. That is, if you don't put code in quote blocks :) However, somewhere you're right. I myself tend to make all quotations from the OP's post italic. But from other resources, I just keep them as-is. –  BalusC Apr 4 '11 at 16:41

4 Answers 4

up vote 9 down vote accepted

The font is already different, there is a larger left margin on block quotes, and generally code blocks have been syntax highlighted in an obvious way. However, these differences are most obvious when they are placed side by side and depending on the content/size of either they can be difficult to distinguish with their current styles when placed separate from one another.

I agree with @jjnguy that too many styles can make a page look noisy, but they can also provide clarification when the differences are obvious, but minimal, and in keeping with the overall tone of the site.

@Cody Gray's sample from Super User with the thick left border is a great example of what I'd like to see. It could look something like this:

Proposed Style

I like this for many reasons including:

  • Standard style used on many sites which helps make the meaning obvious
  • Minimal impact on page "noise"
  • Easy to implement (can be done in one additional CSS attribute)

I'd hate to see large quotation marks, italics, a large leading letter, bubbles, background images, inverted colors, or any of the other potentially horrible designs I've seen. Although, we could just go all out and do something like this:

Unicorns are Pretty

share|improve this answer
7  
disagree –  Nick Dandoulakis Apr 4 '11 at 19:59
    
@Nick D that is awesome. That might just be the best example of page "noise" I've seen since the mid 90s. –  theChrisKent Apr 5 '11 at 15:08
1  
@NickDandoulakis that's just hateful –  apaul34208 Aug 19 '13 at 2:58
    
I actually read the whole quote, and it's awesome. Edit: read it another time for fun. Even more awesome. It reminds me of Lewis Carroll's "Jabberwocky". I hope you write. –  Grantwalzer Oct 8 at 11:36

I like the current style. Adding too many different styles can make the page look noisy.

I think it is easy enough to distinguish code blocks from block quotes with the current style.

share|improve this answer
2  
I agree with both. I hate noisy pages, but I would welcome the addition of not-too-big quotation marks. –  Aleadam Apr 4 '11 at 15:16

I like how blockquotes render on Code Review. The light yellow shading makes it easier to tell quoted code from suggested code:

Code Review quoted code

It's very common to quote code on CR; if blockquotes looked like regular code blocks the way they do on Stack Overflow, I find such a change would reduce the usefulness of blockquotes:

Stack Overflow quoted code

The only indicator we get on SO, is increased indentation, as opposed to:

  • Yellow-ish background
  • Orange-ish left border
  • Dotted gray left border in code blocks, quoted or not

I don't see how these "clutter up" the site, or "add noise".

share|improve this answer

I think the bg color and font are fine but I'd like to see a very thin top and bottom border.

share|improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .