Usability: enable BLOCKQUOTE by default

Agreed on all fronts. I cannot think of any reason not to include blockquote, and I was beaten by this before on standard Drupal installs. Having nice presentation for blockquotes in Garland and Minnelli might be the hardest part here though. Are you going to get started with a patch?

Reviewed and tested. Good to go.

Hm, the patch only includes changes for bluemarine and Garland. We know Minnelli inherits from Garland, so this should not be fixed there. I also checked other core themes, and they have blockquote support already, so those are done.

While this thick line is not the sexiest solution, it kind of works, and even allows us to make this recolorable, if we use one of the few colors fixes in Garland. So I picked the link color, which allows the blockquote line to adapt to the recolored theme.

Sorry guys, I got a post-commit mail from Steven Wittens where he says:

[in Garland] one of the most prominent design features is the use of soft, subtle shadows and gradients to delineate layout, accentuated with thin borders that disappear into their surroundings. This change does not fit in by any measure.

Rolled back. So unless you come up with something sexy fitting exactly into Garland, this is not going to make it.

I can very well understand Steven, but it would have been helpful if he came up with a better idea. I think we should definitely get ‹blockquote› in, the looks are important but secondary to the functionality.

http://acko.net/blog/on-not-doing-drupal-anymore

has anybody thought about asking a designer? Such as Stefan Nagtegaal?

I'm not a designer by any means, but I have several suggestions that might improve the look (or might not; I haven't even tried these out in an image editor) without grossly deviating from the "vertical bar" concept:

- Make the bottom end of the bar fade into the background?
- The line could be a bit thinner.
- The whole bar could be a gradient going from dark to light.
- The color of the bar itself should also be lighter in relation to the colors on the rest of the page.

I might suggest putting a very light gradient background behind the whole quote area, but I fear that would interrupt the flow of the rest of the text. I've seen "quote boxes" and while they can work for quoting a longer body of text, they absolutely ruin the text flow if you quote short paragraphs, especially when responding to a text point by point. Limiting the decoration to a single bar on the left side is less obtrusive.

I'm no designer either, so I nicked the css/background applied to Garland's fieldsets as that could be good starting point. Here's the css (which is 90% identical to the fieldsets, just changed some margin/padding), and a screenshot with some devel generated content.

Could do with some refinement, but I'd prefer to have opinions on the general approach before getting into it.

blockquote {
  border: 1px solid #d9eaf5;
  background: #fff url(images/gradient-inner.png) repeat-x 0 0;
  padding: 1em 0.5em;
}

Not bad at all! I still believe that a horizontal divider is more obtrusive than a vertical bar, but in this case the border is so light that it hardly distracts.

Also, when starting on this I immediately thought, "it'll just look like a fieldset", but I don't think it does really. I know we all know what a garland fieldset looks like, but here's one anyway for direct comparison.

To apply a subtle gradient with the images we already have;

blockquote {
  padding: 0 0 0 15px; /* LTR */
  margin: 1.1em 40px 1.1em 35px; /* LTR */
  background: url(images/bg-content-left.png) no-repeat -45px -41px;
  font-style: italic;
}

catch: I think there is a definite gradient overload in your approach.

I have produced a screenshot of theborg's change in #17 on Garland with default colors. It could use just a tiny bit more substance (perhaps use a section from higher up in the gradient image?) but it blends in exceedingly well.

Image attached. FF on linux.

Oops. Your screenshot shows something that mine didn't, but which is kind of obvious in retrospect - the bar fades entirely after about 5 lines of quoting. If you are quoting anything much longer - say, a multiple page article - in entirety, the "bar" will become little more than a tiny "icon" in the top left corner of the quote. I'm not sure if this is bad, though.

I think there ideally ought to be something to designate the end of the blockquote. Wouldn't be hard to make the 'fieldset' gradient shorter so it's a bit less intrusive on the first line of text.

Added a patch with #8 + #17 modified to be longer.

Two things to note:
- to add one more background image we need a wrapper in or outside blockquote,
- I left the original border to the rtl css file, unfortunately css is left oriented.

I don't see how to improve rtl so marking this to review

- On testing this patch in an rtl locale, any bar, gradient or not, failed to show up entirely. The only thing distinguishing the quote from a normal paragraph was the indentation.

- The bar stops abruptly 16 lines into the quote. Depending on the contrast of your screen, this may not be visible (my laptop screen was tilted back when I noticed) as the final blue is almost white. When it is visible, however, it looks quite broken.

I suppose there is no way to stretch the gradient out indefinitely so that it always ends on the line the quote ends, is there?

@Arancaytar: I don't think there's a clean and visually appealing way to do that. I've been meaning to do another iteration of #16 with a lighter/shorter gradient - I still think some kind of border/background combination is preferable, or at least something to clearly delineate the end of the blockquote.

This is a border version based on #9. I only added a border to the bottom of the blockquote and changed the color.

Blockquote is a good idea, but the gradient border seems to be mission impossible. I liked the option with an thin thin vertical border that marks the quoted text area. I think there are no need for any additional horizontal line to mark en of quote area, it kind of messes up the layout/flow. Adding a example on a (norwegian) Drupal site with a integrated phpbb forum.

--
Stein Magne

#23 is great! Some more testing, and then it's rtbc, imho.

The question is whether the gradient is worth the bug of stopping the marker around 16 lines into the quote. Perhaps a light-colored, but constant bar would achieve the same elegance without looking that broken.

Alternative: Correct me if I'm wrong, but can't you set both an image and a color as a background? If so, we might in theory put a gradient on the first 16 lines, after which the edge of the image is reached, leaving the static color (which matches up with the image, of course).

New stuff goes to 7.

A pity, I say; this would have been neat to see in this release cycle. But there's nothing to be done, I guess.

I have designed a slightly different approach, combining elements from the rest of Garland. It scales to fit large or small quotes and I think is subtle enough for Garland but distinctive enough to do its job.

It needs a little extra markup added to the <blockquote> tags (as in d.o) but if you like the appearance, I can make sure this works with RTL and in IE6. Votes for italic?

I’d particularly value Steven’s opinion on this.

I’ve now implemented this design if you’d like to try it out. One patch for filter, to allow blockquotes in filtered html. One patch for Garland. I haven’t done a patch for Bluemarine as I think the blue left border, from earlier patch, fits well in Bluemarine.

Is code in node.tpl.php a good way to add the extra markup, or is there a better technique?

You’ll need -p1 for these patches (I’ve just setup Netbeans).

BTW: This works with rtl and I’ve tested in Firefox and IE6.

I personally love the visual approach taken by zeta-zoo in 33

Edit:
I'd like to see screenshots in italic to compare.

Doing a str_replace() on nodes and comments directly in the template files is not the way to go about this problem. If the user input has to be processed it needs to be done with an input filter.

Yes, but I wanted to keep it within Garland for now, until I know whether you like it or not? I've had one vote in 5½ weeks.

If lots of people like this, I'm more than willing to write a new, or modify an existing, default input filter.

Come on guys – wouldn’t it be good to not have these issues (æsthetic as opposed to architectural) in the patch queue when D7-beta1 is released?

The issue with #33 and #34 is not an aesthetic one, but the fact that in order to have images on two sides of a blockquote element you need additional non-semantic markup.

Theming blockquote elements was possible in the bluemarine theme because the proposed style didn't require additional markup.

I’ll write a module for my suggestion, as flobruit suggested on IRC …

In the meantime, people can still discuss the merits of other ideas as a standard for Garland (& Bluemarine?) #14 - #32?

I like #14 by catch, maybe with italic text as well. +1

Finally got ’round to actually releasing a module… http://drupal.org/project/blockquote

Mooffie: I first posted this design February 12, said I would write a module May 7: 2 hours and 12 minutes after I release it, you suddenly decide you don't like it :'(

Just because something is round doesn't mean it's a pom-pom; it could be a rough or imperfect pearl¹. Ironically, those circles are part of Garland – there’s no image in the patch (see module’s README.txt).

So we have two votes for #23, one for #14, (sorry Gidgidonihah, you’ll have to use the module). This is like pulling teeth…

_{^1: Baroque}

Don’t worry, I’m not too distraught :'(

I’m not an artist or designer either, I just thought ’alf inchin’ Garland’s line colour and image was the best way to integrate with it. …the sincerest form of flattery.

Thanks Moofie, but I’m led to believe my design won’t be considered because it relies on extra (and un-semantic) mark-up. It also needs a filter to add this mark-up from the blockquote tag. Hence the parenthesised comment, as Gidgidonihah did vote for #33 :-)

Patch 23 fails on HEAD.

patching file modules/filter/filter.module
Hunk #1 FAILED at 170.
Hunk #2 succeeded at 660 with fuzz 1 (offset -5 lines).
Hunk #3 FAILED at 685.
2 out of 3 hunks FAILED -- saving rejects to file modules/filter/filter.module.rej
patching file themes/bluemarine/style-rtl.css
Hunk #1 FAILED at 2.
1 out of 1 hunk FAILED -- saving rejects to file themes/bluemarine/style-rtl.css.rej
patching file themes/bluemarine/style.css
patching file themes/garland/style-rtl.css
patching file themes/garland/style.css
Hunk #1 succeeded at 62 (offset -9 lines).

This is a pure conflict-resolving re-roll of #23. Personally, I would hope to fix the issue I mentioned earlier.

Well, I've tried, but I noticed that we use the background property to style the quote, rather than the border (border images become available in CSS3). It is impossible to fill part of the background with a solid color, and the border lies just outside the background - so we cannot supplement this quote block gradient with a solid color.

The problem is with extended quote sections, see screenshot.

This might be worth sacrificing the gradient for, leaving us with the other screenshot.

If anyone is looking for inspiration on blockquote styling:
http://www.smashingmagazine.com/2008/06/12/block-quotes-and-pull-quotes-...

+1 for this -- at the very least, I wish blockquotes were allowed by default in filtered html. If we include [cite] there's no reason not to include [blockquote]. Perhaps we could move this forward by just including the core filter patch, and leaving the styling to separate issue?

@Arancaytar -- I don't think the gradient border is necessary -- it's prone to clashing with custom colored versions of garland anyways. Italics, smaller font sizes, slightly lighter font colors would all suffice as an improvement.

I pretty much agree with Nick on this - especially trying to get the tag into default filters as a first step.

Rerolled the patch. Only touches filter module per comments above.

Thanks for re-rolling Nick – applies cleanly +1

great ... we are way to o stingy with these tags in default html filter.

But at least #51 is a step in the right direction.
/me checks the title and component of this thread.

The default styling browsers provide for blockquote is mere indentation. … browsers do style [cite] differently … That can't be said for [blockquote].

I’m afraid that’s a contradiction: ‘mere’ is merely a qualifier, not a negation. Browsers apply a margin on all four sides.

There’s nothing to stop you using your theme (or my module ;-) ) to style the tag how you like. This isn’t about voting for what you like – it’s about choosing a default for Garland.

"solid bar, italic text"

That is #8, which has already been rejected. You could use Bluemarine. BTW I think Bluebeach’s blockquotes need a bit of padding.

So unless you come up with something sexy fitting exactly into Garland, this is not going to make it.

_{Gábor – my emphasis}

I don’t think this thread will die just because the tag is in html filter. I agree with Moshe; my only concern is, are there other tags we can safely allow? but I think other tags would be be committed quickly, once safety was established.

Another advantage of enabling more default tags is that admins won't be tempted to give the (completely insecure) 'full HTML' input format to untrusted roles.

I completely agree with zeta and catch on that one: enabling the tag is a good first step.

mooffie: IMO it'd be best to start a new issue for blockquote styling in Garland. The 'one user' mentioned happens to be the co-author of Garland. I don't think we should let a useful usability enhancement for the filter module be held up by a theming/design issue. The majority of Drupal sites in production don't use Garland, but they may well use 'filtered html' as the default input format.

Good idea. Take the Garland stuff here #285173: Add style for blockquotes in Garland, so the input format can be fixed. :)

Two things
I. The string containing the filterered html tags is repeated many times through out the code. Would making it a constant be a terrible idea?
II. what are we really trying to prevent with filtered html? For the most part, I would think we trying to prevent common forms of knavery, and tom-foolery that could occur:
1. Running flash, javascript
2. Breaking layouts with unclosed [div] tags.
3. Letting the strangers of the internet add whatever image they please to an entry. [they have the darnedest images sometimes...]
4. Allowing someone to do something like [p style="font-size:300em;"] in a comment.

Should we make filtered html much more liberal, allowing paragraph, header tags, ect?

If we did that, we could rewrite the allowed html tags description (which clients have always made me hide) to be much shorter -- simply stating which tags are NOT allowed.

Any interest in this? Maybe we should just use the same tags that are allowed on this very textarea [ see below the form ].

Nick Lewis at #61
The string containing the filterered html tags is repeated many times through out the code. Would making it a constant be a terrible idea?

This problem is solved via hook_variables.

Should we make filtered html much more liberal, allowing paragraph, header tags, ect?

Although I tend to agree with you, I think it should be taken up by a bonus issue.

Patch #51 cannot apply to CVS HEAD ... Re-roll.

Add a tip for blockquote :

'blockquote' => array( t('Blockquote'), '<blockquote>' . t('Indent a block of text') . '</blockquote>'),

A tip is a good idea, but <blockquote> should be used to mark a block of text as being a quote (semantic) – not to Indent a block of text (stylistic).

Also, I think the (longer) description goes in tips[][0] — tips[][1] is for 'You Type', 'You Get' columns.

Also, I think the (longer) description goes in tips[][0] — tips[][1] is for 'You Type', 'You Get' columns.

Yes ... sorry, tip already added :

'blockquote' => array( t('Block quoted'), '<blockquote>' . t('Block quoted') . '</blockquote>'),

#65 is #51 re-rolled so setting back to RTBC – from #53.

Moving all usability issues to Drupal - component usability.

Obviously there is a lot of contention around design here, including from one of the original Garland theme designers. IMO, we have two issues here:

#1: There's a usability issue, and possibly a security issue, where people end up assigning Full HTML to anonymous users to get access to the blockquote element since it's not enabled by default.

#2: Blockquotes are completely ooglay in Garland and Bluemarine.

I asked Nate Haug/quicksketch, who actually is a designer, unlike myself :) and he agreed that these are two separate issues and should be treated as such.

So I've committed this patch to add blockquote to filtered HTML. Let's pick up the design discussion @ #285173: Add style for blockquotes in Garland. I'm not hopeful of getting Steven Wittens's opinion on this (although I would love to see patches from him! :D) but maybe we can check in with Stefan Nataagenal or other prominent designers in the community on this issue.