Comments Page

Joe Gregorio

I've added a comments page that lists the most recent comments to the site. I used to have a page like this in the old system, but I'm trying a different format. The problem with the old view was that the straight list of all comments and their content made it hard to follow a conversation. This new view uses the :hover CSS Selector to make the comment appear to the right as you hover your mouse over each link.

There is one major and one minor problem with this view. The minor one is that this only works in modern browsers, and by modern I mean not Interner Explorer. The second, and larger, problem is the lack of any user-interface clues of the capability. That is, unless I told you that hovering over the links will do something, you would never know. I'm pretty sure that hurts accessibility too.

Your most immediate accessibility problem is that you don't display the comments while you're tabbing through the list with the keyboard. This CSS rule will add the appropriate keyboard support:

a.comment_title:focus + .comment_content,
.comment_li:hover .comment_content {
 ...
}

Posted by Mark on 2007-01-19

Done. Thanks!

Posted by joe on 2007-01-19

For some reason, when tabbing through the list, I can only get about half way down it before my next "tab" sends me back up to the links in the header.

Posted by Andrew Sidwell on 2007-01-20

Now if you tab to a comment and then move the mouse to over over a different comment, you get to see both -- overlaid.

Posted by Sam Ruby on 2007-01-20

Andrew,

The problem there was that a comment would appear that contained a link, and the next time you pressed tab the focus would shift to the link. Of course, that would shift the focus away from the comment title, so the content would disappear. Did you watch "The Lost Room"? It's just like that.

Anyway, that problem I fixed by setting display:none on all links in the comment, which is crude but effective. Maybe there is a way to set z-index or something else to move that link to somewhere else in the tab order which would be better.

Posted by joe on 2007-01-20

Sam,

As a partial solution I changed the background color to white, that way they would overlap, but not overlay. Not optimal, let me know if you think of anything better.

Posted by joe on 2007-01-20

Discoverability: you can use an always visible container to show that something will be displayed.

That being said, I'm not sure how the overall usability of displaying such items only on mouse hover:
  • You can't scroll down the page to simply scan all comments very quickly.
  • You can't read comments that are taller than the window -- trying to grab the scrollbar makes the comment go away.
  • How exactly does this make it easier to follow a conversation? There's no obvious threading, and no date nor poster name in the list column.
You could benefit from a different layout combining comments per page and adding a smart shortened date (i.e. time of today/yesterday, etc.): Overall it's a nice page to get a sense of how many recent comments there are rather than actually trying to read them, but then in this case a counter would do almost as good except counters rarely justify for nifty CSS tricks.

PS: If I keep updating this comment every 4-5 minutes, for how long can I do it? Do you reset the counter at each post? OK that got boring after 12 minutes but you get the idea.

Posted by ralfoide on 2007-01-20

Ralfoide,

The five minutes is from the 'updated' time on the comment. So yes, you can keep pressing update and keep a comment open forever. The hope is that eventually everyone gets bored like you did.

Posted by joe on 2007-01-20

Joe, try adding this block of rules to your CSS. It should solve your overlap problem (I've only tested this in Firefox, mind you):

a.comment_title:focus + .comment_content,
.comment_li:hover .comment_content {
   padding: 2em 30px 0 30px;
}
.comment_li:hover .comment_content {
  z-index : 3;
}
.comment_content:after {
  content : "-";
  color : white;
  display : block;
  height : 500px;
  border-top : 3px solid black;
  background : white;
  margin : 2em -33px 0 -33px;
}

Posted by Már on 2007-01-21

Mar,

Any explanation on how that solves the overlap problem?

Posted by joe on 2007-01-21

It fixes it by more effectively hiding the comments that might peek below the bottom of the currently :focused (or :hovered) comment. It also places :hovered comments on a higher z-index layer than the :focused comments to make the transition between keyboard and mouse navigation more seamless.

It uses generated content (the :after selector) to create a 500px tall white mask with a black top border to add what might be described as a crude "outer-padding" to each comment.

You might of course want to tweak the "500px" height value to better suit your needs - e.g. change it to a relative "em" value, etc.

Unfortunately I have no suggestions on how to solve the problem of links within comments with just CSS - other than hiding them like you're already doing - which is crude.

I can think of three other sorts of solutions:

  • Server: Disarm the links out on the server-side
  • Javascript: Use Javascript to disarm the links (transmogrify them into, say, <span class="link">)
  • HTML: add a tabindex attribute to the comment-activation links. This will make the keyboard navigation behave more like one would expect.

Hmm... now thinking about it, I suggest you try the tabindex method.

Posted by Már on 2007-01-22

Már,

Thanks for the explanation. I ended up using a variant of your solution, instead of adding a 500px block after the content, I just fixed the height of the comment_content, which makes :focus and :hover items the same size. I also added an overflow: hidden so that things that got too large get clipped, and I moved the comment author to the beginning so it wouldn't get clipped.

Posted by joe on 2007-01-22

Any chance we’ll get a feed for the comments?

Posted by Aristotle Pagaltzis on 2007-01-24

Aristotle,

Done.

Posted by joe on 2007-01-24

So... any chance we can post comments via APP?

Posted by Eric Larson on 2007-01-24

Eric,

Only if I can find a way to do that without making it a highly efficient method of getting spammed.

Posted by joe on 2007-01-24

comments powered by Disqus