Inline TOC formatting

[phossler]

I generated a 3 level inline TOC, and wanted to change the styling for the different levels

In Sigil, each level had it's own class, so it was trivial to replace Sigil's TOC.CSS with the one that I liked to use

The Editor will generate a toc.xhtml file with a <ul> <li> <ul> <li> etc. nested, and with the <style type="text/css"> in the toc.xhtml file

If I change the CSS for the <li> the container value is inherited, and something like font-size:1.25em; really gets ugly.

1. IHMO it's be more flexible if each TOC level had it's own class

2. In the epub, I tweaked some generated settings, and the font-size I added really got messed up. Is there a correct way?

3. My end goal would be to have (maybe) ...

H1 enteries = bold, 2em, 1 em below,
H2 enteries = bold, 1em, 1 em below,
H3 enteries followed by another H3 = normal, 1em, 0 em below,
H3 enteries NOT followed by another H3 = normal, 1em, 2 em below

OK, that might be ugly, but it's an example of TOC level-specific styling

Open to alternatives, but in this case, I think Sigil's approach might possibly be more flexible

[eschwartz]

You can use descending CSS selectors, specifically the Child Selector in order to strictly control which one is matched.

Perhaps Kovid could add in classes to the ToC generator; however, this should work in the meantime, or you could just add classes by hand.

[phossler]

thanks, I was actually out to W3Schools (http://www.w3schools.com/css/default.asp) searching for something like that. I will do some experimenting

The reason I was hoping Kovid would consider some changes is because the TOC is regenerated each time. Life would be easier if the user could have a style sheet with the TOC styles so that the toc.xhtml would only require minimal tweaking.

Adding classes by hand would be a real source of error

[kovidgoyal]

You do not need to add classes, CSS 2.1 selectors can do all this via child selectors. For example for level 1

#calibre_generated_inline_toc > ul > li

For level 2

#calibre_generated_inline_toc > ul > li > ul > li

And just go on adding > ul >li

for every additional level.

[eschwartz]

Originally Posted by kovidgoyal

You do not need to add classes, CSS 2.1 selectors can do all this via child selectors. For example for level 1

#calibre_generated_inline_toc > ul > li

For level 2

#calibre_generated_inline_toc > ul > li > ul > li

And just go on adding > ul >li

for every additional level.

As I suggested; however, it does make it more difficult to see at a glance what is affecting what, if you have to count levels like that. But you can easily tell what

#toc_level_1

is doing.

It can't hurt to add classes, can it?

[eschwartz]

Thanks for adding this!

@phossler, this will be in the next release, tomorrow. Use class "level1" "level2" etc.

See: https://github.com/kovidgoyal/calibr...88fb41893d5b70

[phossler]

@all-- THANKS !!!

This will make things much easier for me (at least) to understand as well as saving some work

[phossler]

@Kovid

Can I ask why it goes from Level 1 to Level 2 to Level 5?

No big deal, just curious

Thanks

Now I have to figure out how to use it

[arspr]

Just guessing, but check if what you have in your book is h1, h2 and then h5, not h3, tags.

[kovidgoyal]

https://github.com/kovidgoyal/calibr...59ff8ba0b173d7