Styling Comment Threads

A well-designed review thread seems simple, but it is not. This article will gradually guide you to build beautiful and easy-to-use comment threads.

Elements of a good comment thread

Before designing and writing code, let's understand the characteristics of a good comment thread:

1. Comments are readable and all important information (author, votes, timestamps and content) is clear at a glance.
2. The different parts of the comment are visually different so that the user can immediately understand the functions of each part. This is especially important for action buttons (such as reply, report) and links.
3. There are clear hierarchical visual cues between comments . This is a necessary condition for nested comments (i.e. one comment responds to another).
4. Scroll to specific comments easily and quickly , especially jump to parent comments in child comments (reply).
5. Comments have toggles that allow users to hide and display comments and their replies.

In addition, there are some icing on the cake:

1. Users can mark comments so that moderators can notice inappropriate content.
2. Comments can be liked or slapped to show whether the comment is useful.
3. Only the first few comments are displayed , and users can load more comments.

These advanced features require JavaScript support. Moreover, depending on the technology stack, these features may also be implemented on the server side, especially tracking the number of votes and tag status of comments. Therefore, this article will focus on the style design of comment threads .

Basic comment thread

The structure of a single comment is simple. Here is a framework for a single comment:

Replies have additional left indentation to meet visual hierarchy needs. The markings of the above structure may look like this:

<div>
  <div>
    <div>
      Like it</div>
    <div>
      <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">{{ author}}</a>
      <p>
        {{Votes}} • {{Add time}}
      </p>
    </div>
  </div>
  <div>
    <p>
      {{ Comment content}}
    </p>
    Reply to report</div>
  <div>
    <!-- Reply List-->
  </div>
</div>

The additional left indentation of the reply provides visual hierarchy prompts. Like and tap buttons use HTML character code as icons. sr-only class hides elements on all devices except screen readers, improving accessibility of voting buttons.

Add a link to jump to comment

Next, add a feature that helps users quickly scroll to comments. This is especially useful when the user wants to jump to the parent comment he responds to.

One design is to clickable "Border" on the left side of the comment:

To do this, we push the comment body to the right and align it with the reply. This design also enhances the hierarchy between comments, and you can determine the nesting level of the currently read comment by simply looking at the number of links on the left border. Of course, you can also jump to any higher-level comment immediately by clicking on the border link.

To do this we need to add an anchor element to each comment (<a></a> ) and design these anchor elements into clickable borders.

Here are some changes to understand:

• Add an anchor link to each comment and style it with a border to the left.
• The comment main character is aligned with the reply.
• .comment-heading (including vote, author and add time) has a fixed 50px height. Make sure they start below the title and extend to the end of the comment by setting position: absolute; top: 50px; height: calc(100% - 50px); for border links.
• The border link has a cropped background, and the borders on the left and right are 4px wide and 12px wide. This means that although the visible area is only 4px wide, the actual clickable area is 12px wide. A wider surface helps the user to position the pointer on the link more easily and click on it because the 4px is too narrow, but the wider width will appear visually inconsistent.

Allow users to click to hide/show comments

Now, we have a pretty satisfying comment thread. This design itself can be applied to many practical use cases. But let's go a step further and add the toggle feature, i.e., hide and show comments by clicking.

The easiest way is to use<details></details> and<summary></summary> element. In short, you can click<summary></summary> To switch the entire<details></details> visibility. This does not require JavaScript, and these tags are currently supported by about 96% of browsers.

To achieve this, we need to make the following changes to the code:

• Put the comment from
  Change to<details></details> .
• Wrap the comment title ( .comment-heading ) in<summary></summary> Inside the tag.
• Provide users with visual tips to tell them whether the comments are hidden.

Here are some changes to understand:

• Comment is now<details></details> , and both have the open attribute, so it is visible (on) by default.
• Comment title is now packaged in<summary></summary> Inside the tag. The default arrow has also been deleted.
• Tips for comment visibility status are mainly created through the small text on the right side of the comment. The content of this text is based on the parent<details></details> Whether the element has an open attribute changes. The text itself is a simple pseudo-element created using ::after selector. In addition, there is a border at the bottom of the closed comment, showing users more content.
• At the end of the CSS code, you will find some styles inside @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {...} selector. This is a hack that is only for Internet Explorer. IE does not support it<details></details> , so it is always on by default. By deleting the text and resetting the cursor, IE users will see a normal comment thread, just unable to switch comment visibility.

Other precautions

No comments

If the comment thread does not have any comments (empty state), we need to communicate this clearly to the user. A simple paragraph containing the line "No Comments" and a form containing a text box and a submit button will go a long way, which should be the minimum requirement when dealing with an empty state. If you want to do better, you can also add a picture that matches the form.

Reply to comment form

Different websites have different implementation methods for replying to comments. Some sites use the old-style method to redirect users to a new page containing the form – a simple text box and submit button. Other websites open forms directly in the comment thread, usually using simple switches. The latter obviously requires JavaScript, but is more popular now. For example, in the example above, we can add a simple form that can toggle its visibility by clicking the Reply button.

Place the user after posting a new reply

Suppose the user responds to comments using a form similar to the one shown above. Do you show it above or below an existing reply? The answer is that it should always be displayed above other replies. When users fill out the form and submit, they want immediate feedback to tell them that the operation was successful. So by putting new replies above other replies we can provide this feedback to users without scrolling down. In subsequent loading, you can arrange comments and replies according to the website's algorithm.

Handle Markdown and code blocks

Many websites, especially developer blogs, need to support Markdown and code blocks in their comments. This is a larger topic of discussion and may require a special article to discuss. But, for the sake of this article, let's simply say, there are a lot of Markdown editors that can easily be attached to text boxes. Most of them use JavaScript, so it should be easy to integrate into our examples. One such plugin is markdown-it, which has a loose MIT license. You can also check out the WYSIWYG editors, which have similar features when handling web comments.

Spam protection and user authentication

If you allow the user to provide the input form, you can guarantee spam, so this is a must-try issue when building the comment thread. A great way to reduce spam is to use services like Google's reCAPTCHA. For example, in the above example, a reCAPTCHA box can be placed under the Submit button. This will protect our website from abuse.

Another way to prevent spam is to allow only verified users to post comments, i.e. the user must have an account and log in to post comments. Each comment will be linked to an account, so this allows moderators to deal with users who continuously post spam or low-quality content. On the UI side, a good way is to redirect users to their login page when they click the Reply or Post Comment button when they click the "Reply" or "Post Comment" button. Once they complete the authentication process, we can simply redirect them back to the comment thread and open the form.

Finally, we have designed a beautiful, easy to use, and accessible comment thread with cool features like jumping to comments and switching visibility of each comment. We also discuss forms in comment threads and discuss other things to consider in practical applications. Our comment threads mostly use CSS (without JavaScript), which shows how far CSS has developed.