Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Software > Sigil

Notices

Reply
 
Thread Tools Search this Thread
Old 09-02-2013, 10:13 AM   #1
phossler
Addict
phossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensions
 
Posts: 371
Karma: 51406
Join Date: Jan 2009
Location: Valley Forge, PA, USA
Device: kindle
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;
}
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
Attached Thumbnails
Click image for larger version

Name:	Capture.JPG
Views:	84
Size:	91.2 KB
ID:	110332  
Attached Files
File Type: epub Text TOC CSS.epub (3.9 KB, 55 views)
phossler is offline   Reply With Quote
Old 09-02-2013, 12:59 PM   #2
DaleDe
Grand Sorcerer
DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.
 
DaleDe's Avatar
 
Posts: 9,781
Karma: 5072196
Join Date: Aug 2007
Location: Grass Valley, CA
Device: EB 1150, EZ Reader, Literati, iPad 2
Why worry about the nested level of div simply use .svg-toc-level-x

Dale
DaleDe is offline   Reply With Quote
Old 09-02-2013, 01:00 PM   #3
theducks
Grand Sorcerer
theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.
 
theducks's Avatar
 
Posts: 15,250
Karma: 6020307
Join Date: Aug 2009
Location: (The original) Silicon Valley, USA
Device: Galaxy Tab 2, Astak Pocket Pro, K4NT
Quote:
Originally Posted by phossler View Post
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;
}
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.

Code:
div.sgc-toc-level-2 {
    font-weight: normal;
    font-size: 66%;
    margin-top: 1em;
    margin-left: 0.5em;
}
Percent is the trick
theducks is offline   Reply With Quote
Old 09-02-2013, 01:26 PM   #4
phossler
Addict
phossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensions
 
Posts: 371
Karma: 51406
Join Date: Jan 2009
Location: Valley Forge, PA, USA
Device: kindle
@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
phossler is offline   Reply With Quote
Old 09-02-2013, 01:34 PM   #5
theducks
Grand Sorcerer
theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.
 
theducks's Avatar
 
Posts: 15,250
Karma: 6020307
Join Date: Aug 2009
Location: (The original) Silicon Valley, USA
Device: Galaxy Tab 2, Astak Pocket Pro, K4NT
Quote:
Originally Posted by phossler View Post
@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
theducks is offline   Reply With Quote
Old 09-02-2013, 01:49 PM   #6
DaleDe
Grand Sorcerer
DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.
 
DaleDe's Avatar
 
Posts: 9,781
Karma: 5072196
Join Date: Aug 2007
Location: Grass Valley, CA
Device: EB 1150, EZ Reader, Literati, iPad 2
Quote:
Originally Posted by phossler View Post

@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
DaleDe is offline   Reply With Quote
Old 09-02-2013, 03:22 PM   #7
theducks
Grand Sorcerer
theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.
 
theducks's Avatar
 
Posts: 15,250
Karma: 6020307
Join Date: Aug 2009
Location: (The original) Silicon Valley, USA
Device: Galaxy Tab 2, Astak Pocket Pro, K4NT
Quote:
Originally Posted by DaleDe View Post
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
Code:
.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
theducks is offline   Reply With Quote
Old 09-02-2013, 03:35 PM   #8
phossler
Addict
phossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensions
 
Posts: 371
Karma: 51406
Join Date: Jan 2009
Location: Valley Forge, PA, USA
Device: kindle
@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;
}
is pretty basic

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>
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


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
phossler is offline   Reply With Quote
Old 09-02-2013, 08:13 PM   #9
DaleDe
Grand Sorcerer
DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.
 
DaleDe's Avatar
 
Posts: 9,781
Karma: 5072196
Join Date: Aug 2007
Location: Grass Valley, CA
Device: EB 1150, EZ Reader, Literati, iPad 2
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
DaleDe is offline   Reply With Quote
Old 09-02-2013, 08:24 PM   #10
phossler
Addict
phossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensions
 
Posts: 371
Karma: 51406
Join Date: Jan 2009
Location: Valley Forge, PA, USA
Device: kindle
Quote:
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


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;}
But the level-2 font-size still seems ignored

Paul
Attached Thumbnails
Click image for larger version

Name:	Capture.JPG
Views:	55
Size:	61.5 KB
ID:	110347  
Attached Files
File Type: epub Text TOC CSS3.epub (4.1 KB, 37 views)
phossler is offline   Reply With Quote
Old 09-02-2013, 09:56 PM   #11
DaleDe
Grand Sorcerer
DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.DaleDe ought to be getting tired of karma fortunes by now.
 
DaleDe's Avatar
 
Posts: 9,781
Karma: 5072196
Join Date: Aug 2007
Location: Grass Valley, CA
Device: EB 1150, EZ Reader, Literati, iPad 2
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 09:59 PM.
DaleDe is offline   Reply With Quote
Old 09-02-2013, 10:11 PM   #12
phossler
Addict
phossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensions
 
Posts: 371
Karma: 51406
Join Date: Jan 2009
Location: Valley Forge, PA, USA
Device: kindle
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 10:32 PM.
phossler is offline   Reply With Quote
Old 09-06-2013, 08:57 AM   #13
kamanza
Connoisseur
kamanza began at the beginning.
 
Posts: 98
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;
}
kamanza is offline   Reply With Quote
Old 09-07-2013, 01:37 PM   #14
phossler
Addict
phossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensionsphossler can understand the language of future parallel dimensions
 
Posts: 371
Karma: 51406
Join Date: Jan 2009
Location: Valley Forge, PA, USA
Device: kindle
@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;
}
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
Attached Thumbnails
Click image for larger version

Name:	Capture.JPG
Views:	50
Size:	110.1 KB
ID:	110540  
phossler is offline   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

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 06:52 PM
Calibre has no choice on font size unit in css? naisren ePub 6 09-30-2012 10:41 AM
Formatting font-size of certain elements sillypoint Workshop 5 03-18-2012 09:14 AM
PRS-505 PRS505 Keeps formatting when changing font size mollie38 Sony Reader 8 06-17-2011 04:26 AM
TOC font size BRGriff Conversion 11 06-06-2011 10:50 PM


All times are GMT -4. The time now is 02:40 AM.


MobileRead.com is a privately owned, operated and funded community.