Preformatting Comments that Still Wrap
For a while, it's frustrated me (and I'm sure some of my commenters) that indentation in comments is lost, particularly given the code snippets people often paste in.
I didn't want to make all comments pre-formatted so my first thought (which I implemented locally) was to add a boolean field on comments where a user could elect to have their comment pre-formatted. That would be annoying for the non-code parts of their comments, though. So my second thought (which I also implemented locally) was to have a toggle where a comment could alternatively be viewed as pre-formatted or not.
But in tweaking that I was reminded of the CSS2 property white-space. In particular, the value pre-wrap which honours multiple consecutive whitespace characters but still wraps to fit in the required width of the box. According to quirksmode.org it's not understood by FF2 or IE6/7. A value of pre might work in that case but the wrapping part of pre-wrap is really nice.
You can see it in action in the first comment of First Success With Combinatory Python (unless you are running FF2 or IE6/7).
If anyone knows of a simple fallback to pre I can do for those browsers, I would be interested in trying it.
Comments (9)
Adam Collard on Nov. 23, 2008:
Doesn't work for me - FF3.0.4 on Ubuntu. A quick search of /static/jtauber.css doesn't give any hits for wrap. The class is set on the div, but no matching definition in the CSS...
Roberto De Almeida on Nov. 23, 2008:
Works for me with FF 3.0.4 and Ubuntu. Maybe Adam's cache is old?
Adam Collard on Nov. 23, 2008:
Works now. Not sure if it was the force refresh i did on the CSS file or whether something changed server side, but either way it looks good!
Marius Gedminas on Nov. 23, 2008:
A low-level solution that requires some HTML munging, but works on any browser: wrap every line in <p> </p> (or just add a <br /> at the end) and replace leading spaces with .
I wonder if my mention of HTML tags and entities will survive the commenting process. (I have to wonder because there's no 'Preview' button.)
James Tauber on Nov. 23, 2008:
Adam, looks like I need to implement a cachebuster on my CSS :-)
James Tauber on Nov. 23, 2008:
Marius, comment previews are on the list :-)
Kevin on Nov. 23, 2008:
Why don't you do templating and replacing? Take a look genshi and wp-syntax/geshi (for a PHP example). Basically allow comments to parse the pre html tag with a "lang" attribute set to a specific language. Drop your formatted code between the pre's and it add CSS styles for preserving the syntax, and highlighting when the page is rendered.
Kevin
Carl on Nov. 26, 2008:
The pre-tag isn't magic. Just put a whitespace: pre-wrap onto your pre-tag, and browsers that understand it will wrap the text.
Or you know, just use markdown with a preview.
Last Modified: Nov. 23, 2008
Author: James Tauber
James Tauber on Nov. 23, 2008:
I just thought I'd throw in an example here too for people to see. This is a long paragraph which, as you can hopefully see if you're using a browser that supports white-space: pre-wrap actually wraps nicely.
And yet
this is
indented
as intended