Continuing ordered lists in wikitext

[Scott_Sauyet]

I’m trying to figure out if there’s a pure-wikitext way to continue the numbering of ordered lists after a break. I’m trying to mostly mimic certain print documents, but I want the source to be as simple as possible. The maintainers will not be TW-savvy or even web-savvy. If possible, I’d prefer to have no explicit HTML at all. The goal is on the left:

I’d love to do it with markup like this:

!!!! Info about first three elements

# Item One
# Item Two
# Item Three

!!!! Info about next four elements

<!-- @@something here, perhaps? -->
# Item Four
# Item Five
# Item Six
# Item Seven
<!-- @@and maybe here -->

Several old Google Groups threads offered ways to get this output, probably the simplest one being this:

!!!! Info about first three elements

# Item One
# Item Two
# Item Three<div class="list-interruption">

!!!! Info about next four elements
</div>
# Item Four
# Item Five
# Item Six
# Item Seven

(I would use the class list-interruption to de-indent the <div>, and who knows what else?)

I can do this somewhat semantically with HTML markup:

!!!! Info about first three elements

<ol>
  <li>Item One</li>
  <li>Item Two</li>
  <li>Item Three</li>
</ol>

!!!! Info about next four elements

<ol>
  <li value=4>Item Four</li>
  <li>Item Five</li>
  <li>Item Six</li>
  <li>Item Seven</li>
</ol>

But I would prefer this to be in maintainable plain wikitext. Has anyone been able to do this?

Continued Lists.json (1.8 KB)

[etardiff]

I was going to say that this may not be possible in CSS and suggest the following ugly macro workaround:

\procedure start-list(num, content)
<ol start=<<num>>>
<$list filter="[<content>splitregexp[\n#]!match[]trim[]]">
	<li>{{!!title}}</li>
</$list>
</ol>
\end

<<start-list 4 """
# four
# five
# six
""">>

But I did a little more reading and discovered the counter-set property, and I think this might be the solution you wanted. Here’s an example heavily based on the code from the MDN writeup: ol testing.json (844 Bytes)

Put the following in a tiddler with the tag $:/tags/Stylesheet (and no tiddler type; using type: text/css will prevent the wikitext parsing, which is crucial for this approach!)

/* hide the default counter */
ol { list-style: none; }

/* create a new counter for the first time */
ol { counter-reset: item 0; }

/* increment the counter on each list item */
li { counter-increment: item; }

/* show numbers on list items */
li::before { content: counter(item) ". "; }

/* change the existing counter value */
<$list filter="[range[20]]" variable="num">
<$let start={{{ [<num>subtract[1]] }}}>

.list-start-<<num>> { counter-set: item <<start>>; }
</$let>
</$list>

And use it like this:

# test
# test
# test

@@.list-start-4
# test
# test
# test
@@

# test
# test
# test

Results:

Notes:

• Since this method relies on hiding the default <ol> counters and building our own from scratch, you may need to adjust the styling/indentation to your preference.
• I applied this globally for maximum ease of use, but this does mean it will affect all ordered lists (and manually setting a start point may not work anymore).
• I used [range[20]] to demonstrate the programmatic generation of styles. You may need to adjust the number up depending on your anticipated list size. At the same time, I wouldn’t set it too much higher than you expect to need, since each iteration generates an additional CSS class that will have to get parsed when your wiki is rendered. I’ve used this $list technique to generate special classes before (e.g. styling links based on their target tiddler) and not noticed any appreciable slowdown, but I can’t vouch for how it’d act if you used range[10000]!

[nemo]

I dont think wikitext can do this natively, but markdown can, so that may be the most syntax friendly solution - though it’ll mean installing the markdown plugin if you dont have it

you can also use markdown fragments within wikitext, if you still need transclusions/macros/etc
continued list w_ markdown.json (705 Bytes)

[Scott_Sauyet]

@etardiff

I was going to say that this may not be possible in CSS and suggest the following ugly macro workaround:

I did try many such possibilities. None seemed appropriate for TW novices.

@etardiff

But I did a little more reading and discovered the counter-set property, and I think this might be the solution you wanted.

Thank you! This is great.

I played around with counter-reset. When it wasn’t working for me (in Brave last night or in Chrome today), I read a little deeper, and found that there are parts of it that work only in Firefox. I’m afraid I gave up at that point, but I even if I hadn’t, I’m not sure I would have come upon this solution, as, though I’ve used it occasionally, I wasn’t thinking at all about dynamic CSS.

@etardiff

I applied this globally for maximum ease of use, but this does mean it will affect all ordered lists (and manually setting a start point may not work anymore).

I certainly have no problem restricting it. In fact, although it leads to more in-memory CSS, I think the following is fairly elegant:

<$list filter="[range[20]]" variable="num">
<$let start={{{ [<num>subtract[1]] }}}>

ol.list-start-<<num>> { 
  list-style: none; 
  counter-reset: item 0;
  li { counter-increment: item; }
  li::before { content: counter(item) ". "; }
  counter-set: item <<start>>;
}

</$let>
</$list>

@etardiff

You may need to adjust the number up depending on your anticipated list size

I’ll take a look, but I probably can get away with 10 or so.

What this really points to for me, though, is that as useful as the @@ notation is, I would like to be able to use something like it not just for class and style but to add arbitrary attributes.

It would really be nice to be able to use something like

@@&start=4
* item
* item
@@

and simply take advantage of the start property of ordered lists. (I would love type as well; I seem to be doing a lot of outlining.)

Regardless, thank you again. This is a great solution!

[Sunny]

Hello @Scott_Sauyet
I just saw this on @tonga site.
Maybe I’m missing the point but is this what you requested.
Please ignore my post if I have misunderstood.

[Scott_Sauyet]

@Sunny

Maybe I’m missing the point but is this what you requested.

Yes, this covers much the same material. I had settled on one of the techniques mentioned there, inserting a block-level HTML tag into the last list element before the break. While I could have lived with that, I wanted something simpler and more semantic. The answer from @etardiff provided it.

But thank you. If nothing else, I have a new helpful site bookmarked!

[Sunny]

Thanks for taking the time to reply.

There are a lot of Customization Examples on @tonga’s site that are helpful to new TW users.

[TW_Tones]

@Scott_Sauyet I feel confident a solution is available, but it is true we can go down some rabit holes in the process. Some of my research provides a direction to an answer;

My solution reverses marking where to continue the numbers and instead marks the block where all # within just continue.

Reading Block Mode WikiText the only block mode wiki text which render the content as normal, are the @@ and Block Quote <<< however the @@ is about styles, but I would prefer to apply a one word classname.

So using the blockquotes I can get list continuation as follows;

• See below for CSS.

<<<.list-container

# First item
# Second item

Some in-between content

# Third item
# Fourth item

<<<

# Outside1
# Outside2

Appears as;

But as you may know what CSS givith CSS can take away. So I propose one of the two answers;

1. that in the above class definitions we reverse the blockquote CSS in the “list-container” class definition so it becomes a simple block.
2. Identify another three character set (maybe 1/2 char) that allows wrapping a block of wikitext such that it applys no blockquote and allows custom CSS to be applied, such as in this case above.

I prefer the second option as its “not pretending to be a blockquote then the class reverses it” and I think it is a general solution that special classes can be applied to a “container” to do other things as well. Such as;

• Ask all ul li items to use a different bullet
• Increase or apply a different font to a block etc…
• Leverage various block styles as per @Mohammad’s shiraz formating and more

Use the following style or place in a stysheet (remove style tags) to make the above work;

<style>
.list-container {
  counter-reset: my-counter;
}

.list-container ol {
  list-style: none;
  padding-left: 1.5em;
  margin: 0 0 1em 0;
}

.list-container li {
  counter-increment: my-counter;
  position: relative;
}

.list-container li::before {
  content: counter(my-counter) ". ";
  position: absolute;
  left: -1.5em;
}
</style>

[TW_Tones]

I have since created a new block wiki rule using &&&, ask if you want the current source code.

• We could also build an editor toolbar button

So now the following works, but I would move the CSS to a stylesheet.

<style>
.list-container {
  counter-reset: my-counter;
}

.list-container ol {
  list-style: none;
  padding-left: 1.5em;
  margin: 0 0 1em 0;
}

.list-container li {
  counter-increment: my-counter;
  position: relative;
}

.list-container li::before {
  content: counter(my-counter) ". ";
  position: absolute;
  left: -1.5em;
}
</style>

&&&.list-container

Some text

# one 
# two
# three

Continued?


# one continues
# two
# three

&&&

# one restarts
# two
# three

We may want to alter the margin to keep the default indent.

[Edited] @Mohammad

As I said previously I am testing this &&& with shiraz CSS and many of the shiraz classes can be applied, however the primary delivery method in Shiraz are macros for more complex structures.

Of note the classes can be stacked as elsewhere.

&&&.list-container.class2.class3

[Mohammad]

Hi @Scott_Sauyet
This is a simple solution: Ordered List and Continued List Number in TiddlyWiki - Tips & Tricks - Talk TW
It works per tiddler, so in the next tiddler, number starts from 1 again.

[TW_Tones]

@Mohammad

This is a simple solution: Ordered List and Continued List Number in TiddlyWiki - Tips & Tricks - Talk TW
It works per tiddler, so in the next tiddler, number starts from 1 again.

In my example above, if you move the definition of list-container to a stylesheet, you can set the class field on any tiddler to list-container, and it will apply the list-container class to the contents.

• However it also increments all numbers including ## but the above link does not.

ie per tiddler as well.

So my revised list-container class definition is; thanks to @Mohammad

.list-container ol {
  list-style: none;
}
.list-container ol li:before {
  counter-increment: mycounter;
  content: counter(mycounter) ". ";
}
.list-container ol:first-of-type {
  counter-reset: mycounter;
}

[Edited]

I have been testing the aformentioned &&& block and it seems to be working well, allowing me to simply mark a block and add one of more classes to that block.

• &&& is a block of wikitext which is effectivly a div to which 0 or more classes can be applied

[Scott_Sauyet]

@TW_Tones

My solution reverses marking where to continue the numbers and instead marks the block where all # within just continue.

That’s a fantastic idea!

@TW_Tones

So I propose one of the two answers;

1. that in the above class definitions we reverse the blockquote CSS in the “list-container” class definition so it becomes a simple block.
2. Identify another three character set (maybe 1/2 char) that allows wrapping a block of wikitext such that it applys no blockquote and allows custom CSS to be applied, such as in this case above.

I hadn’t considered the first idea at all. I did consider a variant of the second one, but applied only the continued section. Wrapping the whole list (plus the interstitial material) is inspired! I agree that this is better than the blockquote version.

@TW_Tones

I have since created a new block wiki rule using &&&, ask if you want the current source code.

Thank you. I will probably try to do this myself, as a (re-)learning exercise. I’ve only done this once before, in the pretty fractions discussion. I think doing it again will help cement the ideas in my brain.

@Mohammad

This is a simple solution: Ordered List and Continued List Number in TiddlyWiki - Tips & Tricks - Talk TW

You’re right, this is another very helpful solution. Thank you very much.

---

And in general, thank you all! I did my research in these forums and found several techniques that would work, but which I didn’t really like. In less than two days, we have three different solutions, all better than what I’d been able to find before I asked.

Thank you. A thousand times, thank you!