BUG: UI lists have poor HTML formatting causing unwanted whitespace nodes

[Kalcifer Kandari]

Hello,

I would like to add some ::before and ::after content using CSS to the dynamically generated lists around the UI, for example, lists of tiddlers in the sidebar, and in plugins, and so on. The problem is that due to the HTML formatting of the list items, there is always a whitespace node after the ::before content and before the ::after content.

Here is what I want:

[before content]Some listed tiddler[after content]

Here is what I get:

[before content] Same listed tiddler [after content]

Here is how the HTML is formatted:

<a>
Tiddler title
</a>

Here is how the HTML should be formatted:

<a>Tiddler title</a>

This applies to <li> tags as well, and maybe others.

There is no way to remove those whitespace nodes with CSS.

If anyone knows how fix this by editing system tiddlers, I would be willing to dabble, but I have no idea where to look.

Thanks,

Kalcifer

[TonyM]

Kalcifer

Can you provide a not working example we could put on TiddlyWiki.com? You are taking a less common path, so it is not clear what is behind your problem.

In effect you are talking about concatenation which often confuses people, however in your case case css seems to have a role.

It is common to define a macro or filter to concatenate and in some cases the addition of the \whitespace trim

\define name(param)
\whitespace trim
concatenate here $(variablename)$/$param$
\end

Regards

Tony

[Kalcifer Kandari]

I'm just applying some custom CSS to <a> HTML tags. I'm not creating any macros, the lists of links are just generated by TiddlyWiki itself, like those in the sidebar.

I'm doing something like:

div.tc-tab-content.tc-vertical a::before {
    content: "[before]";
}


div.tc-tab-content.tc-vertical a::after {
    content: "[after]";
}

Kalcifer

[TonyM]

Kalcifer This looks right, but I am no CSS expert, perhaps someone else can help. However if I understood what you are doing with you lists I can give you a WikiText solution. Regards Tony

[Kalcifer Kandari]

Yeah, the CSS is correct, but the problem is additional HTML whitespace nodes are added by the browser due to poor HTML formatting by TiddlyWiki. Whitespace nodes in this case are literally just spaces. The reason they are created is because browsers insert them in place of newlines in HTML for inline elements, such as <a> and <li>.

So given this CSS:

div.tc-tab-content.tc-vertical a::before {
    content: "[before]";
}


div.tc-tab-content.tc-vertical a::after {
    content: "[after]";
}

And given this HTML for some link in the sidebar, and note this is automatically generated by TiddlyWiki, I'm not doing it:

<a>
Tiddler title
</a>

That currently is outputted as:

[before] Tiddler title [after]

Those extra spaces before and after 'Tiddler title' are not desirable.

The fix is simple, remove the newlines in the HTML:

<a>Tiddler title</a>

Which would be outputted as:

[before]Tiddler title[after]

Which is correct.

I don't know where in the TiddlyWiki code the links are generated, I haven't modded TiddlyWiki before apart from some CSS. If I could fix it for myself now, that would be nice, but TiddlyWiki should generate properly formatted HTML in the first place, that's why I'm also reporting it as a bug.

Kalcifer

[Mark S.]

Can you share where in the "tree" you're finding this? I mean, how you navigate to a link that has this character?

I don't seem to be able to locate div.tc-tab-content.tc-vertical -- especially the "vertical" part.

[Kalcifer Kandari]

Attached.

Kalcifer

[PMario]

Hi,

As a workaround you can change the $:/core/ui/ListItemTemplate to

<div class="tc-menu-list-item">
<$link to={{!!title}}><$view field="title"/></$link>
</div>

You should create a github issue ...

It may be fixed, if it doesn't have too many side effects ;)

There are probably more elements, that need to be changed.

-mario

[Mark S.]

I think the space is deliberate. It's meant to offset the title from the date stamp.

I'm wondering if it would be possible to use CSS to move the ::before over 1em ?

[Kalcifer Kandari]

You're a wizard Mario. I knew it would be something like that. There are more elements that need changed, just need to track them down. At least I have a vague idea of where to look.

You should create a github issue ...

Yeah, I'll do that.

I think the space is deliberate.

I don't think so. There are cleaner ways to add a space to particular instances where it's needed.

I'm wondering if it would be possible to use CSS to move the ::before over 1em ?

Don't waste your time trying to find a CSS solution to a HTML problem, I've exhausted all the possibilities.

Kalcifer

[Kalcifer Kandari]

Here is the bug report on GitHub: https://github.com/Jermolene/TiddlyWiki5/issues/4532

Found some additional files that needed to be edited, still may be more:

• $:/core/ui/ListItemTemplate
• $:/core/macros/timeline
• $:/core/ui/PluginListItemTemplate
• $:/core/ui/PluginInfo/Default/contents

Kalcifer

[Mark S.]

On Wednesday, April 1, 2020 at 11:04:39 AM UTC-7, Kalcifer Kandari wrote:

Yeah, I'll do that.

I'm wondering if it would be possible to use CSS to move the ::before over 1em ?

Don't waste your time trying to find a CSS solution to a HTML problem, I've exhausted all the possibilities.

One reason you might want a CSS solution is because once you hack a core tiddler you have to keep track of your changes. Otherwise you might have conflicts when upgrading.

I got this result (should see screenshot here)

when using this CSS fix

/* See 'sidebar -> More -> All' for example output */

.tc-tab-content a::before {
   position: relative ;
    content: "[before]";
   left: 2px ;
}

.tc-tab-content a::after{
    content: "[after]";
   position: relative ;
   left: -2px ;

}

[Kalcifer Kandari]

I don't know, it's going to get freaky because the before content is actually a bullet, and the links are underlined.

Kalcifer

[PMario]

On Wednesday, April 1, 2020 at 8:55:19 PM UTC+2, Mark S. wrote:

On Wednesday, April 1, 2020 at 11:04:39 AM UTC-7, Kalcifer Kandari wrote:

Yeah, I'll do that.

I'm wondering if it would be possible to use CSS to move the ::before over 1em ?

Don't waste your time trying to find a CSS solution to a HTML problem, I've exhausted all the possibilities.

One reason you might want a CSS solution is because once you hack a core tiddler you have to keep track of your changes. Otherwise you might have conflicts when upgrading.

I think it's worth an issue and it should be fixed in the core.

-mario

[PMario]

On Thursday, April 2, 2020 at 2:57:24 PM UTC+2, PMario wrote:

...

I think it's worth an issue and it should be fixed in the core.

Spaces between elements shouldn't be done with whitespace. It should be CSS. Whitespace causes and caused problems. Not only with styling.

-m