Visible Unresolved Links?

[jonnie45]

Hi,

Once in a while I create a link by accident that does not resolve, the latest one was hard to spot because I had a double space in a tiddler title but as we all know HTML parsers generally remove additional spaces which meant the rendered title did not have a double space and so I created a non-resolving link elsewhere.

I have a suggestion - by means of example

some text followed by [[non-existent tiddler]] some more text

Because the tiddler does not exist this resolves to…

some text followed by <span>non-existent tiddler</span> some more text

will render as…

some text followed by non-existent tiddler some more text

It’s not immediately obvious there is a problem, the text and context might give it away but it certainly does not stand out.

So my suggestion is to create a new CSS class let’s say ‘tc-unresolved-link’ and resolve this instead as…

some text followed by <span class="tc-unresolved-link">non-existent tiddler</span> some more text

For backwards compatibility the official CSS could render a span with class ‘tc-unresolved-link’ to have no effect but anyone who wanted to spot unresolved links could choose to over ride that CSS with something else thereby giving themselves a visual alert to unresolved links that might otherwise not stand out when surrounded by other text.

So if we chose to make unresolved links render in bold (not the best choice - I would prefer red) - we would see something like…

some text followed by non-existent tiddler some more text

[pmario]

@jonnie45

here is some text followed by [[non-existent tiddler]] and then some more text

Renders as follows

Creates this HTML output. It uses tc-tiddlylink-missing, which is defined as a CSS setting.

A link to HelloThere exists so it uses tc-tiddlylink-resolves

---

You can see this at tiddlywiki.com using the “Internals Plugin” and check “raw HTML” in the preview setting dropdown.

[jonnie45]

Hi Mario,

I will double check but that is not the behaviour I saw… I am using developer tools => inspect.

[pmario]

You may have loaded a theme or you accidentally did overwrite the default CSS settings. To check, you can create a new tiddler eg: my-styles and tag it $:/tags/Stylesheet with this text

.tc-tiddler-body a.tc-tiddlylink-missing {
  color: red
}

So missing links should be coloured red.

[jonnie45]

Confirmed.

I simply added

[[non-existent tiddler]]

and my browser’s developer tools indicates that the HTML for this is

<span>non-existant tiddler</span>

I am not seeing a link at all but instead a span with no classes added.

[pmario]

Do you use TW wikitext or Markdown?

Edit: I did test with markdown and it also works. https://tiddlywiki.com/plugins/tiddlywiki/markdown/

[pmario]

[jonnie45]

TW wiki text.

I will download a vanilla TW, try it out there and compare and try and find out where the difference in behaviour occurs.

If the issue was pure CSS I could imagine maybe I had inadvertently made a change that affects this but the fact that in my case this resolves to a span indicates to me that something other than CSS is responsible.

[pmario]

Which TW plugins / themes do you use?

[jonnie45]

I use quite a few plugins, it will take me time to go through checking.

I did try changing the type to text/markdown on one tiddler but it did not give the desired behaviour.

But one point of interest - when I added

a.tc-tiddlylink-missing {
color: red
}

To my custom CSS tiddler had the following effect on the drop down which is probably not desirable if the tc-tiddlylink-missing is to be used by users interested in missing links in regular tiddler text and not involved in TW development. I have verified that the dropdown text turns back to blue when I remove the CSS above.

Anyway I will look into why my TW differs in behaviour and see if I can chase it down.

If you are able to confirm the drop down behaviour then I would suggest that two separate CSS classes for unresolved links would be a better option - one for developer - system level stuff and one for user generated tiddler content?

[pmario]

Uuups, we need to be more specific I did also update the first post where the style is mentioned.

.tc-tiddler-body a.tc-tiddlylink-missing {
  color: red
}

[jonnie45]

Ahh yes that is the sensible way - I should have been more awake!
Thanks