Eclecticism

One of the wonderful little things about a weblogging system such as TypePad or MovableType (and many others, of course) is that there are a lot of nice little usability touches that make it so much easier than having to work with all the HTML code yourself. Rather than mucking around with “ tags and the like, you just type away, and when you hit “Post”, all those niggling little details are taken care of for you.

Every so often, though, something doesn’t quite work the way you’d expect it to. Over the past few days, a few people have been posting in a thread on the TypePad User Group, trying to figure out why every so often, using the <blockquote> tag would suddenly cause display issues in a finished post.

Since I’d had to battle with this in the past, I ended up writing a small book attempting to explain just what was going on. My full post (in my usual overly long-winded style) follows.

After reading through this thread, I believe I’ve seen a couple different things going on when dealing with blockquote elements. I’ll see if I can clearly (if not terribly concisely) toss some useable answers out. ;)

I’ll start with an easier one to explain. I saw this from BJ:

It seems the problem occurs when the blockquote is within a paragraph:

<p> blah blah <blockquote> quoted stuff </blockquote> More Stuff </p>

There are a few types of tags in HTML. In this case, we need to know about two types: inline tags and block level tags.

Block level tags define a chunk of HTML code or text that is a self-contained block (I hate using a word to define itself, but that’s all I’m coming up with right now). A paragraph is a good example of this type of tag. Inline tags define a chunk of code or text that is contained within a block level tag — for instance, bold or italic text inside a paragraph.

The simplest way to visualize this is simply visualizing how a paragraph is structured: you can have bold and italic words inside a paragraph, but you can’t have paragraphs within bold and italic words, nor can you have a paragraph within a paragraph. In other words, this is a valid structure:

<p>Well, isn't <i>that</i> just absolutely <b>nifty</b>!

But this isn’t:

I'm not sure what to use here <p>as an example</p>, so I'll make something up.

Now, as long as all that made sense, all you need to realize is that a blockquote, as implied by its name, is a block level element, and therefore cannot be used within a paragraph. A properly formatted blockquote should look something like this:

I found this interesting little bit of information today:

<blockquote>A really interesting bit of information.</blockquote>

See? Pretty cool, huh?

If you want to correctly code an inline quote, as in BJ’s example, you should use the <quote> HTML tag, like so:

blah blah <quote>quoted stuff</quote> More Stuff

Okay, done. And that was the simpler of the two situations!

The second (and probably the one that’s biting the most people in the butt) is the bizarre linespacing issues that crop up at times when using the blockquote element. Sometimes blockquotes work fine, sometimes they’ll go tweaky within the blockquote, and sometimes they’ll affect things after the blockquote is closed.

I struggled with this for a while myself, but I eventually figured out that the culprit is actually one of the things that TypePad (and MovableType, for that matter) does to help us out: the automatic wrapping of paragraphs in paragraph tags (the “convert line breaks” option in the ‘Text Formatting’ menu).

TP/MT determines where to place paragraph and linebreak tags by looking at the text of the post: a single carriage return becomes a linebreak (<br />); blocks of text surrounded by two carriage returns (blank lines) get surrounded with paragraph tags (“…</p>). Simple enough on its own, but TP/MT also scans for certain other tags, and when it encounters those, it does not insert paragraph or linebreak tags. I don’t know all of the tags that will trigger this, but I know that list tags and blockquote tags are definitely in the list.

Now, when a blockquote is only a single paragraph, that’s not a problem at all. For instance, given the following text entered into a post:

I found this interesting little bit of information today:

<blockquote>A really interesting bit of information.</blockquote>

See? Pretty cool, huh?

TP/MT would output the HTML as follows:

<p>I found this interesting little bit of information today:

<blockquote>A really interesting bit of information.</blockquote>

See? Pretty cool, huh?

Where things get tweaky is when a blockquote contains multiple paragraphs. The first paragraph of the blockquote will be ignored as it should, but then the second paragraph of the blockquote gets an opening paragraph tag — and suddenly you run into a situation where two block level tags are fighting with each other. Then, when the blockquote ends, you have an opening paragraph tag, a closing blockquote tag, and then a closing paragraph tag — more confusion.

For example, given the following text put into a post:

I found this interesting little bit of information today:

<blockquote>A really interesting bit of information.

Some more information that's also interesting.</blockquote>

See? Pretty cool, huh?

TP/MT will wrap the first line in paragraph tags. Because the second line begins with a blockquote tag, it will ignore that line. As the third line begins with normal text, TP/MT will wrap that entire line in paragraph tags, which is where the weirdness creeps in. Here’s how the output would look:

I found this interesting little bit of information today:

<blockquote>A really interesting bit of information.

Some more information that's also interesting.</blockquote>

See? Pretty cool, huh?

Once you factor in CSS declarations into all of this, which might have differing settings for blockquotes and for paragraphs, you can see why things end up getting more than a little wonky as your browser tries to work its way through the tag soup and figure out how to format everything.

(ADDED: By the way, I should clarify that while both paragraph tags and blockquote tags are block level elements, different rules apply to them: while you cannot have a blockquote contained within a paragraph, you can have a paragraph [or multiple paragraphs] contained within a blockquote. While this may seem a little confusing from a “but they’re both block level elements!” standpoint, from a logical and English usage standpoint, it does make sense. I just can’t explain it any better than that. ;) )

There are two ways to get around this, neither of which are incredibly complex — but neither of which are incredibly easy, either.

The first is simply to switch the ‘Text Formatting’ option to “none” and type in all the paragraph tags yourself so that TP/MT doesn’t have to do it automatically. It works, but it also takes away from some of the ease of use of TP/MT.

The second option (and the one I use) is to keep in mind how TP/MT will interpret what you give it, and do a little bit of manual work to get around the issue. You’ll still be doing some manual work with tags here, but not quite as much as you might in option one. When I’m entering a two (or more) paragraph blockquote into one of my posts, I simply take into account the extra tags that TP/MT will add, add a couple of my own, and then ‘push’ a couple lines together so that the resulting code will output correctly after it passes through TP/MTs routines.

This is a bit easier to show than to describe, so — starting with the above example again, here’s the starting point:

I found this interesting little bit of information today:

<blockquote>A really interesting bit of information.

Some more information that's also interesting.</blockquote>

See? Pretty cool, huh?

Now, to prevent TP/MT from munging things up, I would put that example into one of my posts like this:

I found this interesting little bit of information today:

<blockquote>A really interesting bit of information.

Some more information that's also interesting.</p></blockquote>See? Pretty cool, huh?

Now TP/MT has only three lines to work through. As before, the first line gets wrapped in paragraph tags. Because the second line begins with a blockquote tag, it gets ignored, but as I’ve manually added paragraph tags, that’s fine. The third line, like the first, gets wrapped in paragraph tags because it starts with simple text, but because I put in the requisite paragraph tags on either side of the blockquote tag, all the tags in the resulting code balance out, like so:

<p>I found this interesting little bit of information today:

<blockquote>A really interesting bit of information.

Some more information that's also interesting.</p></blockquote><p>See? Pretty cool, huh?

And (finally), that’s that! I realize that it’s probably fairly daunting at first, but after playing with it a bit, I think it should start to make sense. Maybe. ;)

Anyway, those are the two major issues with blockquote elements that are probably causing frustration for people.

And that’s far more than enough babble from me on all this. Hopefully some of this helped some of you — as always, if I just managed to make things more confusing, feel free to post followup questions, and I’ll do what I can to clarify!