When using HTML to color text such as: <span style="color:#0D61FE">TEXT</span>
or <font color="#0D61FE">TEXT</font>
is there any specific reason why using one over the other is better when it comes to how Obsidian works?
When I start using Obsidian Publish, is it better to use <span> or <font>? Any specific reason (that I’m not aware of) to pick one over the other?
Edit: I just found this other topic that mentions using CSS by having a publish.css file (this will - or it’s supposed to - work on both computer and Publish), but it seems that some people are having issues with Publish not recognizing that file.
When you use something like <span style="color:#0D61FE">TEXT</span> you are using inline CSS over an html attribute (span). Most “html render engines” render inline styles in any attribute. That means you can use it almost wherever:
<font> is an old non-recommended deprecated tag, but browsers still apply styles if you use it. Is not about Obsidian but html standards.
Regarding the publish.css I noticed that your site is loading a publish.css file correctly, but the file doesn’t contains any “visual cues” (as colors or borders etc…) to verify if what you want is being applied.
Please double check if you are copying the publish.css in the right place (the root) (also check that the name of the file is publish.css, no publish.css.md or something like that) and if the styles you want are in the file. For example
I asked that, just because I don’t know how Obsidian Publish is behind the scenes. Sometimes, even if “normal” HTML/CSS works on a website, it could be that one tag or the other could behave differently by choice from the Obsidian developers.
That’s someone else’s topic and website(s). I used that as an example of some other people having issues with that file, so that when I decide to publish my own, I know what to use to make sure that it works both locally on my computer (as a local vault) and with Publish.
But it seems that as long as everything is in place and all that, it will indeed read and use that publish.css file. I will try and create one locally and see how it looks like.
Just as an example of what I meant with the whole font vs span thing:
It could be a choice that this <font color="#0D61FE">TEXT</font> would be rendered as normal text, but this <span style="color:#0D61FE">TEXT</span> would actually apply the style to the text. You know what I mean? Hence my question on which was better.
Well, I dunno the rules of the html render engine of Obsidian, I think it uses Electron that means it is using Chromium, so it covers the last HTML, CSS standards. For publishing they have some CSS custom variables that you can use and here are the general CSS variables that you can consider for the external styles applied by the publish.css file.
But regarding your question, for inline styles I use the tag that semantically makes senses, if I want to affect a whole paragraph I use <p>, if it’s only the presentation of a bold text I use <strong> if I don’t want a tag which affects the presentation I use <span>, and given that <font> is deprecated, I never use deprecated tags. Even so, any of this is rendered visually equal.
You’ve elsewhere concluded that <span> is the best option to style your text, and I don’t disagree with that if those two are your only options. But be warned that other markdown will not be interpreted within any html tags. So if you do something like: <span style="color: #0D61FE">My _italic_ text</span>, that inner italic text would not be formatted.
Sadly, I don’t know of any proper ways to handle this using pure markdown, so you’ll either need to live with this feature, or possible use some plugin which extends markdown to allow for extra styling somehow.
When I searched for “obsidian colored text” the options given were <span> and <font>. I didn’t know that was even possible. But then I was looking for more info and saw that <font> was not a good option, because it’s not supported by HTML5, so I started this topic to see which one was better and if there was an alternative. As @sanyaissues mentioned, I can use <p> and all that, depending on what I want to achieve, but I usually just want to have 1 or 2 words with color, so nothing fancy.
With colored text, I think I don’t need to also have it italic / bold (or any other formatting) so that’s ok.
The issue here is that Obsidian Publish doesn’t allow community plugins, that’s why I am avoiding them as much as possible when I know that those are just for my personal use, such as productivity plugins, etc.
Have you considered using ==highlight== for those words, and then using a CSS snippet to make them a given color? Since that is “pure” markdown, it’ll be handled a lot better when switching themes, dark/light mode, and so on.
In any case, my main point was just to make you aware of issue of no markdown between html tags.
100% agree. Actually I don’t use inline styles to modify at all the presentation of my obsidian notes, and I will not say that <span> is the best option. I prefer Plain markdown, and a general theme to apply global styling rules.
For some reason, I’m not a big fan of highlights. It’s easier for me if I just have the text with a certain color.
But in this case using the CSS snippet would be similar to using the inline style with 1 disadvantage:
If I share a note with you that contains inline styles, you will be able to see it as I see it. If I use CSS snippets, you need to have the same snippets in order to see the colors, right?
And still related to having italic text, if I really wanted more than just color, I could use the <i> tag like this:
