Skip to content

Distinction between subject and body of messages is hard

Distinction cannot be easily done between the subject line and the body when messages are uncollapsed. A visual clue could be helpful especially when messages are auto-uncollapsed.

See for instance the following image.

Screenshot_20200324_090339

The first post does not have a subject, while the second have a subject. The only clue that the second post has a subject is the "Show less" link, but coming after the post.

On Mastodon, the "Show less" button being next to the subject tells it's the subject, and not the body. There is also a paragraph space instead of a line-break.

Here are a few possibilities for a better distinction between subject and body:

  • emphasise the subject (with <em> or <strong>)
  • center the subject (like the "Show less" button)
  • put a space or an horizontal line after the subject
  • use a different foreground or background color for the subject

When I inspect the elements, I note that the subject and the body are put in the same <div> (<div class="status-content-media-body">), and that the "Show less/more" link rewrites this <div>. To allow a better distinction between subject and body, they should be put in two separate <div>.

Edited by Feufochmar