[tw] Re: CSS dot notation not working with lists

[Schalk Burger]

Thank 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
 

On Tuesday, April 18, 2017 at 11:35:29 AM UTC+2, PMario wrote:
>
> 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 
>>> <http://www.google.com/url?q=http%3A%2F%2Ftiddlywiki.com%2Fstatic%2FLists%252520in%252520WikiText.html=D=1=AFQjCNGWOkk3dRpS9mms4DjC9F2agpWvfw>
>>
>>
> 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:
>
> 
>   one
>   two
> 
>
> 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: 
>
> 
>   one
>   two
> 
>
> 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 
> <https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs>..
>  
>
> 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
>
>

-- 
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 post to this group, send email to tiddlywiki@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/97fc91b5-69c4-42e2-9817-a057aa822197%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[tw] Re: CSS dot notation not working with lists

[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 
> <http://www.google.com/url?q=http%3A%2F%2Ftiddlywiki.com%2Fstatic%2FLists%252520in%252520WikiText.html=D=1=AFQjCNGWOkk3dRpS9mms4DjC9F2agpWvfw>


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, just don't drop a URL to documentation without adding 
any explanation or solution next time.

Kind regards
Schalk Burger

On Monday, April 17, 2017 at 8:08:13 PM UTC+2, PMario wrote:
>
> Hi,
>
> Also have a look here: http://tiddlywiki.com/#Lists%20in%20WikiText 
> <http://www.google.com/url?q=http%3A%2F%2Ftiddlywiki.com%2F%23Lists%2520in%2520WikiText=D=1=AFQjCNEgz0J7VaCkG82-oDzaf2gS0bpN5Q>
>
> -m
>

-- 
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 post to this group, send email to tiddlywiki@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/af859ff6-6d7e-4154-a64c-21b595f95fbb%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[tw] Re: CSS dot notation not working with lists

[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 <http://tiddlywiki.com/static/Lists%2520in%2520WikiText.html> 
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:


 first item


 second item


 third item



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

Underlying HTML code:


 first item
 second item
 third item



<https://lh3.googleusercontent.com/-4Y8IKr0tzww/WPTc0VdveQI/AZw/6Lkwd9ERhxk_PZGjjXzIgfaGxWnSOdIGgCLcB/s1600/Screenshot_1.jpg>
 
<https://lh3.googleusercontent.com/-wK2rzwWPGrI/WPTdfTnQCUI/AZ4/eXY_HusttWc6lCSpQ_MJ4Pow5utOCKOzQCLcB/s1600/Screenshot_2.jpg>



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
@@


<https://lh3.googleusercontent.com/-MTQFxc2URgk/WPTrUDX_b2I/AaI/awMVuBFfs_wi9Z8ngaHYU335mYnFpjJRgCLcB/s1600/Screenshot_3.jpg>








Looking at the TW documentation 
<http://tiddlywiki.com/static/Lists%2520in%2520WikiText.html> 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 <https://www.w3schools.com/tags/default.asp>, it doesn't look 
like valid HTML, perhaps that is the reason for the unexpected results.


 first item
 second item
 third item

<https://lh3.googleusercontent.com/-oZ_807ytNE0/WPTuwycpUZI/AaU/-XI5WPQqGh4iM1s3Wl8NaLrcZaHMl0PbQCLcB/s1600/Screenshot_4.jpg>







What if you would like different numbering for every level of numbered 
lists? The following as 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



<https://lh3.googleusercontent.com/-JCLwjgZbxWQ/WPTzXRiw5mI/Aag/Jds1K83KNYQBGixC9T7xBcWvGPAjlkt_ACLcB/s1600/Screenshot_5.jpg>









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


On Sunday, April 16, 2017 at 4:45:16 PM UTC+2, Drevarr the Old wrote:
>
> 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;

[tw] Dot notation (CSS classes) not working in TW5

[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.

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


Tobias showed on his TW 
 ( code above) how 
to use his CSS class and that works as expected, 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


-- 
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 post to this group, send email to tiddlywiki@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/3944ac98-c690-4f52-a6db-31838680c4f0%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.