WIP: Stable Markup: Show Tags

I often find myself touching the mouse and hovering over rems or the title to see what tags there are.
I’d like to have them visible at all times.

The problem is that visual tweak is not achievable with Custom CSS because the tags are not just hidden, but removed from the html (like the toggle button).

This having them in the html at all times is also a precodition for future user scripts, like a tag editor.

This is a specific case of the markup improvements hinted at here: Custom Rem-level formatting with tags, but which are not a priority right now ([Poll] Should we further improve the markup?).

Most of the hiding visuals can be recreated with CSS:

  • Hiding power ups all the time or collapse them into a single icon unless hovered. Conceptually (not using actual class names)
.rem:not(:hover) .tag.power-up  /* Hide it completely */
.rem:not(:hover) .tag.power-up .text /* Still show the icon */
{
  display: none;
}
  • Hiding multiple tags unless hovered. Conceptually
.rem:not(:hover) .tag:nth-child(n+3) {
  display: none;
}
  • The +x hidden tags button probably needs to stay a separate html element. While doable I think it is to hacky to make it in CSS.
  • ? I probably missed some behavior.

The tag display is also quite powerful. It uses the same rich text viewer normal rem use which means they can also display code blocks and images. I’m not sure if this is a feature or an anti feature (is it valuable to tag with images or is this a bad idea in general?).


Bugs

These things need to be fixed regardless:

  • The # is not wrapped in an element which means it can not be hidden by CSS.
2 Likes