3
votes

What would be an effective way of allowing users to post inline-comments within a block of text on a web page?

For example, if there was an article such as:

congue eget ipsum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

I would like visitors to the webpage to be able to comment on some text where they can select a few words and start typing an inline-comment. Having an index for the words so each word has a number wouldn't work because the text could be edited and then the word numbers wouldn't be accurate.

Is there anything wrong with changing the stored text and adding some markup for each comment? Such as:

congue eget ipsum. Cum sociis natoque <user:123;comment:123>penatibus et magnis</user:123;comment:123> dis parturient montes, nascetur ridiculus mus.

This way I could parse the text and then pull the comments from a database and display them inline or in a balloon or whatever.

Are there any better solutions for this?

2

2 Answers

2
votes

Well first of all, changing the underlying markup wouldn't work well because what happens if inline comments overlap?

What happens when the text is edited in such a way that the words that were changed contained an inline comment?

There's really no "perfect" way of doing this without having more specific specifications. I suggest storing the comments as an index of words as you suggested. If the text is modified, run a diff between the old version and the new version. Using this diff, you can attempt to update the indices of the inline comments and remove comments that were placed on modified pieces of text.

2
votes

I'd use javascript to retrieve the selected text and then calculate it's position counting the characters from the start to the selected text. So in the database I'd store the comment, the "start" position and the "length" of the selection. The problem with this solution is that you cannot change the original text, because if you do then you'd have to update the position of all the comments (some of them might need to be deleted)

That's the easy part. The hard part would be to display the comments due to all the problems listed by @tskuzzy (the overlapping comments)

Here's a small experiment i did:

http://jsfiddle.net/5jNg9/1/

<div id="content">
congue eget ipsum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</div>
<input type="button" onclick="checkSelection()" value="Get Selection"/>

<script>
function checkSelection(){
    var text = document.getElementById('content').innerHTML;
    var selection = document.getSelection();
    if(selection == ""){
        alert("cmon' at least select something first!");
    } else{
        var start = text.search(selection);
        alert("selection starts at character: "+ start +
              "\n and ends at character: "+(selection.length + start - 1) + "\n" +
              "the selected text is: '"+selection+"'");
    }
}
</script>