Inconsistent tag styling between views

Steps to reproduce

I have a css snippet that permits me to define a specific colour for each tag across all of the pages that it appears on. At present this works in both Source view and Live preview but fails in Reading view.

Expected result

The tag should be displayed in the same colour across all the views for a given page.

Actual result

The tag is displayed in the expected colour in the Source view and Live Preview but not in the Reading view

Environment

  • Operating system:
    Mac OS Big Sur V11.7
  • Debug info:
    Examples for the tag #status/waiting…

The styling used in the Reading view

<a href="#book" class="tag" target="_blank" rel="noopener">#book</a>

The styling used in Source view and Live Preview

<span class="cm-hashtag cm-hashtag-end cm-meta cm-tag-statuswaiting">status/waiting</span>

Additional information

The examples you posted aren’t styllng (CSS), they’re HTML.

Did you target .tag in your snippet?

Yes, I sorta agree that the title may be misleading having done a bit more work on this (I added the code snippets in an update) but the html and associated style class definitions are not consistent across the different types of views.

Moved to help. It’s better you get css help in discord.

I think this is because Reading View uses the sort of markup you’d normally want in a document (as if you exported to HTML and then immediately opened that file), and Editing View uses the sort of Frankenstein markup needed to build a fancy text editor out of webpage technology.

Note that the markup will be different in the next public version of Obsidian (already is in Insider builds), in ways that are supposed to make things easier (but I’d guess it won’t bring the sort of harmonization you seek).

My post isn’t about getting help for css. It is questioning whether the difference in coding of tags is a result of recent changes to Obsidian views and whether it should be normalised in the core code.

Then you should ask in the inside channel.

From what I recall it has always been different, but i maybe be wrong.

Yeah. I get that. Thanks.
One of the few things I don’t like about Obsidian at present is how we can’t simply control the colours of tags and instead have to resort to a lot of complexity. I guess I will raise it as a feature request but wont hold my breath given the workload these guys are already under with implementing new features.

But that still doesn’t make it right necessarily. I guess the best thing to do is to raise a feature request for the ability to assign colours to tags so that they display consistently across different views and pages.

Ok. WIll do. I didn’t see this response before I answered the smore recent one.

I dont see tag color assignment as a must-have core feature, but I’m really surprised there isn’t a plugin.

I might have a look at that but short of time at present. For now I have decided to target the tags as I use themI and have a few of the essential ones working now. There are quite a lot in my vault so it is such a pain to have to define them in two different ways but if there is a good reason for it and it’s not actually a bug then fair enough.

Colour coding is a method recommended in some books/systems and it works well for me.

Thanks for the input anyway!

What does your CSS for this look like?

I agree tag colors can be useful.

From the announcement of the changes to styling, it sounds like this will be less of an issue in the new version:

“Previously, … Several selectors were typically required to target the same element across Reading mode and Live Preview. … With 0.16 … the CSS variables … are … designed to provide parity across Reading mode and Live Preview.”

I will have a look at that link, thanks again. For now I have found that the minimal css I can get away with which works in all the cases I have tested so far is

.cm-tag-statusinprogress{
  color:black;
  background-color:forestgreen;
}
.tag[href^="#status/inprogress"]{
  color:black;
  background-color: forestgreen;
}

The first definition covers Source and Live Preview modes whilst the second provides compatibility for the Reading view. It works ok in light and dark mode for the default theme in Obsidian v0.16.3. There may be more elegant ways of doing this but since it works it is good enough for me., for now at least.

My primary focus at present is a major reorganisation of my workflow to take advantage of some of the great plug-ins that are now available and just wanted to see if there was a quick fix for the coloured tags annoyance along the way.

Thanks for your input.

It might lessen the annoyance (or at least the clutter) if you consolidate:

.cm-tag-statusinprogress, 
.tag[href^="#status/inprogress"]{
  color:black;
  background-color:forestgreen;
}

Once again thanks very much. I totally forgot you could do that. It’s a long time since I did any css!!! Give me embedded programming every day. It is great that people are helpful and courteous on this forum.

You’re welcome! Thanks for the kind words. One more thing: here is a relevant plugin idea you could upvote: Tag Pills+ (I don’t use tag colors but I’m very surprised there isn’t already a plugin or more discussion about it).