{"id":2117,"date":"2004-01-09T19:12:35","date_gmt":"2004-01-10T11:12:35","guid":{"rendered":"http:\/\/michaelhans.com\/eclecticism\/2004\/01\/10\/blockquotes-in-typepad-and-movabletype\/"},"modified":"2019-12-09T15:02:47","modified_gmt":"2019-12-09T23:02:47","slug":"blockquotes-in-typepad-and-movabletype","status":"publish","type":"post","link":"https:\/\/michaelhans.com\/eclecticism\/2004\/01\/09\/blockquotes-in-typepad-and-movabletype\/","title":{"rendered":"blockquotes in TypePad and MovableType"},"content":{"rendered":"<div class='__iawmlf-post-loop-links' style='display:none;' data-iawmlf-post-links='[{&quot;id&quot;:6231,&quot;href&quot;:&quot;http:\\\/\\\/www.typepad.com&quot;,&quot;archived_href&quot;:&quot;https:\\\/\\\/web-wp.archive.org\\\/web\\\/20251029160650\\\/https:\\\/\\\/www.typepad.com\\\/&quot;,&quot;redirect_href&quot;:&quot;&quot;,&quot;checks&quot;:[{&quot;date&quot;:&quot;2026-03-08 22:37:30&quot;,&quot;http_code&quot;:403},{&quot;date&quot;:&quot;2026-03-12 14:22:32&quot;,&quot;http_code&quot;:403},{&quot;date&quot;:&quot;2026-03-17 22:48:07&quot;,&quot;http_code&quot;:403},{&quot;date&quot;:&quot;2026-03-24 17:24:57&quot;,&quot;http_code&quot;:403},{&quot;date&quot;:&quot;2026-03-29 05:12:45&quot;,&quot;http_code&quot;:403},{&quot;date&quot;:&quot;2026-04-01 15:22:58&quot;,&quot;http_code&quot;:403},{&quot;date&quot;:&quot;2026-04-05 17:00:23&quot;,&quot;http_code&quot;:403},{&quot;date&quot;:&quot;2026-04-10 10:12:11&quot;,&quot;http_code&quot;:403},{&quot;date&quot;:&quot;2026-04-14 10:38:07&quot;,&quot;http_code&quot;:403}],&quot;broken&quot;:true,&quot;last_checked&quot;:{&quot;date&quot;:&quot;2026-04-14 10:38:07&quot;,&quot;http_code&quot;:403},&quot;process&quot;:&quot;done&quot;},{&quot;id&quot;:7289,&quot;href&quot;:&quot;http:\\\/\\\/www.movabletype.org&quot;,&quot;archived_href&quot;:&quot;https:\\\/\\\/web-wp.archive.org\\\/web\\\/20260306004502\\\/https:\\\/\\\/movabletype.org\\\/&quot;,&quot;redirect_href&quot;:&quot;&quot;,&quot;checks&quot;:[{&quot;date&quot;:&quot;2026-03-09 20:10:06&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-03-15 05:52:16&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-03-24 17:25:01&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-03-28 03:37:19&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-03-31 10:45:45&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-04-03 16:49:20&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-04-07 00:00:33&quot;,&quot;http_code&quot;:503},{&quot;date&quot;:&quot;2026-04-10 05:19:44&quot;,&quot;http_code&quot;:200},{&quot;date&quot;:&quot;2026-04-13 07:08:16&quot;,&quot;http_code&quot;:200}],&quot;broken&quot;:false,&quot;last_checked&quot;:{&quot;date&quot;:&quot;2026-04-13 07:08:16&quot;,&quot;http_code&quot;:200},&quot;process&quot;:&quot;done&quot;},{&quot;id&quot;:12381,&quot;href&quot;:&quot;http:\\\/\\\/blog.liquidvolt.com\\\/typepad\\\/viewtopic.php?t=333&quot;,&quot;archived_href&quot;:&quot;https:\\\/\\\/web-wp.archive.org\\\/web\\\/20040601145149\\\/http:\\\/\\\/blog.liquidvolt.com:80\\\/typepad\\\/viewtopic.php?t=333&quot;,&quot;redirect_href&quot;:&quot;&quot;,&quot;checks&quot;:[{&quot;date&quot;:&quot;2026-03-11 22:35:12&quot;,&quot;http_code&quot;:404},{&quot;date&quot;:&quot;2026-03-27 06:16:40&quot;,&quot;http_code&quot;:404}],&quot;broken&quot;:false,&quot;last_checked&quot;:{&quot;date&quot;:&quot;2026-03-27 06:16:40&quot;,&quot;http_code&quot;:404},&quot;process&quot;:&quot;done&quot;},{&quot;id&quot;:12382,&quot;href&quot;:&quot;http:\\\/\\\/blog.liquidvolt.com\\\/typepad\\\/viewtopic.php?p=3044#3044&quot;,&quot;archived_href&quot;:&quot;https:\\\/\\\/web-wp.archive.org\\\/web\\\/20040531124807\\\/http:\\\/\\\/blog.liquidvolt.com:80\\\/typepad\\\/viewtopic.php?p=3044&quot;,&quot;redirect_href&quot;:&quot;&quot;,&quot;checks&quot;:[{&quot;date&quot;:&quot;2026-03-11 22:35:13&quot;,&quot;http_code&quot;:404},{&quot;date&quot;:&quot;2026-03-27 06:16:39&quot;,&quot;http_code&quot;:404}],&quot;broken&quot;:false,&quot;last_checked&quot;:{&quot;date&quot;:&quot;2026-03-27 06:16:39&quot;,&quot;http_code&quot;:404},&quot;process&quot;:&quot;done&quot;},{&quot;id&quot;:12383,&quot;href&quot;:&quot;http:\\\/\\\/blog.liquidvolt.com\\\/typepad\\\/viewtopic.php?p=2046#2046&quot;,&quot;archived_href&quot;:&quot;https:\\\/\\\/web-wp.archive.org\\\/web\\\/20040531141632\\\/http:\\\/\\\/blog.liquidvolt.com:80\\\/typepad\\\/viewtopic.php?p=2046&quot;,&quot;redirect_href&quot;:&quot;&quot;,&quot;checks&quot;:[{&quot;date&quot;:&quot;2026-03-11 22:35:14&quot;,&quot;http_code&quot;:404},{&quot;date&quot;:&quot;2026-03-27 06:16:39&quot;,&quot;http_code&quot;:404}],&quot;broken&quot;:false,&quot;last_checked&quot;:{&quot;date&quot;:&quot;2026-03-27 06:16:39&quot;,&quot;http_code&quot;:404},&quot;process&quot;:&quot;done&quot;}]'><\/div>\n<p>One of the wonderful little things about a weblogging system such as <a href=\"http:\/\/www.typepad.com\/\" title=\"TypePad\">TypePad<\/a> or <a href=\"http:\/\/www.movabletype.org\/\" title=\"MovableType\">MovableType<\/a> (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 &#8220; tags and the like, you just type away, and when you hit &#8220;Post&#8221;, all those niggling little details are taken care of for you.<\/p>\n<p>Every so often, though, something doesn&#8217;t quite work the way you&#8217;d expect it to. Over the past few days, a few people have been posting in <a href=\"http:\/\/blog.liquidvolt.com\/typepad\/viewtopic.php?t=333\" title=\"Blockquotes\">a thread on the TypePad User Group<\/a>, trying to figure out why every so often, using the <code>&lt;blockquote&gt;<\/code> tag would suddenly cause display issues in a finished post.<\/p>\n<p>Since I&#8217;d had to battle with this in the past, I ended up writing <a href=\"http:\/\/blog.liquidvolt.com\/typepad\/viewtopic.php?p=3044#3044\" title=\"After reading through this thread...\">a small book<\/a> attempting to explain just what was going on. My full post (in my usual overly long-winded style) follows.<\/p>\n<p>After reading through this thread, I believe I&#8217;ve seen a couple different things going on when dealing with blockquote elements. I&#8217;ll see if I can clearly (if not terribly concisely) toss some useable answers out. ;)<\/p>\n<p>I&#8217;ll start with an easier one to explain. I saw <a href=\"http:\/\/blog.liquidvolt.com\/typepad\/viewtopic.php?p=2046#2046\" title=\"I just ran into this problem...\">this from BJ<\/a>:<\/p>\n<blockquote><p>\n  It seems the problem occurs when the blockquote is within a paragraph:<\/p>\n<p>  <code>&lt;p&gt; blah blah &lt;blockquote&gt; quoted stuff &lt;\/blockquote&gt; More Stuff &lt;\/p&gt;<\/code>\n<\/p><\/blockquote>\n<p>There are a few types of tags in HTML. In this case, we need to know about two types: <strong>inline<\/strong> tags and <strong>block level<\/strong> tags.<\/p>\n<p><strong>Block level<\/strong> 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&#8217;s all I&#8217;m coming up with right now). A paragraph is a good example of this type of tag. <strong>Inline<\/strong> tags define a chunk of code or text that is contained <em>within<\/em> a block level tag &#8212; for instance, bold or italic text inside a paragraph.<\/p>\n<p>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&#8217;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>\n<pre><code>&lt;p&gt;Well, isn't &lt;i&gt;that&lt;\/i&gt; just absolutely &lt;b&gt;nifty&lt;\/b&gt;!\n<\/code><\/pre>\n<p>But this isn&#8217;t:<\/p>\n<pre><code>I'm not sure what to use here &lt;p&gt;as an example&lt;\/p&gt;, so I'll make something up.\n<\/code><\/pre>\n<p>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:<\/p>\n<pre><code>I found this interesting little bit of information today:\n\n&lt;blockquote&gt;A really interesting bit of information.&lt;\/blockquote&gt;\n\nSee? Pretty cool, huh?\n<\/code><\/pre>\n<p>If you want to correctly code an inline quote, as in BJ&#8217;s example, you should use the <code>&lt;quote&gt;<\/code> HTML tag, like so:<\/p>\n<pre><code>blah blah &lt;quote&gt;quoted stuff&lt;\/quote&gt; More Stuff\n<\/code><\/pre>\n<p>Okay, done. And that was the simpler of the two situations!<\/p>\n<p>The second (and probably the one that&#8217;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&#8217;ll go tweaky within the blockquote, and sometimes they&#8217;ll affect things after the blockquote is closed.<\/p>\n<p>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 &#8220;convert line breaks&#8221; option in the &#8216;Text Formatting&#8217; menu).<\/p>\n<p>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 (<code>&lt;br \/&gt;<\/code>); blocks of text surrounded by two carriage returns (blank lines) get surrounded with paragraph tags (&#8220;&#8230;<code>&lt;\/p&gt;<\/code>). Simple enough on its own, but TP\/MT also scans for certain other tags, and when it encounters those, it <em>does not<\/em> insert paragraph or linebreak tags. I don&#8217;t know all of the tags that will trigger this, but I know that list tags and blockquote tags are definitely in the list.<\/p>\n<p>Now, when a blockquote is only a single paragraph, that&#8217;s not a problem at all. For instance, given the following text entered into a post:<\/p>\n<pre><code>I found this interesting little bit of information today:\n\n&lt;blockquote&gt;A really interesting bit of information.&lt;\/blockquote&gt;\n\nSee? Pretty cool, huh?\n<\/code><\/pre>\n<p>TP\/MT would output the HTML as follows:<\/p>\n<pre><code>&lt;p&gt;I found this interesting little bit of information today:\n\n&lt;blockquote&gt;A really interesting bit of information.&lt;\/blockquote&gt;\n\nSee? Pretty cool, huh?\n<\/code><\/pre>\n<p>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 &#8212; 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 &#8212; more confusion.<\/p>\n<p>For example, given the following text put into a post:<\/p>\n<pre><code>I found this interesting little bit of information today:\n\n&lt;blockquote&gt;A really interesting bit of information.\n\nSome more information that's also interesting.&lt;\/blockquote&gt;\n\nSee? Pretty cool, huh?\n<\/code><\/pre>\n<p>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&#8217;s how the output would look:<\/p>\n<pre><code>I found this interesting little bit of information today:\n\n&lt;blockquote&gt;A really interesting bit of information.\n\nSome more information that's also interesting.&lt;\/blockquote&gt;\n\nSee? Pretty cool, huh?\n<\/code><\/pre>\n<p>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.<\/p>\n<p>(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 <em>can<\/em> have a paragraph [or multiple paragraphs] contained within a blockquote. While this may seem a little confusing from a &#8220;but they&#8217;re both block level elements!&#8221; standpoint, from a logical and English usage standpoint, it does make sense. I just can&#8217;t explain it any better than that. ;) )<\/p>\n<p>There are two ways to get around this, neither of which are incredibly complex &#8212; but neither of which are incredibly easy, either.<\/p>\n<p>The first is simply to switch the &#8216;Text Formatting&#8217; option to &#8220;none&#8221; and type in all the paragraph tags yourself so that TP\/MT doesn&#8217;t have to do it automatically. It works, but it also takes away from some of the ease of use of TP\/MT.<\/p>\n<p>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&#8217;ll still be doing some manual work with tags here, but not quite as much as you might in option one. When I&#8217;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 &#8216;push&#8217; a couple lines together so that the resulting code will output correctly after it passes through TP\/MTs routines.<\/p>\n<p>This is a bit easier to show than to describe, so &#8212; starting with the above example again, here&#8217;s the starting point:<\/p>\n<pre><code>I found this interesting little bit of information today:\n\n&lt;blockquote&gt;A really interesting bit of information.\n\nSome more information that's also interesting.&lt;\/blockquote&gt;\n\nSee? Pretty cool, huh?\n<\/code><\/pre>\n<p>Now, to prevent TP\/MT from munging things up, I would put that example into one of my posts like this:<\/p>\n<pre><code>I found this interesting little bit of information today:\n\n&lt;blockquote&gt;A really interesting bit of information.\n\nSome more information that's also interesting.&lt;\/p&gt;&lt;\/blockquote&gt;See? Pretty cool, huh?\n<\/code><\/pre>\n<p>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&#8217;ve manually added paragraph tags, that&#8217;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>\n<pre><code>&lt;p&gt;I found this interesting little bit of information today:\n\n&lt;blockquote&gt;A really interesting bit of information.\n\nSome more information that's also interesting.&lt;\/p&gt;&lt;\/blockquote&gt;&lt;p&gt;See? Pretty cool, huh?\n<\/code><\/pre>\n<p>And (finally), that&#8217;s that! I realize that it&#8217;s probably fairly daunting at first, but after playing with it a bit, I think it should start to make sense. Maybe. ;)<\/p>\n<p>Anyway, those are the two major issues with blockquote elements that are probably causing frustration for people.<\/p>\n<p>And that&#8217;s <em>far<\/em> more than enough babble from me on all this. Hopefully some of this helped some of you &#8212; as always, if I just managed to make things <em>more<\/em> confusing, feel free to post followup questions, and I&#8217;ll do what I can to clarify!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2040],"tags":[812,921],"class_list":["post-2117","post","type-post","status-publish","format-standard","hentry","category-blog","tag-movabletype","tag-typepad"],"_links":{"self":[{"href":"https:\/\/michaelhans.com\/eclecticism\/wp-json\/wp\/v2\/posts\/2117","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/michaelhans.com\/eclecticism\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/michaelhans.com\/eclecticism\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/michaelhans.com\/eclecticism\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/michaelhans.com\/eclecticism\/wp-json\/wp\/v2\/comments?post=2117"}],"version-history":[{"count":0,"href":"https:\/\/michaelhans.com\/eclecticism\/wp-json\/wp\/v2\/posts\/2117\/revisions"}],"wp:attachment":[{"href":"https:\/\/michaelhans.com\/eclecticism\/wp-json\/wp\/v2\/media?parent=2117"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/michaelhans.com\/eclecticism\/wp-json\/wp\/v2\/categories?post=2117"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/michaelhans.com\/eclecticism\/wp-json\/wp\/v2\/tags?post=2117"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}