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
5  
+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. –  Chichiray Apr 4 '11 at 16:41
add comment

3 Answers

up vote 10 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
4  
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
add comment

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
add comment

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
add comment

You must log in to answer this question.

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