I'm having a bit of trouble understanding where Calibre's Editor is getting its Computed Final Style here (I've included all the details below). Specifically:
Unfortunately, this is going to be long.
Here's the chunk of text in the book that I'm wondering about:
CSS in Book
The CSS for those styles in the stylesheet is:
Stylesheet Information
If I click in the headline of that <div>, here's the Live CSS:
Status Headline Live CSS
If I click in a plain ol' paragraph in that <div>, the Live CSS is:
Status Paragraph Live CSS
- How is it coming up with its computed "font-size" -- it's 13.9392px for the headline, but 15.84px for the plain paragraph? As far as I can tell, those sizes should be the same (the only references to font-size and font-weight are 0.88em and bold (which both styles have)). Unless smallcaps have an inherent smaller size than regular text (which might be implied from the "small" in the name)?
- Why is it referencing identically named <p> styles in my stylesheet instead of just the <div> styles that I think should apply? I thought <div> styles took precedence over <p> styles. Or, do just the specifically mentioned elements of those styles just get overridden if duplicated and unique entries just carry through?
- The "div.status p.headline" Live CSS for the headline includes various "font-variant" entries. Are those brought in automatically from my use of "font-variant: small-caps" in the headline style?
Unfortunately, this is going to be long.
Here's the chunk of text in the book that I'm wondering about:
CSS in Book
Code:
<div class="status">
<p class="headline">Absorb Condition</p>
<p>Cost: 10 For Duration: Instant</p>
<p>...</p>
</div>Stylesheet Information
Code:
div.status {
/* Status Styling for Computer Screen Responses */
display: block;
font-size: 0.88em;
font-weight: bold;
margin-left: 2em;
margin-right: 2em;
text-align: left;
}
div.status p {
/* Status Paragraph Style for Computer Screen Responses */
display: block;
margin-top: 0;
margin-bottom: 0;
text-indent: 0;
}
div.status p.headline {
/* Status Heading for Computer Screen Responses */
display: block;
font-variant: small-caps;
text-align: center;
}Status Headline Live CSS
Code:
Matched CSS rules for p @216
stylesheet.css div.status p.headline
display: block
font-variant-ligatures: normal
font-variant-numeric: normal
font-variant-east-asian: normal
font-variant-caps: small-caps
font-variant-alternates: normal
font-variant-position: normal
text-align: center
--------------------------
stylesheet.css div.status p
display: block [overridden]
margin-top: 0px
margin-bottom: 0px
text-indent: 0px
--------------------------
stylesheet.css .headline
display: block [overridden]
font-size: 0.88em
font-weight: bold
padding-bottom: 0.6em
padding-top: 0.6em
text-align: center [overridden]
text-indent: 0px [overridden]
--------------------------
stylesheet.css p
display: block [overridden]
text-indent: 1.2em [overridden]
--------------------------
Inherited from div @214
stylesheet.css div.status
font-size: 0.88em [overridden]
font-weight: bold [overridden]
text-align: left [overridden]
--------------------------
Inherited from body @9
stylesheet.css body
orphans: 1
widows: 1
--------------------------
Computed final style
display: block
font-size: 13.9392px
font-variant-alternates: normal
font-variant-caps: small-caps
font-variant-east-asian: normal
font-variant-ligatures: normal
font-variant-numeric: normal
font-variant-position: normal
font-weight: 700
margin-bottom: 0px
margin-top: 0px
orphans: 1
padding-bottom: 8.36352px
padding-top: 8.36352px
text-align: center
text-indent: 0px
widows: 1
--------------------------Status Paragraph Live CSS
Code:
Matched CSS rules for p @218
stylesheet.css div.status p
display: block
margin-top: 0px
margin-bottom: 0px
text-indent: 0px
--------------------------
stylesheet.css .headline + p
text-indent: 0px [overridden]
--------------------------
stylesheet.css p
display: block [overridden]
text-indent: 1.2em [overridden]
--------------------------
stylesheet.css * + *
margin-top: 0.6em [overridden]
--------------------------
Inherited from div @214
stylesheet.css div.status
font-size: 0.88em
font-weight: bold
text-align: left
--------------------------
Inherited from body @9
stylesheet.css body
orphans: 1
widows: 1
--------------------------
Computed final style
display: block
font-size: 15.84px
font-weight: 700
margin-bottom: 0px
margin-top: 0px
orphans: 1
text-align: left
text-indent: 0px
widows: 1
--------------------------
