Line Spacing And Pre-Formatted Blocks

I use "<pre> ... </pre>" blocks in my posts a lot, as a way to highlight code examples and log outputs. Unlike blockquotes, preformatted blocks preserve indentation in the material highlighted, and with both code and log listings, indentation (horizontal spacing) is as an important part of the display as is line spacing (vertical spacing).

Earlier this month, I showed how the corrected (finally!) vertical line spacing issue had been corrected, and how easily you can tweak the line spacing for elements like pre-formatted blocks. At that time, vertical line spacing for pre-formatted blocks was predictable, and could be tweaked. Since that time and just before the (mostly Draft) New Blogger June 2008 release, vertical line spacing changed.

You can see the problem, in Blogger Spacing Issue Fixed - June 2008. When I wrote that post, the code displayed, as I describe farther down in the post as

tighter vertical spacing (1.2em)

Now, it's not tighter.

Coming just before the release of New Blogger June 2008, we have to wonder.

>> (Update 6/28 21:00): This issue appears to be fixed.

>> Top

Blogger Spacing Issue Fixed - June 2008

There were many new features introduced in New Blogger 2006 - some appreciated, others not so. One of the latter category, and not understood by everybody, was the change in vertical line spacing, introduced into a blog by the presence of an indenting element such as "<blockquote>" or "<ul>". This issue was first noted the month New Blogger 2006, and the Layouts templates, was rolled out.

In March, 2008, the problem was acknowledged. This week, it was fixed.

This has been fixed in the master copies of the blog widget and the template CSS.

As noted below by Pete, if your blog has a completely non-edited template, it was upgraded already. If not, and if your template is not too customised, you can get the fix yourself, using Layout - Pick New Template, and getting a new copy of the template that you're using.

I note that the stated way of integrating the fix into an existing template

find the .post p { line in your CSS and move the line-height line into a new .post {} CSS block

was done some months ago, as the tested workaround for the problem, which I implemented in this blog, as I wrote that article.

In my test blog, you can see a demonstration of a post that looks like it should. My test blog uses a clean template, re acquired when this post was originally written, and after the Blogger changes were made.

To make this blog look like that, I had to do a bit of template editing. Besides the changes enumerated in my earlier post, I had to tweak the CSS for the "<blockquote>", "<li>", and "<pre>" text elements. You may be able to think of additional text elements which need similar treatment. Or, maybe you like a more open spacing (maybe "1.4em", or maybe the same "1.6em"). It's your blog, so it's your choice. This is my choice.

.post blockquote {
  line-height:1.2em;  <== Add this line
  margin:1em 20px;
  }
.post blockquote p {
  margin:.75em 0;
  }
.post li {  <==
  line-height:1.2em;  <== Add these lines
  }  <==
.post pre {  <==
  line-height:1.2em;  <== Add these lines
  margin:1em;  <==
  }  <==

Now, note the relatively open vertical spacing (1.6em) in the main paragraphs, and the tighter vertical spacing (1.2em) in the above indentation ("<pre> ... </pre>"). This relative spacing should now be consistent in this blog.

If you make these changes, and your blog doesn't look like my demonstration (here) or my test (my other blog), maybe you should consider simply getting a new copy of your template. If you haven't made too many changes in the template HTML, that would certainly have more possibility of yielding the right results.

It's your dime. At least, you should now see that it's possible to get your blog looking right.

>> Top

Blogger Spacing Issue Acknowleged

When "Beta" Blogger, later known as New Blogger 2006, was first rolled out, there were many new features, and improvements over "Old" Blogger, noted. There was also one feature, that was not seen as an improvement, noted.

When you include any indenting block of text in your blog post,

<blockquote> ... </blockquote>
<ol> ... </ol>
<ul> ... </ul>

for instance, the spacing of the posts, below the indenting block, would change. This makes the entire blog look sloppy.

Several workarounds were identified by various bloggers; not any one was simultaneously clean, effective, and simple, however.

After repeated complaints and reports, Blogger finally acknowledged the problem. Yet, it's still not fixed.

Blogger calls it "Cosmetic". We call it sloppy.

>> Top