More styled CSS for some HTML elements, such as blockquote April 21, 2006 12:02 PM   Subscribe

Slightly better CSS: Could the CSS for useful elements like blockquote be improved so that quoted text from previous posts does not have to be faked with ? A now-common style of changed font, larger left indent, and line down the left side might work.
posted by joeclark to Feature Requests at 12:02 PM (64 comments total)

Foiled by the html bandit!
posted by cortex at 12:42 PM on April 21, 2006

What's wrong with the way blockquote works now?
posted by loquacious at 12:44 PM on April 21, 2006


I think he wants
something stylized, like this, which is popular on many blogs, but only I can do this after the fact by bypassing the CSS filters at the moment. Some filler text to make it clear: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
I have no idea what demand is like for such a feature though.
posted by mathowie (staff) at 12:55 PM on April 21, 2006


Nonexistent.
posted by adamgreenfield at 1:00 PM on April 21, 2006 [1 favorite]


Matt didn't seem very enthusiastic when I proposed something like this before.

I wanted him to allow something like <div class='tquote'> or <blockquote class='tquote'> to pass through the input filter and be styled correctly.

To see how it would look, cut and paste the following code into the reply window and see how it looks in the instant preview.

<b>Joe Clark </b>said: <div style='padding-left: .5em; border-left: thin solid;'>Hey watch me quote MSN:<div style='padding-left: .4em; border-left: thin solid;'>ho hum</div>yup, he said that. </div>
posted by MonkeySaltedNuts at 1:00 PM on April 21, 2006


I like the idea, but i think it would break up the normal flow that the threads have.
posted by pithy comment at 1:00 PM on April 21, 2006


From this quarter, anyway.
posted by adamgreenfield at 1:01 PM on April 21, 2006


Monkey, it's too much trouble to alllow one attribute match through and filter all else, so it'd be much easier just to set a global blockquote style in the main CSS, so that all instances of blockquote might match the one above (which probably only looks good on the default CSS theme)
posted by mathowie (staff) at 1:04 PM on April 21, 2006


I like it, but that's always been the minority position. I think a "quote" button on the toolbar (or whatever it's called) that simply creates a double indent and forced italics would be great.

imho, the benefits of a consistent appearance and easily identifiable quotes would far outweigh any detriment to the "flow" of the page.
posted by pardonyou? at 1:12 PM on April 21, 2006


Yeha it doesn't look that great on the simple theme, but an indent that had maybe a small grey line muight be an improvement over what we have, just for the normal <blockquote> tag
posted by jessamyn (staff) at 1:13 PM on April 21, 2006


I support the idea of an automagic quote button to join the others at the bottom of the post entry box, but it should be real simple and not flashy or trashy.

I've noticed very few incidents of confusion over quotes. Usually these incidents were entirely the fault of the reader and responder - be it in haste, hurry or carelessness, and not the fault of the original user of the quotes.
posted by loquacious at 1:25 PM on April 21, 2006


On one hand, I really think the lines would clutter up the page quickly and as far as blockquote goes I think undecorated is suitable.

On the other hand, I find the lack of consistency in quoting other members distracting. Everyone seems to use different scripts, some of which link to comments, some of which bold the users name, some of which do neither, etc.
posted by prostyle at 1:28 PM on April 21, 2006


#mathowie: so that all instances of blockquote might match the one above

The problem is that there is a fair semantic distinction between blockquoting an extended passage from a web page vs. blockquoting somebody's comment (which in itself may quote some comment).

You currently don't style the <quote> tag, but you do pass it through. "quote" is supposed to be an inline quote as opposed to blockquote which is supposed to be a block level quote.

Maybe you could style quote as a block element, but that might make HTML purists shriek.
posted by MonkeySaltedNuts at 1:39 PM on April 21, 2006


bah. Just quote people as though you were writing, people.
e.g.

prostyle said, "On one hand, I really think the lines would clutter up the page quickly and as far as blockquote goes I think undecorated is suitable." And that is etc. etc. etc.
posted by boo_radley at 2:13 PM on April 21, 2006


Another advantage of making a semantic distinction between blockquotes and commentquotes is that with just a little javascript you can control whether commentquotes are displayed.
posted by MonkeySaltedNuts at 2:14 PM on April 21, 2006


Monkey, for all intents and purposes, there won't be an option of blockquotes and comment quotes, it's too complicated to ask members to do those sorts of things.

So keep it simple. We're talking about yes or no, should the blockquote tag (regardless of who uses it and how it is used) be styled with a big border on one side that complements the site or not.
posted by mathowie (staff) at 2:22 PM on April 21, 2006


Not.
posted by Meatbomb at 2:28 PM on April 21, 2006


Mathowie, as a user experience guy at a fairly large firm, allow me to suggest two things (which you can, of course, ignore completely if you like):

1. Border or no border is not important; the borders, brackets and other elements accompanying quotes are generally used as embellishments for an indent, or to create an easily-noticed indent when one is hard to create (such as text emails, hence the use of '> '.) So border or no border is irrelevant; your best bet is to stick with a simple indent of all lines, and include the emphasis, as that has become the de facto standard around these parts.

2. If you're going to make this change, you're going to get a lot of "how do I do that indent?" from people. They're capable of using emphasis, so blockquote won't be hard -- but I strongly recommend you pop a link below the comment field that says "How to format your post" and link it to the details.
posted by davejay at 2:33 PM on April 21, 2006


boo_radley, I'd be with you 100% if MetaFilter didn't already have a de facto standard (adopted from the internet community at large.)
posted by davejay at 2:35 PM on April 21, 2006


Given only one type of quote, I would vote for a single left verticle border. Just keep the margin and padding small enough so you can embed them without looking silly
Like this example
where it seems there
is too much spacing
around
the edges.
There should really not be any right adjustment.
posted by MonkeySaltedNuts at 2:41 PM on April 21, 2006


already have a de facto standard

Bingo—quoting on Metafilter works well now. Folks rarely miscommunicate over quotations as is, and the interface is nicely minimal. I vote leave it alone.
posted by cortex at 2:43 PM on April 21, 2006


but blockquote isn't typically used for quoting other metafilter members speaking (and I'm not proposing we start).

Blockquote is only used once in a while and almost always when people are quoting offsite material. In those cases, making blockquote look more prominent through the use of CSS seems like a no-brainer and I was just double-checking before I added something rules to the stylesheets.
posted by mathowie (staff) at 2:49 PM on April 21, 2006


Sorry, I only offered blockquote because of this from an earlier comment of yours:

We're talking about yes or no, should the blockquote tag (regardless of who uses it and how it is used) be styled with a big border on one side that complements the site or not.

So I assumed you'd decided to set up blockquote for user comments. My aplogies if this is not the case. Pretend I'm not here. ;)
posted by davejay at 2:53 PM on April 21, 2006


If you add a left vertical bar to make blockquotes more visable then you don't need such big margins/padding to make them stand out.

In that case maybe people would start using them for userquotes. My Comment script lets people set what they want to wrap userquotes in.
posted by MonkeySaltedNuts at 3:14 PM on April 21, 2006

wait, we have blockquote functionality?
have we always had that?
posted by shmegegge at 3:15 PM on April 21, 2006

we've always had blockquotes.
Oh, yes.

posted by boo_radley at 3:26 PM on April 21, 2006

But blockquote here is styled badly. It adds too much vertical whitespace so people don't use it.
posted by TimeFactor at 3:49 PM on April 21, 2006


I didn't mean to come off snarky. It doesn't look like Metafilter is styling blockquote by itself at all; it comes too widely spaced out of the box. Blockquote would look better, and maybe be more widely used here, if the spacing were decreased.
posted by TimeFactor at 4:02 PM on April 21, 2006


And in conclusion: widely. Widely widely widely.
posted by TimeFactor at 4:04 PM on April 21, 2006


MonkeySaltedNuts: If you add a left vertical bar to make blockquotes more visable then you don't need such big margins/padding to make them stand out.

In that case maybe people would start using them for userquotes.


That sounds terrible! What is wrong with this userquote style? It seems to be quite standard already..
posted by Chuckles at 4:07 PM on April 21, 2006


I'm against making it easy to quote others. The less this place looks like a newsgroup, the happier I am.

And I can't believe nobody has tried posting MonkeySaltedNuts example.

Joe Clark said: Hey watch me quote MSN:ho hum yup, he said that.
posted by Roger Dodger at 4:09 PM on April 21, 2006


Yep, ugly.
posted by Roger Dodger at 4:09 PM on April 21, 2006


#Roger Dodger: I can't believe nobody has tried posting MonkeySaltedNuts example.

I said to look at it in live preview cause input filters strip out the <div>s.

Well it seems like the filters are not stripping out the </div>s which causes the uglitude.
posted by MonkeySaltedNuts at 4:25 PM on April 21, 2006


Roger Dodger: It looks OK in live preview but Metafilter's post filtering completely borks it: it strips the divs MSN added but not their matching closing tags, then tries to match the now-unmatched closing div tags with brand new div tags, but without the original attributes.

And on preview someone's cleaned it up, somewhat.
And on second preview, what MSN said.
posted by TimeFactor at 4:26 PM on April 21, 2006


it adds to vertical space because people use it poorly, mostly because of mefi's friendly "returns are equal to breaks, all the time!" comment parsing.
look at these:
----
poor
---
versus
---
good
---
You can cram your blockquote in one line, and it acts normally. Adding nice returns gives you extra, awful space. If matt stripped out a return after the opening tag, and one before the end tag, it'd conserve a lot of space.

But really, quote people correctly. It's rare that people pluck out more than a sentence from others' comments.
posted by boo_radley at 4:28 PM on April 21, 2006


TimeFactor: Roger Dodger: It looks OK in live preview but Metafilter's post filtering completely ...

Okay, that is the one I don't get. Shouldn't that colon be a comma? like:
Roger Dodger, it looks OK in live preview...
Where did this colon to indicate directed comments come from? (Am I completely nuts here?)
posted by Chuckles at 4:40 PM on April 21, 2006


Chuckles:
>MonkeySaltedNuts: If you add a left vertical bar ...
>
>That sounds terrible! What is wrong with this userquote style?

Because if you want to userquote someone userquoting it doesn't extend, and you have to come up with some non standard syntactic device. Leftbar blockquotes/divs nest nicely.

You don't have to use them if you don't want to or don't need to. Italics often works fine. But to prohibit their use because of fears that they might be overused goes too far.
posted by MonkeySaltedNuts at 4:46 PM on April 21, 2006


Where did this colon to indicate directed comments come from? (Am I completely nuts here?)

Common protocol in salutations of correspondence. Bleed over from email to comments, perhaps.

I parse the following examples differently:

Roger Dodger: I'd recommend a brisk dodgering.
Roger Dodger: I'd recommend a brisk dodgering.

The first is a quote of Roger speaking of dodgering; the second is a recommendation directed at Roger.
posted by cortex at 4:49 PM on April 21, 2006


Leftbar blockquotes/divs nest nicely.

No, they just nest recursively. My personal feeling is that there is rarely anything nice about how nested blockquotes look in a forum—that is in fact one of the things that stands out in my mind as characteristically ugly about most forums.

That's my aesthetics, and I don't mean to suggest that I'm right; merely that objection to this quoting style is a reasoned position and not merely a misunderstanding of your suggestion.

Nested quotes happen rarely on Mefi, and as you say, ad hoc devices are deployed in those rare cases, to good effect.

You don't have to use them if you don't want to or don't need to.

Of course I wouldn't have to use them if I didn't want to; but making it push-button easy for others to do so is tantamount to pouring a big bucket of ugly on the metafilter that I am so fond of.

But to prohibit their use because of fears that they might be overused goes too far.

And yet we have seen a number of html tags prohibited for just that reason—tags which had a much less fundamntal impact on the look of discourse here than would an automated user-quote feature.
posted by cortex at 5:00 PM on April 21, 2006


Chuckles: No, you're not completely nuts there. I might use a comma if I knew there'd be no comments intervening between yours and my response. Otherwise it seems too conversational, too "Chuckles, my good friend, let me just say...", when what I want is "Chuckles: this comment is directed at you". The disjointed nature of discussion online makes me want something more attention-grabbing than the comma provides. I realize that it may conflict with the "someone: wrote this earlier" quoting format but that format isn't widely used in online forums, I don't think.
posted by TimeFactor at 5:19 PM on April 21, 2006


cortex: we have seen a number of html tags prohibited ... less fundamntal impact on the look of discourse here than would an automated user-quote feature.

There are already several "automated user-quote" scripts and these features are available to everybody including noobs.

I've been on numerous serious mailinglists and most participants learn to trim their userquotes even if they include embeddings.

Are you saying social engineering would not kurb excessive userquotes on MeFi?

Note. In my above handcrafted example response to Chuckles, not only did it take some effort to make it, but I also made an error - 'MonkeySaltedNuts' should not have been in italic.
posted by MonkeySaltedNuts at 5:26 PM on April 21, 2006


I don't really care about you 'other members', I want to quote with the blockquote tag, and goodness, the vertical spacing on it is hideous, please decrease it. Khtxbye.
posted by Firas at 5:33 PM on April 21, 2006


I quote people pretty often because I think it is a necessary clarification in an unthreaded discussion. And I greatly support the no-threaded discussion policy.

For awhile I used blockquote; now I just use the (redundant) doublequotes + emphasis with no attribution. I'd prefer attribution, but it's more trouble than I've found I want to go to.

When I use blockquote—and it isn't the only tag with this problem—I remove the lf/cr from my comment so that it formats correctly on display.
posted by Ethereal Bligh at 5:39 PM on April 21, 2006


Why can't blockquote just be styled with a slight left padding and italics, mimicing the way most quotes on Mefi are done with <i>? The left border is a suggestion, not a sacrosanct requirement.

blockquote {
   margin: 0.8em;
   font-style: italic;
}
blockquote:first-line {
   padding-left: 0.5em;
}
posted by Firas at 5:41 PM on April 21, 2006


Ethereal Bligh: I'd prefer attribution, but it's more trouble than I've found I want to go to.

If you can use my firefox/greasemonkey script then attribution is just a button click. You can even style the attribution somewhat and I welcome suggestions for other ways to style it.
posted by MonkeySaltedNuts at 5:48 PM on April 21, 2006


MonkeySaltedNuts: If you add a left vertical bar ...

Chuckles: That sounds terrible! What is wrong with this userquote style?

MonkeySaltedNuts: Because if you want to userquote someone userquoting it doesn't extend,

Could've fooled me :)

Thanks cortex, TimeFactor, for the clarification. Just that I am more used to the conversational form, I guess (and it doesn't conflict with my chosen userquote style)..
posted by Chuckles at 5:48 PM on April 21, 2006


and it doesn't conflict with my chosen userquote style

Okay, not a conflict, since the italics make the meaning clear, but you know.. similarity..
posted by Chuckles at 5:51 PM on April 21, 2006


Chuckles: "Could've fooled me"
seems to think that any tree structure can be linearized without brackets.

Yes such linearization is nice, should be strived for, and in simple cases can be aided by context.

But more complex cases that are converted to simple (unbracketed) order just introduces confusing ambiguities.

Maybe Chuck wants to argue that more than one embedding is beyond most joe-sixpack comprehension and should be prohibited and such people will abuse a quoting opportunity to make themselves look important and can't be toned down through the normal social engineering.
posted by MonkeySaltedNuts at 6:46 PM on April 21, 2006


Why can't blockquote just be styled with a slight left padding and italics, mimicing the way most quotes on Mefi are done with i?

Because I am not proposing we all begin to use blockquote here for quoting other comments. This thread has spiraled off course again and I think people are forgetting my question to other users here. One person asked originally if the blockquote class could have some extra style added to it, which is a good idea since blockquote is used almost exclusively for off-site text being quoted here. I was looking for opinions on it and suddenly people are wanting to use it to create a threaded discussion board when that wasn't the question.

Style up the stock blockquote, yay or nay?
posted by mathowie (staff) at 7:22 PM on April 21, 2006


Firas: can't blockquote just be styled with a slight left padding and italics

If you want a blockquote to be styled italic then hand or automatic wrap it because italic should not hold for every blockquote. Some automatic user quoters let you give a default "italic" wrapper to mean "quote".

However yes as of now, MeFi adds no blockquote style and the default margins/padding are ugly and way too big. A left vertical line to signify the quote would permit a lot of the useless white space to be shrunk.
posted by MonkeySaltedNuts at 7:31 PM on April 21, 2006


mathowie: style up the stock blockquote, yay or nay?
YEA because it is so lacking and big. Vertical lines can reduce the need for bogus whitespace.

mathowie: suddenly people are wanting to use it to create a threaded discussion board when that wasn't the question.

I don't think anybody here (I guess you think mainly me) wants to make MeFi into a threaded board.

I just want to userquote sombody that userquotes someone else in a standard manner for which there is no standard idiom at MeFi and you seem to be actively discouraging any method to do this.

Yes, 10 deep userquotes is a scourge and I would hope such practioners would be laughed away or sanctioned.

But is that any reason to ban (embedded) user quotes.
posted by MonkeySaltedNuts at 8:28 PM on April 21, 2006


Style up the stock blockquote, yay or nay?

I don't care too much either way (leaning towards nay), but I would like the blockquote vertical whitespace to be tightened up.
posted by stavrosthewonderchicken at 8:45 PM on April 21, 2006


Style up the stock blockquote, yay or nay?

Nay, except as stavros says: kill some of the excess padding. Half a line top and bottom would be plenty.
posted by cortex at 8:45 PM on April 21, 2006


The excess whitespace is from line breaks, not the CSS.
posted by mathowie (staff) at 9:29 PM on April 21, 2006


But comments containing blockquotes end up taking too much space, whether the space is from the blockquotes themselves or the line breaks that invariably bracket them. So removing space from blockquotes in CSS will take us to the same desirable destination: less vertical whitespace.

So, I vote yay.
posted by TimeFactor at 9:57 PM on April 21, 2006


mathowie: The excess whitespace is from line breaks, not the CSS.

You are talking about only the vertical excess whitespace. The horizontal excess white space is caused by relying on the the default CSS to layout a 'blockquote'.

I can partially circumvent extra vertical whitespace by avoiding line breaks. Nothing now can prevent the horizantal whitespace.

Tight styiling of a blockquote may prevent the horizontal white space.
posted by MonkeySaltedNuts at 9:59 PM on April 21, 2006


horizontal whitespace is fine, a blockquote is supposed to be indented.
posted by mathowie (staff) at 10:04 PM on April 21, 2006


Precisely. It's the vertical whitespace that's a bit excessive. I'm quite certain that could be tweaked, but it's not really a major issue.
posted by stavrosthewonderchicken at 10:12 PM on April 21, 2006


"I was looking for opinions on it and suddenly people are wanting to use it to create a threaded discussion board when that wasn't the question."

Unless I missed someone else's comment to this effect, I think you've just misunderstood me. Because we don't have comment threading (a decision with which I very much agree) I think it becomes more important to quote people so that the conversation remains intelligble. Seems like someone earlier had mentioned that quoting wasn't important here. I greatly disgaree. It's important here specifically because we're not threaded.

One of the reasons I stopped using blockquoting to quote other posters and just relied on the non-contextual doublequote+italic marking is because I'd have to fiddle with my text to avoid the extra vertical whitespace you get when you use the blockquote tag. It's not really "extra" whitespace, since it's working as designed: a blockquote is a seperate block of text where doublespacing is implicit. The problem we're having here (and most people elsewhere) is that entering plain text in a discussion forum that becomes markup really blurs the content/context distinction. It's using those br's that are causing the problem. Double-spaced paragraphs that users enter in the textbox should become html paragraphs with no breaks transliterated. Because, in fact, that's what these are.

The problem then becomes what to do when people want to control whitespace for some other purpose. But that's what some of the other markup tags are for. If you supplied them in the textbox toolbox, strip everything else particuarly breaks, and made paragraphs actually be paragraphs, the whitespace problem would be solved.

Or you could tweak the CSS of the blockquote style. Which would be easier, but even futher away from the whole point of html.

"If you can use my firefox/greasemonkey script then attribution is just a button click."

I've decided I just don't like greasemonkey and greasemonkey scripts. They're too much "hacks" to me.
posted by Ethereal Bligh at 11:34 PM on April 21, 2006


original post: Could the CSS for useful elements like blockquote be improved so that quoted text from previous posts

matt: One person asked originally if the blockquote class could have some extra style added to it, which is a good idea since blockquote is used almost exclusively for off-site text being quoted here

you've missed the point.
posted by andrew cooke at 5:43 AM on April 22, 2006


If you want a blockquote to be styled italic then hand or automatic wrap it because italic should not hold for every blockquote. Some automatic user quoters let you give a default "italic" wrapper to mean "quote".

Well, to put what I said in context, using <blockquote> and <q> instead of <i> to mark quotes is a semi-religious issue for me and I suspect also Joe Clark ("I am the biggest pigheaded rat bastard in the world where it comes to Web semantics. Nobody holds a candle to my shit."), and others (ie., it's the only proper way.) Whatever though.
posted by Firas at 11:07 AM on April 22, 2006

I have no idea what demand is like for such a feature though.
Nonexistent.
If it were nonexistent it wouldn’t have come up. This is hardly a narcissistic request: Even crappy BBS software gives you a QUOTE button that, in many implementations, simply uses a styled blockquote.

I presume many denizens of the Grey Zone here are aware that blockquote is proper semantics and italics aren’t.

(Errant italics in my original question were not present on preview, so I dunno what happened there.)
posted by joeclark at 1:56 PM on April 22, 2006


Firas, I do indeed seek improved semantics. But we already have those here. We can already use blockquote. It’s the appearance that is in question.
posted by joeclark at 2:02 PM on April 22, 2006


Uggh. What a mess. I use italics to quote other commenters and blockquote to quote blocks of text from a site that would be hard to read as italics. It works OK as-is.
posted by smackfu at 7:12 AM on April 24, 2006


« Older Call for Submissions - Compilation Album   |   More Fantastic Comments Please Newer »

You are not logged in, either login or create an account to post comments