[tw5] Re: Few question about using @@ construction to style the tiddlers

[Eric Shulman]

On Wednesday, September 9, 2020 at 9:44:34 AM UTC-7, talha131 wrote:
>
> Your `div` trick solve the issue.
>

The  trick is goes all the way back to the original TiddlyWiki Classic 
days, and is described here:

https://tiddlywiki.com/#Lists%20in%20WikiText
(scroll to the bottom of the tiddler where it says "Paragraphs in Lists")

Note: you can actually use any matching pair of SGML tags you like, even 
ones that aren't defined for HTML.
This can be used for *any* "block mode" content (i.e., formatting the 
requires newlines), such as tables, bullets, etc.

For example, here's a complex TiddlyWiki formatted table within numbered 
bullet item:
# Step 1
# Step 2
# Step 3

|Cell1 |Cell2 |Cell3 |Cell4 |
|Cell5 |Cell6 |Cell7 |<|
|Cell5 |~|Cell7 |Cell8 |
|>|Cell9 |Cell10 |Cell11 |

# Step 4
# Step 5
# Step 6

-e

-- 
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/b0f03ea0-ab5c-44d2-893c-d32ca931e8d1o%40googlegroups.com.

[tw5] Re: Few question about using @@ construction to style the tiddlers

[talha131]

Just two days ago I was facing this problem

# item 1
# item 2 
```
code
```
# item 3

I was wondering how to make it work in TW.

In some flavors of Markdown intending the code line does the trick and the 
numbering continues from the previous number.
In AsciiDoc, you can tell the markup to continue the counting.

Your `div` trick solve the issue.

# item 1
# item 2 

```
code
```

# item 3


-- 
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/5e895b8f-4782-424d-bd1e-bd43852171d9o%40googlegroups.com.

[tw5] Re: Few question about using @@ construction to style the tiddlers

[Brian Radspinner]

Somewhere else in this group, it was stated that a blank line is needed *after 
any HTML element* *before using WikiText* to make sure that everything 
works as needed. So, when I want a more complicated nesting but still use 
WikiText for less typing, I put a blank line between the HTML and 
WikiText...

[image: Nested WikiText.png]
On Wednesday, September 9, 2020 at 6:11:48 AM UTC-7 Eric Shulman wrote:

> On Wednesday, September 9, 2020 at 5:53:17 AM UTC-7, talha131 wrote:
>>
>> Thank you Brian. This is exactly what I was looking for. Much 
>> appreciated! Some behavior of the @@ is undocumented. I enabled 
>> "tiddlywiki/internals", plugin to see the raw HTML. I noticed, if 
>> @@background-color: 
>> red; is not immediately followed a by newline after the semicolon, then 
>> the rule is applied to span element, instead of div. In your solution I 
>> noticed if the enclosing  is not followed by a newline then the 
>> nested rules do not work. I guess @@ parser is particular about newlines 
>> and spaces.
>>
> The fact that "@@attribute:value; ...content ... @@" cannot be nested 
> really limits it to use for quick styling with simple attributes.  In 
> general, it is much better to use proper CSS class definitions (either via 
> a separate tiddler tagged with $:/tags/Stylesheet, or via 
> ... within the content of a tiddler).
>
> When you do want/need to use nested "inline CSS", you can always resort to 
> HTML syntax:
>  content   or  content .
>
> Thus, in Brian's example, you could eliminate the "@@" syntax entirely, 
> and just write:
> 
>
> # line
> # line 
>
> # line
> # line
> 
> 
>
> See https://tiddlywiki.com/#Lists%20in%20WikiText for more examples of 
> how to apply CSS to bullets.
>
> -e
>
>
>>

-- 
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/65913391-032d-450b-b28d-7560f1233a6fn%40googlegroups.com.

[tw5] Re: Few question about using @@ construction to style the tiddlers

[Eric Shulman]

On Wednesday, September 9, 2020 at 5:53:17 AM UTC-7, talha131 wrote:
>
> Thank you Brian. This is exactly what I was looking for. Much appreciated! 
> Some behavior of the @@ is undocumented. I enabled "tiddlywiki/internals", 
> plugin to see the raw HTML. I noticed, if @@background-color: red; is not 
> immediately followed a by newline after the semicolon, then the rule is 
> applied to span element, instead of div. In your solution I noticed if 
> the enclosing  is not followed by a newline then the nested rules do 
> not work. I guess @@ parser is particular about newlines and spaces.
>
The fact that "@@attribute:value; ...content ... @@" cannot be nested 
really limits it to use for quick styling with simple attributes.  In 
general, it is much better to use proper CSS class definitions (either via 
a separate tiddler tagged with $:/tags/Stylesheet, or via 
... within the content of a tiddler).

When you do want/need to use nested "inline CSS", you can always resort to 
HTML syntax:
 content   or  content .

Thus, in Brian's example, you could eliminate the "@@" syntax entirely, and 
just write:


# line
# line 

# line
# line



See https://tiddlywiki.com/#Lists%20in%20WikiText for more examples of how 
to apply CSS to bullets.

-e

​
>

-- 
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/23f726ff-0ff0-4887-b7bf-5a0ac9dc6a30o%40googlegroups.com.

[tw5] Re: Few question about using @@ construction to style the tiddlers

[talha131]

Thank you Brian. This is exactly what I was looking for. Much appreciated!

Some behavior of the @@ is undocumented. I enabled "tiddlywiki/internals", 
plugin to see the raw HTML. 

I noticed, if @@background-color: red; is not immediately followed a by 
newline after the semicolon, then the rule is applied to span element, 
instead of div.

In your solution I noticed if the enclosing  is not followed by a 
newline then the nested rules do not work.

I guess @@ parser is particular about newlines and spaces.
​

-- 
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/00a9bded-488d-415e-9bf6-5cdbea6b4157o%40googlegroups.com.

[tw5] Re: Few question about using @@ construction to style the tiddlers

[Brian Radspinner]

Just to give another option, you can nest @@..@@ by adding some HTML around 
the nested @@...@@:

@@list-style-type:decimal;
# line
# line **

@@list-style-type:lower-alpha;
# line
# line
@@

**
@@

Proper CSS work is probably better, but this could work for quick one-off 
nested styling.

On Sunday, September 6, 2020 at 1:43:45 PM UTC-7 talha131 wrote:

> Yeah, Eric. I meant that's the solution I used. 
>

-- 
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/ca4af8ad-33ff-402b-8690-cf7d07df5135n%40googlegroups.com.

[tw5] Re: Few question about using @@ construction to style the tiddlers

[talha131]

Yeah, Eric. I meant that's the solution I used. 

-- 
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/380d9da6-62bd-4a58-9fd0-8d8d28f649f4o%40googlegroups.com.

[tw5] Re: Few question about using @@ construction to style the tiddlers

[Eric Shulman]

On Sunday, September 6, 2020 at 11:22:37 AM UTC-7, talha131 wrote:
>
> Thank you Mat. I ended up using your solution.
>

Just to note... we discussed this just 4 days ago in the topic titled 
"Regarding list bullets"

In fact, this is *exact* same solution that YOU yourself posted, here:
https://groups.google.com/d/msg/tiddlywiki/sl8pm8XgLGA/s7XNca_NAQAJ

-e

-- 
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/522e74fb-0514-4d43-b30e-ee0b9de73119o%40googlegroups.com.

[tw5] Re: Few question about using @@ construction to style the tiddlers

[talha131]

Thank you Mat. I ended up using your solution.

-- 
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/6c9f09a1-c6db-4895-a284-7c8274849fd0o%40googlegroups.com.

[tw5] Re: Few question about using @@ construction to style the tiddlers

[Mat]

@talha131 ...or maybe I should say @@.talha131  ;-)

Try this

@@.myclass
*foo
**bar
@@


.myclass li {list-style-type: decimal; } 
.myclass li li {list-style-type: lower-alpha; }


i.e you define a new class and apply this class. In the above, the class is 
defined in a local styleblock. If you want to use it globally you should 
instead move the content that is between the style tags into a stylesheet 
tiddler, i.e any tiddler tagged "$:/tags/Stylesheet" and with the type 
"Static stylesheet"

<:-)

-- 
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/0af376d5-126f-48a6-bdc0-423759b1091fo%40googlegroups.com.

[tw5] Re: Few question about using @@ construction to style the tiddlers

[talha131]

Thank you Brian. I was trying to achieve something like this 

li {list-style-type: decimal; } li li {list-style-type: lower-alpha; }

But it seems nesting rules using @@ is not possible.
​

-- 
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/f6ba4a84-c607-44c3-8563-3dd90f3e992eo%40googlegroups.com.

[tw5] Re: Few question about using @@ construction to style the tiddlers

[Brian Radspinner]

You just specify the styling you want, and wrap the @@...@@ around the 
item(s), leave out the element, since you can only wrap around a single 
element (or nested elements). The following all work...

``` 
@@list-style-type:decimal;
* list item
* list item
@@

@@list-style-type:lower-roman;
* list item
* list item
@@

@@list-style-type:circle;
* list item
* list item
@@
``` 

On Wednesday, September 2, 2020 at 4:25:39 AM UTC-7 talha131 wrote:

> TiddlyWiki documentation mentions @@ construction here 
> .
>
> It says you can do
>
> @@background-color:red;
> Your text
> @@
>
> How can I use this construction to apply style to a particular element? 
> Like,
>
> li {list-style-type: decimal; }
>
> I tried 
>
> @@li {list-style-type: decimal; }
>
> But it does not work.
> Question 2 
>
> Document mentions
>
> @@background-color:red;
> Your text
> @@
>
> But this also works
>
> @@background-color:red;
> @@
>
> Your text
> More text
>
> Notice that there is no next between @@, but the rule gets applied to the 
> whole tiddler.
>
> Is this syntax correct to use? Or is it a bug in TW code?
>

-- 
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/254256ce-cd4a-4886-b673-eae57fbd05ban%40googlegroups.com.