Confused About Computed Final Style

[enuddleyarbl]

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:

1. 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)?
2. 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?
3. 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

  <div class="status">

    <p class="headline">Absorb Condition</p>

    <p>Cost: 10 For Duration: Instant</p>

    <p>...</p>

  </div>

The CSS for those styles in the stylesheet is:

Stylesheet Information

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

If I click in the headline of that <div>, here's the Live CSS:

Status Headline Live CSS

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

If I click in a plain ol' paragraph in that <div>, the Live CSS is:

Status Paragraph Live CSS

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

[Karellen]

Can you post the full css file as well as the full xhtml page.
I don't think there is enough info in the snippets you have posted.

[enuddleyarbl]

It's a copyrighted book that I'm playing around with. So, I've attached a scrambled version of the whole thing. The particular paragraphs probably aren't all that important. But, I found a similar set by searching for "headline". The first one is in Chapter 6 at line 335.

[Karellen]

Answering question 1 -
I get slightly different font-sizes.
Headline = 10.8416px
<p> = 12.32px

I think the difference is coming from the double font-size: 0.88em; used for the "headline" text.
Once in .headline and once in div.status

[enuddleyarbl]

Originally Posted by Karellen

Answering question 1 -
I get slightly different font-sizes.
Headline = 10.8416px
<p> = 12.32px

I think the difference is coming from the double font-size: 0.88em; used for the "headline" text.
Once in .headline and once in div.status

Hmmm. I was under the impression that em was based on the initial font size. But, I just double-checked and it looks like it's based on the inherited font size. I'll have to check the various font-size elements in my style sheet and see if they're stacking.

Maybe I should be using rem instead of em since rem seems to be based on the initial font size.

EDIT: Or, perhaps, things like xx-small, x-small, small, medium, large, x-large, xx-large, xxx-large.
EDIT 2: Looks like you were right about the font-size stacking. I changed those from 0.88em to small and the computed absolute font sizes are now identical. I'll take the font-size aspect over to the epub forum and see what the consensus is on best practice.

Thanks.

[DNSB]

Originally Posted by enuddleyarbl

Maybe I should be using rem instead of em since rem seems to be based on the initial font size.

That is correct but an issue to beware of is that rem is not recognized by quite a few renderers which can lead to some rather strange looking text sizes.

And yes, em will stack (cascade might be a better word). One major publisher used to love setting the body font size to 1.1em in <body> and then using 0.92em in the <p> styles which gave an effective 1.01em font size.

There was also one indie who misused Vellum and ending up with multiple divs with font sizes wrapped around the book title.

<div 1 font size 1.5em>
<div 2 font size 1.5em, effective size 1.5*1.5 or 2.25em>
<div 3 font size 2.5em, effective size 1.5*1.5*2.5 or 5.625em>
<h1 font size 2em, effective size 1.5*1.5*2.5*2 or 11.25em>

The 3 word title for that book took just over a page to display. Oddly when I complained about it, the response was that I was the first person who had complained but that when the ebook was opened, what I saw was what they saw.

[foosion]

What is the order of precedence of major tags, such as @page, body, h1, p?

Is it the case that the closer something is to text the higher precedence it has (overriding things farther away)? And, for example in <p class-"xyz"> xyz would override the relevant properties of p.

Also, where can I find the defaults for the tags?

[theducks]

Originally Posted by foosion

What is the order of precedence of major tags, such as @page, body, h1, p?

Is it the case that the closer something is to text the higher precedence it has (overriding things farther away)? And, for example in <p class-"xyz"> xyz would override the relevant properties of p.

Also, where can I find the defaults for the tags?

Think Boxes inside boxes. Body is the outer box (for content),

Have you opened the Property Inspector in the Viewer? <<<
That shows just how YOUR book is nested

Display Block means that is the current base
If it is NOT, the styles cascade on the prior block

Spend some time reading at W3C. Just remember EPUB is a limited subset of that (that being what web pages are built)

[foosion]

Originally Posted by theducks

Think Boxes inside boxes. Body is the outer box (for content),

Have you opened the Property Inspector in the Viewer? <<<
That shows just how YOUR book is nested

Display Block means that is the current base
If it is NOT, the styles cascade on the prior block

Spend some time reading at W3C. Just remember EPUB is a limited subset of that (that being what web pages are built)

How is boxes inside boxes different from the thing closest to the text modifies everything higher in the chain?

I have not opened the Property Inspector in the Viewer. I've been looking at the Calibre editor. I see it has a box inside box graphic, but every one I've found just has margin-border-padding-numbers.

I have spent some time reading at W3C, but am not sure what part specifically covers these issues.

[enuddleyarbl]

Order of precedence for CSS falls under "specificity" (and trying to understand the rules hurts my brain). Here's a blurb on them:

https://www.w3schools.com/css/css_specificity.asp

Roughly, the order of precedence from highest to lowest is:
Inline styles - Example: <h1 style="color: pink;">
IDs - Example: #navbar
Classes, pseudo-classes, attribute selectors - Example: .test, :hover, [href]
Elements and pseudo-elements - Example: h1, ::before

Also, if all else is equal, the last selector defined wins.

[theducks]

That Box is showing the current box. Margins, border, padding

body the contains Block level Tags (boxes):H, div, p (those are the ones I use the most)

The rest are only allowed INSIDE a block level tag. span, b, i, sub, sup (those are the ones I use the most)

You can also nest many block level tags. to create an overall style (container) for the contents.

eg <div class="placetime" > creates a constricted area, bold, italic for Paragraphs stating: Who, Where, When
By doing it that way, all I have to do is adjust .placetime in the CSS and change the overall placement and look.

[foosion]

Originally Posted by enuddleyarbl

Order of precedence for CSS falls under "specificity" (and trying to understand the rules hurts my brain). Here's a blurb on them:

https://www.w3schools.com/css/css_specificity.asp

Roughly, the order of precedence from highest to lowest is:
Inline styles - Example: <h1 style="color: pink;">
IDs - Example: #navbar
Classes, pseudo-classes, attribute selectors - Example: .test, :hover, [href]
Elements and pseudo-elements - Example: h1, ::before

Also, if all else is equal, the last selector defined wins.

I can see why that would hurt your brain.

I guess re-reading, playing and more practice are the way to go.

[foosion]

In the editor, CSS live computed final styles was showing that margins were 0, but the file preview panel had clear greater than 0 left and right margins. I saw there was a second css file that had

@page {
margin-left: 2em;
margin-right: 2em;
}

and fixing that made the margins visibly zero.

Why weren't the 2em left and right margins reflected is the editor's live CSS panel?

[DNSB]

Originally Posted by foosion

In the editor, CSS live computed final styles was showing that margins were 0, but the file preview panel had clear greater than 0 left and right margins. I saw there was a second css file that had

@page {
margin-left: 2em;
margin-right: 2em;
}

and fixing that made the margins visibly zero.

Why weren't the 2em left and right margins reflected is the editor's live CSS panel?

Not sure why it wasn't reflected but @page sets the properties of the page box and can be considered as being outside the live CSS scope. For the most part, the @page is used for setting printed pages. See @page on the Mozilla developer pages. Highly recommended reading if you are suffering from insomnia.

[theducks]

Was the Pages.css ALSO: linked (if in separate CSS).
Was there a second... conflicting @pages in another Linked CSS?