Hey There,
Today's post is going to be a bit short, by which I mean that it's not going to be long. Of course, it also won't be short in the sense that it won't be abrupt and rude.
See ya,
Just kidding... ;)
I spent most of the time I had to come up with something to write about today, driving myself nuts trying to figure out how I could make this blog's code examples and block-quotes work in IE, FireFox and Opera; not to mention all of the other browsers out there. I don't think I'll ever be able to get the code examples to properly indent on Lynx, but at least it's readable now.
Even as I worked on that issue, I had this nagging feeling that I was going to have to go back and re-tag all 520 odd posts we've already put out, like I had to with our follow up on the absorption of knowledge in the computer age, which was the first post we'd ever done where the entire post had to look like a letter when seen from a bird's eye view. So, that was a bummer.
I started noticing that pretty much every forum I visited was filled with nothing but useless flaming. Guys who had the same question as I did, but were answered with some variation of "Why would you want your lines to wrap if you've already pre-formatted your text?" after which non-solution after non-solution would be offered up to not-answer the question ;)
Of course, there are some good reasons to want to be able to word-wrap your pre-formatted text. For instance, in this blog, we put up code from time to time. Sometimes a lot, sometimes none. But when we do put up code, we wrap it in the <pre> tags to preserve the indentation. This might not be necessary, but there's only so much leeway you have on Blogger. You have to use the tools they give you. No use putting in format tags that they don't honour. So, anyone can see that a loop within a loop within a conditional, with tabbed indents, can move the code out pretty far from the left-hand margin. So, if one of the triple-indented lines contains a good amount of text, I'd want that text to wrap around (just like it would in a standard terminal editor) instead of disappearing off under the right-side column.
Anyway, this post ends with good news that's both succinct and helpful (especially if you publish code on Blogger, too). All you actually need to do is add a "post pre" section to the CSS style section of your Blogger template. The beauty of this solution is that, not only does it work on all three of the aforementioned browsers, but it also fixed all of our previous code posts in one fell swoop :)
The code itself is here, you can add it anywhere in the:/* Posts
-----------------------------------------------
*/
section. The CSS code is directly below, and the "post pre" container may not exist in the template you're using, just as it didn't in mine:.post pre {
white-space: pre-wrap; /* This is for IE and other browsers that just have to be different */
white-space: -moz-pre-wrap; /* This is for FireFox and Mozilla Browsers */
white-space: o-pre-wrap; /* This is for Opera */
}
And, just like that, 500 or so wrongs have been righted. We'll be back tomorrow after we're all done being excited :)
, Mike
Please note that this blog accepts comments via email only. See our Mission And Policy Statement for further details.
