![]() |
#1 |
Guru
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 741
Karma: 1077122
Join Date: Sep 2013
Device: Kobo Forma
|
Confused About Computed Final Style
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 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 -------------------------- Last edited by enuddleyarbl; 09-02-2024 at 01:42 PM. |
![]() |
![]() |
![]() |
#2 |
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 1,291
Karma: 6700678
Join Date: Sep 2021
Location: Australia
Device: Kobo Libra 2
|
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. |
![]() |
![]() |
Advert | |
|
![]() |
#3 |
Guru
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 741
Karma: 1077122
Join Date: Sep 2013
Device: Kobo Forma
|
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.
|
![]() |
![]() |
![]() |
#4 |
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 1,291
Karma: 6700678
Join Date: Sep 2021
Location: Australia
Device: Kobo Libra 2
|
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 |
![]() |
![]() |
![]() |
#5 | |
Guru
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 741
Karma: 1077122
Join Date: Sep 2013
Device: Kobo Forma
|
Quote:
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. Last edited by enuddleyarbl; 09-02-2024 at 07:48 PM. |
|
![]() |
![]() |
Advert | |
|
![]() |
#6 | |
Bibliophagist
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 39,064
Karma: 153098470
Join Date: Jul 2010
Location: Vancouver
Device: Kobo Sage, Libra Colour, Lenovo M8 FHD, Paperwhite 4, Tolino epos
|
Quote:
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. |
|
![]() |
![]() |
![]() |
#7 |
Addict
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 267
Karma: 4562
Join Date: Sep 2011
Device: Kobo Libra 2 & Clara BW
|
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? |
![]() |
![]() |
![]() |
#8 | |
Well trained by Cats
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 30,301
Karma: 57979022
Join Date: Aug 2009
Location: The Central Coast of California
Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A
|
Quote:
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) |
|
![]() |
![]() |
![]() |
#9 | |
Addict
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 267
Karma: 4562
Join Date: Sep 2011
Device: Kobo Libra 2 & Clara BW
|
Quote:
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. ![]() |
|
![]() |
![]() |
![]() |
#10 |
Guru
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 741
Karma: 1077122
Join Date: Sep 2013
Device: Kobo Forma
|
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. |
![]() |
![]() |
![]() |
#11 |
Well trained by Cats
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 30,301
Karma: 57979022
Join Date: Aug 2009
Location: The Central Coast of California
Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A
|
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. |
![]() |
![]() |
![]() |
#12 | |
Addict
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 267
Karma: 4562
Join Date: Sep 2011
Device: Kobo Libra 2 & Clara BW
|
Quote:
![]() I guess re-reading, playing and more practice are the way to go. |
|
![]() |
![]() |
![]() |
|
![]() |
||||
Thread | Thread Starter | Forum | Replies | Last Post |
confused about style inheritance | lumpynose | ePub | 8 | 05-14-2019 10:07 AM |
Showing template-computed columns as [rating] stars isn't possible? | kaoruAngel | Library Management | 2 | 11-06-2017 08:49 AM |
Feature request: new CSS class from computed style | kat7 | Sigil | 23 | 01-02-2015 01:30 PM |
Final Round 3: Calling Sony Style re: PRS-500 Firmware upgrade | AprilHare | Sony Reader | 10 | 12-09-2009 10:02 PM |