Formatting sgc-toc.css font-size

[phossler]

I've been following another interesting thread here about TOC's and sgc-toc.css and saving it in preferences

I've got most of it the way I want, but for some reason known only to CSS, the level-1 font-size is applied to everything

I think I'm getting tangled up with all the nested <div> tags that Sigil's Make HTML TOC creates

div.sgc-toc-title {
    font-size: 3em;
    font-weight: bold;
    margin-bottom: 1em;
    text-align: center;
}

div.sgc-toc-level-1 {
    font-weight: bold;
    margin-top: 2em;
    font-size: 2em;
    margin-left: 0em;
}

div.sgc-toc-level-2 {
    font-weight: normal;
    font-size: 1em;
    margin-top: 1em;
    margin-left: 0.5em;
}

div.sgc-toc-level-3 {
    font-size: 1em;
	margin-top:1em;
    margin-left: 1em;
}

div.sgc-toc-level-3 + div.sgc-toc-level-3 {
	margin-top:0em;
}

I wanted toc-1 to be 2em, and the rest 1em. For everything else (margins, indents) it works as I'd expect

Any ideas?

Thanks

Paul

[DaleDe]

Why worry about the nested level of div simply use .svg-toc-level-x

Dale

[theducks]

Originally Posted by phossler

I've been following another interesting thread here about TOC's and sgc-toc.css and saving it in preferences

I've got most of it the way I want, but for some reason known only to CSS, the level-1 font-size is applied to everything

I think I'm getting tangled up with all the nested <div> tags that Sigil's Make HTML TOC creates

div.sgc-toc-title {
    font-size: 3em;
    font-weight: bold;
    margin-bottom: 1em;
    text-align: center;
}

div.sgc-toc-level-1 {
    font-weight: bold;
    margin-top: 2em;
    font-size: 2em;
    margin-left: 0em;
}

div.sgc-toc-level-2 {
    font-weight: normal;
    font-size: 1em;
    margin-top: 1em;
    margin-left: 0.5em;
}

div.sgc-toc-level-3 {
    font-size: 1em;
	margin-top:1em;
    margin-left: 1em;
}

div.sgc-toc-level-3 + div.sgc-toc-level-3 {
	margin-top:0em;
}

I wanted toc-1 to be 2em, and the rest 1em. For everything else (margins, indents) it works as I'd expect

Any ideas?

Thanks

Paul

I did get something to work, but I don't know why the it is working the way you see.

div.sgc-toc-level-2 {
    font-weight: normal;
    font-size: 66%;
    margin-top: 1em;
    margin-left: 0.5em;
}

Percent is the trick

[phossler]

@theducks

You were able to reproduce it also, correct?

Percent does indeed do the trick, but it's still a little to the left of weird


@DaleDe

Sorry, not exactly sure of what you're saying. Could you expand a little more please



Thanks

Paul

[theducks]

Originally Posted by phossler

@theducks

You were able to reproduce it also, correct?

Percent does indeed do the trick, but it's still a little to the left of weird


Thanks

Paul

Yes.
The TOC uses nested (level Divs) Level 2 is inside a Level 1.
I tried a -1em NOT ALLOWED

Keeping the nests straight IN THE CODE seemed beyond me (and would not survive a regen of the TOC).

This way survives as Sigil will not replace an existing stylesheet
DaleDe's method is not the default Sigil (Generate HTML TOC) way

[DaleDe]

Originally Posted by phossler

@DaleDe

Sorry, not exactly sure of what you're saying. Could you expand a little more please



Thanks

Paul

you can use a . as the first character to apply a class to all items irrespective of the paragraph type or level.

For example .bold could be used anywhere include a paragraph, div, or a heading while h2.bold could only be used in a h2 statement. Using a . as the leading character generalizes the class which can still be overridden with a more specific class designation. This is what Cascading Style Sheet is all about.

Dale

[theducks]

Originally Posted by DaleDe

you can use a . as the first character to apply a class to all items irrespective of the paragraph type or level.

For example .bold could be used anywhere include a paragraph, div, or a heading while h2.bold could only be used in a h2 statement. Using a . as the leading character generalizes the class which can still be overridden with a more specific class designation. This is what Cascading Style Sheet is all about.

Dale

you threw me a curve with the

.svg

. I thought you were proposing a SVG solution

Sigil classes are .sgc

I dropped the (css)div in some my tests. It has to be some nesting quirk

[phossler]

@DaleDe --

I basically understand the CSS concepts (OK, sort of)

When I create a Sigil HTML TOC, the Sigil generated CSS:

div.sgc-toc-title {
    font-size: 2em;
    font-weight: bold;
    margin-bottom: 1em;
    text-align: center;
}

div.sgc-toc-level-1 {
    margin-left: 0em;
}

div.sgc-toc-level-2 {
    margin-left: 2em;
}

div.sgc-toc-level-3 {
    margin-left: 2em;
}

div.sgc-toc-level-4 {
    margin-left: 2em;
}

div.sgc-toc-level-5 {
    margin-left: 2em;
}

div.sgc-toc-level-6 {
    margin-left: 2em;
}

is pretty basic

The TOC HTML Sigil generates:

<body>
  <div class="sgc-toc-title">
    Table of Contents
  </div>

  <div class="sgc-toc-level-1">
    <a href="../Text/Section0001.xhtml">1111111111111111</a>

    <div class="sgc-toc-level-2">
      <a href="../Text/Section0001.xhtml#sigil_toc_id_1">22222222222222222</a>

      <div class="sgc-toc-level-3">
        <a href="../Text/Section0001.xhtml#sigil_toc_id_2">3333333333333333333</a>
      </div>

      <div class="sgc-toc-level-3">
        <a href="../Text/Section0001.xhtml#sigil_toc_id_3">3333333333333333</a>
      </div>

      <div class="sgc-toc-level-3">
        <a href="../Text/Section0001.xhtml#sigil_toc_id_4">333333333333333333333</a>
      </div>
    </div>

    <div class="sgc-toc-level-2">
      <a href="../Text/Section0001.xhtml#sigil_toc_id_5">222222222222222</a>

has <div>s within <div>s within ..... etc.

Since Sigil will completely regenerate the TOC file, editing it seems like a waste of time, so I was trying to work with the sgc-toc.css file and save it in Preferences.


In level-1 I made font-size: 2em and I thought that if I left font-size: 1em in level-2, it would look nicer

div.sgc-toc-level-1 {
    font-size: 2em;
    margin-left: 0em;
}

div.sgc-toc-level-2 {
    font-size: 1em;
    margin-left: 2em;
}

What was happening was that it seemed like the level-2 font-size was not being honored, and what ever was in level-1 font size was used throughout.

I suspect that within a container, you can only adjust font relative to the container's font-size (?????). That seems kind of familiar, but I could be very wrong.

But theduck's percent seems to work nicely

Paul

[DaleDe]

Sorry Paul, svg was a typo, it should have been sgc but as a class name svg could be used and would not be talking about a graphic image anyway. I understood the original problem and removing the div's from the from of the class names will resolve it.

Dale

[phossler]

Sorry Paul, svg was a typo

not a problem -- I figured

But even without the div. 's in the CSS, it still doesn't seem to work (assuming I'm understanding it correctly).

I made the level-1 font 4em just to see, and level-2 font 1em

/* Sigil TOC CSS template, loaded when Tools, TOC, Create HTML TOC  */

.sgc-toc-title {
    font-size: 3em;
    font-weight: bold;
    margin-bottom: 1em;
    text-align: center;
}

.sgc-toc-level-1 {
    font-weight: bold;
    margin-top: 2em;
    font-size: 4em;
    margin-left: 0em;
}

.sgc-toc-level-2 {
    font-weight: normal;
    font-size: 1em;
    margin-top: 1em;
    margin-left: 0.5em;
}

.sgc-toc-level-3 {
	margin-top:1em;
    margin-left: 1em;
}

.sgc-toc-level-3 + div.sgc-toc-level-3 {
	margin-top:0em;}

But the level-2 font-size still seems ignored

Paul

[DaleDe]

I see the problem and it is not unique to Sigil, ADE and Azardi have the same problem. It would seem that a div inside another div inherits the outside div information and the inside div either cannot change it or is changing it relative to the outside div, in other words the outside div may be defining the size of an em. It is an interesting problem. There, of course, is no real need to nest the on page toc in div statements in the first place.

I wasn't able to find anything in the specs that define what should happen with div's are nested, even though they are permitted according to the specs. It is a problem of scope and CSS really doesn't have anything to do with it except incidently.

Dale

[phossler]

Dale -- thanks for the insight and info

theducks' percentage based font-size works, and seems to be in accord with what you said about inheriting properties.

Possibly the Sigil team will simplify the generated HTML TOC and get rid of all those nested <div>s

I had thought about manually doing it, but Sigil will just generate a new one with nested <div>s again

But for now I have a sgc-toc.css template that will be a good starting point (even if it is a little convoluted) :-)

Thanks to you both for your help

Paul

[kamanza]

Try

div.sgc-toc-level-1 {
    margin-left: 0em;
	font-size: 2em;
}

div.sgc-toc-level-2 {
    margin-left: 1em;
	font-size: 0.5em;
}

div.sgc-toc-level-3 {
    margin-left: 1em;
}

div.sgc-toc-level-4 {
    margin-left: 1em;
	font-size: 0.8em;
}

div.sgc-toc-level-5 {
    margin-left: 1em;
}

div.sgc-toc-level-6 {
    margin-left: 1em;
	font-size: 0.75em;
}

[phossler]

@kamanza --

That also works, but since the TOC generated by Sigil has all those nested <div>'s, it still seems to define the 'em' for toc-2 relative to toc-1.

I.e. toc-1 is 2em, and toc-2 is 1em/2em = 1/2 of toc-1.

To me it seems like a percentage of the container

Going the other way ...

div.sgc-toc-level-1 {
	font-size: 4em;
}

div.sgc-toc-level-2 {
	font-size: 2em;
}

div.sgc-toc-level-3 {
	font-size: 2em;
}

div.sgc-toc-level-4 {
	font-size: 2em;
}

div.sgc-toc-level-5 {
	font-size: 2em;
}

div.sgc-toc-level-6 {
	font-size: 2em;
}

toc-1 is 4em, toc-2 is 2em but since the toc-1 <div> defines what an 'em' (my layman's concept) the toc-2 2em is actually twice the toc-1 definition of an em, i.e. twice as big. Same for the toc-3; it's twice as big as the toc-2's definition of an 'em'

Bottom line, it's those darn nested <div>'s that cause the issue, but now that I understand what's happening, either the percent or the em based font size can be made to work

Paul