How to tweak TOC indentation numbering for very long child tiddler title?

#1

Hi friends :grinning:

I am encountering problem with TOC macro when I have very long child tiddler title. Below is the screenshot

image
image1634×558 31.1 KB

My setup for TOC is as follows

image
image1624×946 53.5 KB

As you can see the second line of the child tiddler title is not aligned neatly with the first line. What I want to achieve is as shown in the below screenshot :

image
image1630×562 31.2 KB

What have I done so far to solve the issue?

I have searched online for solution and I found that the TOC macro basically has no setup for the numbering indentation. See below TOC macro setup in $:/core/macros/TOC

\define toc-linked-selective-expandable-body(tag,sort:"",itemClassFilter,exclude,path)
\whitespace trim
<$qualify name="toc-state" title={{{ [[$:/state/toc]addsuffix<__path__>addsuffix[-]addsuffix<currentTiddler>] }}}>
  <$set name="toc-item-class" filter=<<__itemClassFilter__>> emptyValue="toc-item-selected" value="toc-item" >
    <li class=<<toc-item-class>>>
      <$link to={{{ [<currentTiddler>get[target]else<currentTiddler>] }}}>
          <$list filter="[all[current]tagging[]$sort$limit[1]]  -[subfilter<__exclude__>]" variable="ignore" emptyMessage="<$button class='tc-btn-invisible'>{{$:/core/images/blank}}</$button>">
          <$reveal type="nomatch" stateTitle=<<toc-state>> text="open">
            <$button setTitle=<<toc-state>> setTo="open" class="tc-btn-invisible tc-popup-keep">
            <$transclude tiddler=<<toc-closed-icon>> />
            </$button>
          </$reveal>
          <$reveal type="match" stateTitle=<<toc-state>> text="open">
            <$button setTitle=<<toc-state>> setTo="close" class="tc-btn-invisible tc-popup-keep">
              <$transclude tiddler=<<toc-open-icon>> />
            </$button>
          </$reveal>
        </$list>
        <<toc-caption>>
      </$link>
      <$reveal type="match" stateTitle=<<toc-state>> text="open">
        <$macrocall $name="toc-selective-expandable" tag=<<currentTiddler>> sort=<<__sort__>> itemClassFilter=<<__itemClassFilter__>> exclude=<<__exclude__>> path=<<__path__>>/>
      </$reveal>
    </li>
  </$set>
</$qualify>
\end

I found from this website that we can easily arrange the indentation if we write below code

ul.a {
  list-style-position: outside;
}

I try several times to tweak the TOC macro by above code but it seems nothing changes.

My question :

  1. Do we need to tweak the TOC macro in this case? Or is there any other effective way out?
  2. If we need to tweak the TOC macro, how we can tweak so that it will help to arrange the indentation in second line to align with the first line?

Note : I am not so talented in coding but I am eager to try my best

Thank you before for everyone that helps :grinning:

#2

@pmario your rewrite of the toc macros and extencibility was brillient, I am wondering why it has not being adopted?, perhaps if there is resistence to the core you could release it as a set of additional toc macros like your TOCP but now ATOC advanced toc.

Would the new toc macros help @daretobelieve ?

#3

Pardon me, where can I get the new TOC macros? I’m using Tiddlywiki 5.3.3 on node.js, does the new TOC macros compatible with TW 5.3.3 on node.js?

#4

Thats why I mentioned @pmario

1 Like
#5

I am on mobile only at the moment. I’ll be back on PC Monday. I think this is more a CSS problem. At the moment the TOC code looks like this.

<div class="tc-table-of-contents">
<<toc "Contents">>
</div>

So if you define a different class with your CSS I think it could do what you want