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
On Wednesday, April 1, 2020 at 4:03:21 AM UTC+1, TonyM wrote:
>
> 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
> On Wednesday, April 1, 2020 at 1:54:55 PM UTC+11, Kalcifer Kandari wrote:
>>
>> 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
>>
>> On Wednesday, April 1, 2020 at 1:55:57 AM UTC+1, TonyM wrote:
>>>
>>>
>>> KalciferCan 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
>>>
>>>
>>> On Wednesday, April 1, 2020 at 5:17:29 AM UTC+11, Kalcifer Kandari wrote:
>>>>
>>>> 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
>>>>
>>>
--
You received this message because you are subscribed to the Google Groups
"TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to tiddlywiki+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/de6d81f5-9bb5-4a10-a1be-4088546a73fb%40googlegroups.com.
