[TW5][WikiText] CSS dot notation not working with lists

[Schalk Burger]

First off, I'm using TW5.1.13 with Font Awesome 4.7 embedded following the great guide by Tobias Beer. He also made a CSS extension class for Font Awesome available, which I included in my TW. 

/* CHECKLIST EXTENSION */

.check li{
list-style-type:none;
padding:5px;
}

.check li:before{
content: "\f00c";
color: #9bdd81;

font: normal normal normal 24px/1 FontAwesome;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-shadow: 1px 1px 1px rgba(150, 150, 150, 0.2);

position:absolute;
display: inline-block;
margin: 0 0 0 -35px;
width: 30px;
font-size: 24px;
vertical-align: middle;
}

Everything is functioning properly, however I have a question regarding the use of the previously mentioned CSS class with dot notation in WikiText when your making a bullet list. Tobias showed on his TW ( code below) how to use his CSS class and that works as expected.

@@.check
*First item
*Second item
*Third item
@@

But the official TW documentation (code below) indicate that you can also assign a CSS class to an individual member of a list with dot notation, this however doesn't seem to work. I would like to know why this doesn't work, I only have basic web development/ programming knowledge, so I'm probably missing something here...

*.check First item
*.check Second item
*.remove Third item

Thank you

[Drevarr the Old]

I think you are limited to the @@ styleinline format with this implementation.  Playing with Tobias' example, I added a definition for .remove to $:/fonts/FontAwesome/checklist and it seems to work.

/* CHECKLIST EXTENSION */

.check li{
list-style-type:none;
padding:5px;
}

.check li:before{
content: "\f00c";
color: #9bdd81;

font: normal normal normal 24px/1 FontAwesome;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-shadow: 1px 1px 1px rgba(150, 150, 150, 0.2);

position:absolute;
display: inline-block;
margin: 0 0 0 -35px;
width: 30px;
font-size: 24px;
vertical-align: middle;
}

.remove li{
list-style-type:none;
padding:5px;
}

.remove li:before{
content: "\f00d";

color: #9bdd81;

font: normal normal normal 24px/1 FontAwesome;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-shadow: 1px 1px 1px rgba(150, 150, 150, 0.2);

position:absolute;
display: inline-block;
margin: 0 0 0 -35px;
width: 30px;
font-size: 24px;
vertical-align: middle;
}

Enter code here...

then modify text-only checklist tiddler:

@@.check
* a one
@@
@@.check
* and a two
@@
@@.check
* and a three
@@
@@.remove
* and a four
@@

[Schalk Burger]

Thank you Drevarr, but on my side its rendered differently.

If I'm using the above CSS and inline styling as you suggest, I get unintended line spacing between list items. Correct me if I'm wrong, but there is a difference

in the underlying HTML, therein lies the cause for the unintended line spacing. They are indeed separate lists instead on one list, and this could be considered

semantically incorrect, if the desired intention was one list with a different glyph for individual members of a list. The TiddlyWiki documentation suggest the latter:

You can also assign a CSS class to an individual member of a list with this notation.

Compare the following results when using the same CSS in Mozilla Firefox (v45.7.0, v47.0.2, v52.0.2) and Google Chrome (v57.0.2987.133).

@@.check
*First item
@@
@@.check
*Second item
@@
@@.check
*Third item
@@

Underlying HTML code:

<ul class="check">
 <li>first item</li>
</ul>
<ul class="check">
 <li>second item</li>
</ul>
<ul class="check">
 <li>third item</li>
</ul>

@@.check
*First item
*Second item
*Third item
@@

Underlying HTML code:

<ul class="check">
 <li>first item</li>
 <li>second item</li>
 <li>third item</li>
</ul>

You see, I modified the CSS of Tobias, by adding the following definition for the class remove to $:/fonts/FontAwesome/checklist:

.remove li:before{
content: "\f00d";

color: #c9443d;

font: normal normal normal 24px/1 FontAwesome;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

text-shadow: 2px -2px 1px rgba(150, 150, 150, 0.2);

position:absolute;
display: inline-block;
margin: 0 0 0 -35px;
width: 30px;
font-size: 24px;
vertical-align: middle;
}

@@.remove

*First item
*Second item
*Third item
@@

Looking at the TW documentation again, there is also an explanation of the underlying html, when you assign a CSS class to an individual member of a list. So I tried using HTML instead of WikiText, but the browser didn't render it as expected. Looking at a HTML reference, it doesn't look like valid HTML, perhaps that is the reason for the unexpected results.

<ul>
 <li class="check">first item</li>
 <li class="remove">second item</li>
 <li class ="check">third item</li>
</ul>

What if you would like different numbering for every level of numbered lists? The following doesn't seem to work either...

/* list styles */
.nomarker
 li { list-style-type: none; margin-left:-2em; }
.lalpha
 li {list-style-type: lower-alpha;}
.ualpha
 li {list-style-type: upper-alpha;}
.lroman
 li {list-style-type: lower-roman;}
.uroman
 li {list-style-type: upper-roman;}

#.default Level 1 item

##.lalpha Level 2 sub-item

###.lroman Level 3 sub-item

##.lalpha Level 2 sub-item

#.default Level 1 item

So in Summary, I'm still at a loss. According to the TW documentation it should work, but it doesn't. Is there a bug with TiddlyWiki or a mistake in the documentation? What is the solution? 

Thank you

Kind Regards

Schalk Burger

[PMario]

Hi,

Also have a look here: http://tiddlywiki.com/#Lists%20in%20WikiText

-m

[Schalk Burger]

Hey PMario

Thank you for the reply, but you did not offer anything new, that could hint towards an answer to my question(s). I have been referring that exact tiddler of the TiddlyWiki documentation within my posted questions. Look at the link hidden in the following: 

documentation

Never mind me I'm just frustrated... There have been a few new posts already and I'm no closer to a explanation or solution. Not that I'm impatient, and expecting everyone to sit on standby, just to answer my questions - I just dislike struggling to find answers in the dark. 

Also, I didn't think someone would just drop me the URL to the documentation, as if saying: "there go look it up" or "figure it out yourself". I was already referring to that URL in my questions, so to just drop me the URL, especially without any comment/ explanation or anything, was just a bit of a disappointment to be honest.

I know my reply to Drevarr's post is perhaps a bit too long, but I was trying to be thorough. Please read through it carefully, perhaps you might have some insights.

Kind Regards

Schalk Burger

[PMario]

On Tuesday, April 18, 2017 at 2:05:15 AM UTC+2, Schalk Burger wrote:

Thank you for the reply, but you did not offer anything new, that could hint towards an answer to my question(s). I have been referring that exact tiddler of the TiddlyWiki documentation within my posted questions. Look at the link hidden in the following: 

documentation

I didn't follow the link. ... my bad!

 

Also, I didn't think someone would just drop me the URL to the documentation, as if saying: "there go look it up" or "figure it out yourself". I was already referring to that URL in my questions, so to just drop me the URL, especially without any comment/ explanation or anything, was just a bit of a disappointment to be honest.

 You are right. I'm sorry.

------------

The point of the OP is, that the examples produce different HTML code. So the CSS has to be different too.  eg:

@@.check
* one
* two
@@

produces:

<ul class="check">
  <li>one</li>
  <li>two</li>
</ul>

which can be styled with CSS (just an example):

.check li {
  background: yellow;
}

This mechanism is used, with Tobi Beers FontAwesome example page. ... but IMO it uses a workflow, that is more complicated as it should be. ... As you found out. Since what we want is the following:

---------------

*.done one
* two

produces:

<ul>
  <li class="done">one</li>
  <li>two</li>
</ul>

which can be styled with:

li.done {
  background: yellow;
}

Be aware, that I used ".done" as the class indicator. So you can use Tobias' TW for testing, without a styling conflict!
Styles used for the above HTML

li.done{
list-style-type:none;
padding:5px;
}

li.done:before{
content: "\f00c";
color: #9bdd81;

font: normal normal normal 24px/1 FontAwesome;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-shadow: 1px 1px 1px rgba(150, 150, 150, 0.2);

position:absolute;
display: inline-block;
margin: 0 0 0 -35px;
width: 30px;
font-size: 24px;
vertical-align: middle;
}

I personally would try to make the stuff simpler with less dependencies. See my German version. http://tiddlywiki.com/languages/de-DE/#Task%20Management%20mit%20Listen:%5B%5BTask%20Management%20mit%20Listen%5D%5D%20%24%3A_TaskStylesheet%20%24%3A%2F_tags%2FListIcon
The concept is similar but has a simpler StyleSheet. ... Except creating the data:uri css.. 

I use MDN Mozilla Developers Network as my reference manual for HTML, CSS and JS stuff. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors

have fun!
mario

[Schalk Burger]

Thank you very much for your reply, PMario. 

Your posting was very helpful, I really appreciate that you explained how to solve the problem. I was able to adjust the CSS to accommodate for both eventualities, 

this helps me to lower the learning curve for users of my wikis that have no CSS knowledge at all. 

By the way, I'm of German descent, since my great great grandfather immigrated from Germany... ;-p

Kind Regards

Schalk Burger