Wednesday, August 31, 2011

Controlling Blogger's BR tags

I usually write in HTML mode when I use Blogger. This means I tend to put in my own <p> and other formatting tags. But when Blogger replaces every line-break with a <br>, this causes some ugly formatting. <pre> blocks, in particular, come out double-spaced.

Here's a solution I came up with. I added the following CSS to my blog's template:

.entry-content BR {display: none;}
BR.real {display: inline;}

This means any <br>s added to my post's content are ignored. (I added the .entry-content context to avoid conflict with any <br>s used by Blogger elsewhere on the page, although I don't think there usually are any.)

The second line lets me add <br>s of my own provided I do it like this:

<br class="real">

Feel free to replace "real" with your own preferred class name (provided you do it in both the CSS definition and and in the HTML when you use a <br>).

APPENDIX: There is a potentially easier solution. Just switch to the new editor under Blogger's Settings -> Basic. However, in my limited fiddling. it still behaves a little oddly as Blogger tries to guess where you want line breaks and where you don't.

No comments:

Post a Comment