Guide: data attributes

[hannesfrank]

This topic is part documentation/tutorial, part feature request.
It is a wiki page. It is not complete yet. If you have something to add, please do.

TODO:

• [ ] Add code samples/templates
• [ ] How exactly does Remnote calculate the value of the attributes. Show example markup and which attributes remnote generates.

Data Attributes

Data attributes (MDN - Using data attributes) are HTML attributes whose value is based on the content/state of an HTML element.

You can select them with attribute selectors (MDN - Attribute selectors).

Data Attributes in RemNote

This allows you to style RemNote in a pretty fancy ways. See Custom Rem-level formatting with tags for examples.

Currently the following data attributes are implemented:

• data-rem-tags on
  • .rem (individual rems) and
  • .rem-reference-container (references)
• data-rem-container-tags on whole subtrees (.tree-node-container)
• data-document-tags
• data-href on a.LinkNode (URL links)

data-rem-tags on .rem-reference-containers

These allow you to style references individually, like color all references to a #Person differently or automatically prepend an emoji.

You can also specifically target (pairs of) consecutive references and style them like this

E.g. see these Roam Graphs.

Note: Power Up tags like Todo and Highlight also generate these, but they also add css classes which are usually more flexible.

data-rem-container-tags

These are the most important ones. They provide the power for custom layouts. They are used build most stuff in the Library, from simple things like blockquotes (Library Link)

to highly nested ones like the Kanban Board (Library Link)

data-document-tags

These allow you to specifically style a whole page, e.g. to make a dashboard like this from Calhistorian:

or a concept maps (spatial layout of concepts of a topic).

data-href

Customize links based on the URL, e.g. like on gwern.net or show the URL on hover (Library Link):

Feature Request: We need more data!

These data attributes could be added:

• The data-rem-reference for the link text of a reference. They currently only have data-rem-tags for the tags applied to the referenced rem.
• A data-tag on tag buttons at the right side of a rem. This can be used to hide specific tags.
• Data tags for descriptors: If a rem has a child descriptor key:: value generate data-descriptor-key="value", e.g. to make flexible progress bars.
• Data tags for user id or user name for imported or - once collaboration is implemented - shared rem.
  • If collaborating on an idea this would make it easier to follow who said what in an outline. Or to highlight ones own thoughts on an imported article. Currently they are indistinguishable.
• Data tags in Searches to highlight specific results or for example to implement different levels of privacy/a focus mode, e.g. by display: none rems with a specific tag.
• Data tags in Queue. Rems in Queue currently have no data tags at all so no Custom CSS styling tags are possible. RIP ASCII-Art table with clozes.
• Basically every RichTextViewer could have it’s content as a data attribute, including references, tags, the rem itself and sidebar entries.
  • This would allow styling based on the content of something. E.g. highlight everything which mentions some piece of text. Logseq does this. Let’s see what they can build with it