[TW5] class tagged and special characters

[Danielo Rodríguez]

Hello,

thanks to the bad search of Google Groups, I am forced to open a new thread to ask this.

How can I create CSS rules for tiddlers which tag contains special characters such $ or / ? I tried using the character encoding like %2F in the stylesheet, but it does not work.

Any idea?

Many thanks.

[Jeremy Ruston]

Hi Danielo

You need to URL encode the tag name, and then apply CSS escaping rules; there's a good discussion here:

https://mathiasbynens.be/notes/css-escapes

The rules basically boil down to preceding each of these characters with a backslash:  !, ", #, $, %, &, ', (, ), *, +, ,, -, ., /, :, ;, <, =, >, ?, @, [, \, ], ^, `, {, |, }, and ~.

There are some docs at the bottom of this tiddler:

http://tiddlywiki.com/How%20to%20apply%20custom%20styles%20by%20tag

Here's a quick JS function that will apply both rules:

(function(s) {return "tc-tagged-"+encodeURIComponent(s).replace(/[!"#$%&'()*+,\-./:;<=>?@[\\\]^`{\|}~,]/mg,function(c){return "\\" + c;});})("Put your tag here")

It's quite useful, so I've included it in the core for 5.1.0 here:

https://github.com/Jermolene/TiddlyWiki5/commit/7b8928886bf101b0cf4a8cc2d2dd2e576ec1c8d8

Best wishes

Jeremy.

--
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+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/ea26ee6f-d1ae-41d3-84bb-e2318e65fc1f%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Jeremy Ruston
mailto:jeremy...@gmail.com

[Danielo Rodríguez]

Hello Jeremy,

I have tried also escaping the characters like this without any luck

.tagged-\$\:\/OTW\/UI.tc-tiddler-title {
    display: none;
}

As you suppose, the tiddler is tagged 

$:/OTW/UI

Many thanks

[Jeremy Ruston]

Hi Danielo

You're missing out the URL encoding step,

Best wishes

Jeremy

—
jeremy...@gmail.com

[Danielo Rodríguez]

Ok, trying your funciton I got a different encoding:

.tc-tagged-\%24\%3A\%2FOTW\%2FUI.tc-tiddler-title {
    display: none;
}

But it is still not working... I'm getting crazy. I'm using this rule in a stylesheet tiddler. Does that make any difference?

[Jeremy Ruston]

Hi Danielo

Are you missing a space in between the two class selectors?

Best wishes

Jeremy

—
jeremy...@gmail.com

[Danielo Rodríguez]

El lunes, 28 de septiembre de 2015, 22:43:54 (UTC+2), Jeremy Ruston escribió:

Hi Danielo

Are you missing a space in between the two class selectors?

Best wishes

Yes! I was going to post that I am stupid and dumb, but you realized first. :D

Many thanks!