09-02-2013, 09:13 AM | #1 |
Wizard
Posts: 1,085
Karma: 412718
Join Date: Jan 2009
Location: Valley Forge, PA, USA
Device: Kindle Paperwhite
|
Formatting sgc-toc.css font-size
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 Code:
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; } Any ideas? Thanks Paul |
09-02-2013, 11:59 AM | #2 |
Grand Sorcerer
Posts: 11,470
Karma: 13095790
Join Date: Aug 2007
Location: Grass Valley, CA
Device: EB 1150, EZ Reader, Literati, iPad 2 & Air 2, iPhone 7
|
Why worry about the nested level of div simply use .svg-toc-level-x
Dale |
09-02-2013, 12:00 PM | #3 | |
Well trained by Cats
Posts: 30,377
Karma: 58053698
Join Date: Aug 2009
Location: The Central Coast of California
Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A
|
Quote:
I did get something to work, but I don't know why the it is working the way you see. Code:
div.sgc-toc-level-2 {
font-weight: normal;
font-size: 66%;
margin-top: 1em;
margin-left: 0.5em;
}
|
|
09-02-2013, 12:26 PM | #4 |
Wizard
Posts: 1,085
Karma: 412718
Join Date: Jan 2009
Location: Valley Forge, PA, USA
Device: Kindle Paperwhite
|
@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 |
09-02-2013, 12:34 PM | #5 | |
Well trained by Cats
Posts: 30,377
Karma: 58053698
Join Date: Aug 2009
Location: The Central Coast of California
Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A
|
Quote:
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 |
|
09-02-2013, 12:49 PM | #6 | |
Grand Sorcerer
Posts: 11,470
Karma: 13095790
Join Date: Aug 2007
Location: Grass Valley, CA
Device: EB 1150, EZ Reader, Literati, iPad 2 & Air 2, iPhone 7
|
Quote:
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 |
|
09-02-2013, 02:22 PM | #7 | |
Well trained by Cats
Posts: 30,377
Karma: 58053698
Join Date: Aug 2009
Location: The Central Coast of California
Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A
|
Quote:
Code:
.svg Sigil classes are .sgc I dropped the (css)div in some my tests. It has to be some nesting quirk |
|
09-02-2013, 02:35 PM | #8 |
Wizard
Posts: 1,085
Karma: 412718
Join Date: Jan 2009
Location: Valley Forge, PA, USA
Device: Kindle Paperwhite
|
@DaleDe --
I basically understand the CSS concepts (OK, sort of) When I create a Sigil HTML TOC, the Sigil generated CSS: Code:
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; } The TOC HTML Sigil generates: Code:
<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> 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 Code:
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 |
09-02-2013, 07:13 PM | #9 |
Grand Sorcerer
Posts: 11,470
Karma: 13095790
Join Date: Aug 2007
Location: Grass Valley, CA
Device: EB 1150, EZ Reader, Literati, iPad 2 & Air 2, iPhone 7
|
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 |
09-02-2013, 07:24 PM | #10 | |
Wizard
Posts: 1,085
Karma: 412718
Join Date: Jan 2009
Location: Valley Forge, PA, USA
Device: Kindle Paperwhite
|
Quote:
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 Code:
/* 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;} Paul |
|
09-02-2013, 08:56 PM | #11 |
Grand Sorcerer
Posts: 11,470
Karma: 13095790
Join Date: Aug 2007
Location: Grass Valley, CA
Device: EB 1150, EZ Reader, Literati, iPad 2 & Air 2, iPhone 7
|
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 Last edited by DaleDe; 09-02-2013 at 08:59 PM. |
09-02-2013, 09:11 PM | #12 |
Wizard
Posts: 1,085
Karma: 412718
Join Date: Jan 2009
Location: Valley Forge, PA, USA
Device: Kindle Paperwhite
|
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 Last edited by phossler; 09-02-2013 at 09:32 PM. |
09-06-2013, 07:57 AM | #13 |
Zealot
Posts: 115
Karma: 10
Join Date: Jan 2011
Device: none
|
Try
Code:
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; } |
09-07-2013, 12:37 PM | #14 |
Wizard
Posts: 1,085
Karma: 412718
Join Date: Jan 2009
Location: Valley Forge, PA, USA
Device: Kindle Paperwhite
|
@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 ... Code:
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; } 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 |
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
How to change the font-size in the body tag in css? | naisren | Conversion | 2 | 10-01-2012 05:52 PM |
Calibre has no choice on font size unit in css? | naisren | ePub | 6 | 09-30-2012 09:41 AM |
Formatting font-size of certain elements | sillypoint | Workshop | 5 | 03-18-2012 08:14 AM |
PRS-505 PRS505 Keeps formatting when changing font size | mollie38 | Sony Reader | 8 | 06-17-2011 03:26 AM |
TOC font size | BRGriff | Conversion | 11 | 06-06-2011 09:50 PM |