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

Go Back   MobileRead Forums > E-Book Software > Calibre > Editor

Notices

Reply
 
Thread Tools Search this Thread
Old 05-23-2014, 05:26 AM   #1
DrChiper
Bookish
DrChiper has become one with the cosmosDrChiper has become one with the cosmosDrChiper has become one with the cosmosDrChiper has become one with the cosmosDrChiper has become one with the cosmosDrChiper has become one with the cosmosDrChiper has become one with the cosmosDrChiper has become one with the cosmosDrChiper has become one with the cosmosDrChiper has become one with the cosmosDrChiper has become one with the cosmos
 
DrChiper's Avatar
 
Posts: 563
Karma: 21054
Join Date: Jun 2011
Device: pc, 600, t1, t2, t3, nexus 7, kobo aura 2, kobo clara HD, Pixel 3a
Question Live CSS questions

Thanks for this new feature, very usefull.

2 questions:
  1. Can the font of the Live CSS panel be adjusted?
    It is a tad big for my taste
  2. There is something odd here. The final margin is bigger than the inherited. The preview screen does not reflect this, however.
Attached Thumbnails
Click image for larger version

Name:	CalibreFinding.png
Views:	219
Size:	15.6 KB
ID:	123237  
DrChiper is offline   Reply With Quote
Old 05-23-2014, 05:28 AM   #2
kovidgoyal
creator of calibre
kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.
 
kovidgoyal's Avatar
 
Posts: 36,265
Karma: 16098999
Join Date: Oct 2006
Location: Mumbai, India
Device: Various
1. It uses the same font as the editor

2. The values are whatever the preview panel reports them to be. If your font size is set to 30 odd pt then 1em ~ 36px
kovidgoyal is offline   Reply With Quote
Advert
Old 05-23-2014, 06:00 AM   #3
DrChiper
Bookish
DrChiper has become one with the cosmosDrChiper has become one with the cosmosDrChiper has become one with the cosmosDrChiper has become one with the cosmosDrChiper has become one with the cosmosDrChiper has become one with the cosmosDrChiper has become one with the cosmosDrChiper has become one with the cosmosDrChiper has become one with the cosmosDrChiper has become one with the cosmosDrChiper has become one with the cosmos
 
DrChiper's Avatar
 
Posts: 563
Karma: 21054
Join Date: Jun 2011
Device: pc, 600, t1, t2, t3, nexus 7, kobo aura 2, kobo clara HD, Pixel 3a
ehh, I indicated the "margin" setting (not font), which is nowhere changed but differs in the computed final style.
DrChiper is offline   Reply With Quote
Old 05-23-2014, 06:09 AM   #4
Divingduck
Wizard
Divingduck ought to be getting tired of karma fortunes by now.Divingduck ought to be getting tired of karma fortunes by now.Divingduck ought to be getting tired of karma fortunes by now.Divingduck ought to be getting tired of karma fortunes by now.Divingduck ought to be getting tired of karma fortunes by now.Divingduck ought to be getting tired of karma fortunes by now.Divingduck ought to be getting tired of karma fortunes by now.Divingduck ought to be getting tired of karma fortunes by now.Divingduck ought to be getting tired of karma fortunes by now.Divingduck ought to be getting tired of karma fortunes by now.Divingduck ought to be getting tired of karma fortunes by now.
 
Posts: 1,143
Karma: 1404167
Join Date: Nov 2010
Location: Germany
Device: Sony PRS-650
Kovid, a very useful tool!

Maybe one point for your help file: explain that @ 26 means at Line 26 in the editor. It took some time to recognize it and understand this helpful information.

Last edited by Divingduck; 05-23-2014 at 06:44 AM.
Divingduck is offline   Reply With Quote
Old 05-23-2014, 06:22 AM   #5
kovidgoyal
creator of calibre
kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.
 
kovidgoyal's Avatar
 
Posts: 36,265
Karma: 16098999
Join Date: Oct 2006
Location: Mumbai, India
Device: Various
Quote:
Originally Posted by DrChiper View Post
ehh, I indicated the "margin" setting (not font), which is nowhere changed but differs in the computed final style.
Not sure what you mean? There is font-family: serif inherited from body
kovidgoyal is offline   Reply With Quote
Advert
Old 05-23-2014, 06:25 AM   #6
kovidgoyal
creator of calibre
kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.
 
kovidgoyal's Avatar
 
Posts: 36,265
Karma: 16098999
Join Date: Oct 2006
Location: Mumbai, India
Device: Various
@Divingduck: sure.
kovidgoyal is offline   Reply With Quote
Old 05-23-2014, 07:57 AM   #7
mrmikel
Color me gone
mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.mrmikel ought to be getting tired of karma fortunes by now.
 
Posts: 2,089
Karma: 1445295
Join Date: Apr 2008
Location: Central Oregon Coast
Device: PRS-300
It's worth noting that this function can be assigned a shortcut key which toggles under Edit Preferences, Keyboard Shortcuts, Windows. I think I don't need this on all the time, but it will sure be great when I am having a problem with something not displaying as I expect. (Which is too darn often!!)

Thanks again, Kovid!

I can see what Dr Chiper means. This is what it looks like on my machine. But I'm just glad to have it!
Attached Thumbnails
Click image for larger version

Name:	example.jpg
Views:	202
Size:	395.8 KB
ID:	123244  
mrmikel is offline   Reply With Quote
Old 05-23-2014, 10:46 AM   #8
arspr
Dead account. Bye
arspr ought to be getting tired of karma fortunes by now.arspr ought to be getting tired of karma fortunes by now.arspr ought to be getting tired of karma fortunes by now.arspr ought to be getting tired of karma fortunes by now.arspr ought to be getting tired of karma fortunes by now.arspr ought to be getting tired of karma fortunes by now.arspr ought to be getting tired of karma fortunes by now.arspr ought to be getting tired of karma fortunes by now.arspr ought to be getting tired of karma fortunes by now.arspr ought to be getting tired of karma fortunes by now.arspr ought to be getting tired of karma fortunes by now.
 
Posts: 587
Karma: 668244
Join Date: Mar 2011
Device: none
HEY, GREAT JOB.

It has completely replaced the Inspector in my workflow as it also gives me the ability to directly jump to the place where the style is set... (And as I nearly never use Inspector capability about doing CSS test preview changes on the fly).


Nevertheless two veeeeeeeeeeery small suggestions:
  • Quote:
    Originally Posted by DrChiper View Post
    1. Can the font of the Live CSS panel be adjusted?
      It is a tad big for my taste
    Quote:
    Originally Posted by kovidgoyal View Post
    1. It uses the same font as the editor
    I also think it's a bit big. Is it worth an additional font size setting for it?
  • I would also like to be able to reorder panel tabs which share the same location (in my case: Live CSS, Inspector, Check Book and Checkpoints) by holding and dragging their tabs. (Instead of needing to rebuilding the group in its final desired order). Feasible?

As implied, Kovid, unimportant suggestions, only if you feel bored and have some free time...
arspr is offline   Reply With Quote
Old 05-23-2014, 05:25 PM   #9
arspr
Dead account. Bye
arspr ought to be getting tired of karma fortunes by now.arspr ought to be getting tired of karma fortunes by now.arspr ought to be getting tired of karma fortunes by now.arspr ought to be getting tired of karma fortunes by now.arspr ought to be getting tired of karma fortunes by now.arspr ought to be getting tired of karma fortunes by now.arspr ought to be getting tired of karma fortunes by now.arspr ought to be getting tired of karma fortunes by now.arspr ought to be getting tired of karma fortunes by now.arspr ought to be getting tired of karma fortunes by now.arspr ought to be getting tired of karma fortunes by now.
 
Posts: 587
Karma: 668244
Join Date: Mar 2011
Device: none
A double post but here I think that I've got some better suggestions and even a possible "bug".

I upload a small test book (don't worry about its title, it's just the book I use for several testings) where I've been playing a little with styles...

I don't know what the HTML/CSS/ePub specs actually say but it really seems that the priority of CSS styles is:
  1. style attribute inside the tag.
  2. id referenced styles.
  3. class referenced styles.
  4. tag referenced styles.
  5. inherited styles.
  6. In case of conflictive definitions, the highest priority goes to the style defined in the same html file and then to the linked css style files.
    • Within the same location, the highest priority goes to the last defined entry. I mean a style in line 2 has lower priority than a style in line 85
  7. More over, even without being conflictive, classes can be defined in several places and also several classes can be applied to the same tag. In this case:
    1. The first rule is the location one. Classes from the very same html file have higher priority than classes from linked CSS files.
    2. Within the same location, when they are not conflictive, they are alphabetically sorted. .a class has higher priority than .z one

Well, I have two suggestions:
  • Would it be possible to strike through the overridden settings in the same way the Inspector does?
  • (In this one there's a very high possibility about saying tons of nonsense per second. Be warned). Kovid, please check the displayed order you have in Live CSS. It appears that you are displaying the styles from the very same html file always before the styles from linked CSS files, even if they have lower priority. I mean compare both "full" screenshots, you are displaying the blue p style from the html file before the orange and gold classes and even the much higher priority magenta id style from the linked CSS style file.
    Nevertheless this is just a "rendering" issue. The computed final style is correctly evaluated. See the "Wrong order in CSS Live but good evaluation" screenshot where I've just deleted the in-tag red style color.
    But if I have not made any mistake, "fixing" the shown order to match the real one (as Inspector does) would be great, as it can be confusing.
Attached Thumbnails
Click image for larger version

Name:	Full-Inspector.jpg
Views:	168
Size:	381.8 KB
ID:	123273   Click image for larger version

Name:	Full-Live CSS.jpg
Views:	158
Size:	379.2 KB
ID:	123274   Click image for larger version

Name:	Wrong order in CSS Live but good evaluation.jpg
Views:	154
Size:	363.6 KB
ID:	123275  
Attached Files
File Type: epub Page numbers Test - Yo.epub (4.4 KB, 115 views)
arspr is offline   Reply With Quote
Old 05-23-2014, 05:33 PM   #10
arspr
Dead account. Bye
arspr ought to be getting tired of karma fortunes by now.arspr ought to be getting tired of karma fortunes by now.arspr ought to be getting tired of karma fortunes by now.arspr ought to be getting tired of karma fortunes by now.arspr ought to be getting tired of karma fortunes by now.arspr ought to be getting tired of karma fortunes by now.arspr ought to be getting tired of karma fortunes by now.arspr ought to be getting tired of karma fortunes by now.arspr ought to be getting tired of karma fortunes by now.arspr ought to be getting tired of karma fortunes by now.arspr ought to be getting tired of karma fortunes by now.
 
Posts: 587
Karma: 668244
Join Date: Mar 2011
Device: none
Quote:
Originally Posted by DrChiper View Post
ehh, I indicated the "margin" setting (not font), which is nowhere changed but differs in the computed final style.
It's the very same situation despite margin, font-size or whatever other property.

"em" measure units are relative. As example 4em means "4 times whatever base size you have". Because of that, in the end you need to convert them to "absolute" sizes. And that is what you are getting. The computed final size cannot be "em", it must be pixels.

And remember that they are applied in cascade when inherited, they are NOT overridden in this case. If your base size is 15 pixels, your body is 2em and your h1 is 3em, you end with h1 being 90 pixels (15 x 2 x 3), not 45 pixels (15 x 3).

But matched rules are still overridden. If h1 is still 3em but h1.myclass is 4em, you will end with 15 x 2 (from body) x 4 (from .myclass) = 120 pixels. 3em is not applied any more.

Last edited by arspr; 05-23-2014 at 06:03 PM.
arspr is offline   Reply With Quote
Old 05-23-2014, 07:22 PM   #11
BetterRed
null operator
BetterRed ought to be getting tired of karma fortunes by now.BetterRed ought to be getting tired of karma fortunes by now.BetterRed ought to be getting tired of karma fortunes by now.BetterRed ought to be getting tired of karma fortunes by now.BetterRed ought to be getting tired of karma fortunes by now.BetterRed ought to be getting tired of karma fortunes by now.BetterRed ought to be getting tired of karma fortunes by now.BetterRed ought to be getting tired of karma fortunes by now.BetterRed ought to be getting tired of karma fortunes by now.BetterRed ought to be getting tired of karma fortunes by now.BetterRed ought to be getting tired of karma fortunes by now.
 
Posts: 15,767
Karma: 18746924
Join Date: Mar 2012
Location: Sydney Australia
Device: none
I moved the Live CSS window under the file list, it would be nice if it used the same 'style' as the file list (font, background colour etc)

More than happy to wait for 'full on' UI customisation.

BR
BetterRed is offline   Reply With Quote
Old 05-23-2014, 10:45 PM   #12
kovidgoyal
creator of calibre
kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.kovidgoyal ought to be getting tired of karma fortunes by now.
 
kovidgoyal's Avatar
 
Posts: 36,265
Karma: 16098999
Join Date: Oct 2006
Location: Mumbai, India
Device: Various
@arspr: CSS rule priority is more comples than that. http://www.w3.org/TR/css3-selectors/#specificity

And yes, it is on my todo list to to indicate overriden properties.

As for the order they are shown in, the order is not going to change, it will allways be style attirbute, rules matched from inline style tag, rules matched from included stylesheets (in the order they are included), inherited rules from ancestors.

As for the font size, I am not sure I understand why you find the same font ok in the editor and too large in live css. I can probably add a config option to have live css use the geenral ui font instead of the editor font, but I am not going to add a separate font size control for it.
kovidgoyal is offline   Reply With Quote
Old 05-24-2014, 03:49 AM   #13
arspr
Dead account. Bye
arspr ought to be getting tired of karma fortunes by now.arspr ought to be getting tired of karma fortunes by now.arspr ought to be getting tired of karma fortunes by now.arspr ought to be getting tired of karma fortunes by now.arspr ought to be getting tired of karma fortunes by now.arspr ought to be getting tired of karma fortunes by now.arspr ought to be getting tired of karma fortunes by now.arspr ought to be getting tired of karma fortunes by now.arspr ought to be getting tired of karma fortunes by now.arspr ought to be getting tired of karma fortunes by now.arspr ought to be getting tired of karma fortunes by now.
 
Posts: 587
Karma: 668244
Join Date: Mar 2011
Device: none
Quote:
Originally Posted by kovidgoyal View Post
@arspr: CSS rule priority is more comples than that. http://www.w3.org/TR/css3-selectors/#specificity
I leave Chinese for my next life... Too alien for my limited brain. I fully trust in you.

Quote:
And yes, it is on my todo list to to indicate overriden properties.

As for the order they are shown in, the order is not going to change, it will allways be style attirbute, rules matched from inline style tag, rules matched from included stylesheets (in the order they are included), inherited rules from ancestors.
On second thoughts you're probably completely right. If you fully mimic Inspector, you already had Inspector from the beginning...

In this way we have styles sorted by source rather than Inspector's priority

Although, because of that, mrking overridden entries becomes much more critical. Glad to hear that it is in the ToDo list.

Quote:
As for the font size, I am not sure I understand why you find the same font ok in the editor and too large in live css. I can probably add a config option to have live css use the geenral ui font instead of the editor font, but I am not going to add a separate font size control for it.
I think the weirdness feeling about the font size or appearance comes from every other panel (Checkpoints, Check Book and Inspector) having smaller/different font.
arspr is offline   Reply With Quote
Old 05-24-2014, 04:51 AM   #14
BobC
Guru
BobC ought to be getting tired of karma fortunes by now.BobC ought to be getting tired of karma fortunes by now.BobC ought to be getting tired of karma fortunes by now.BobC ought to be getting tired of karma fortunes by now.BobC ought to be getting tired of karma fortunes by now.BobC ought to be getting tired of karma fortunes by now.BobC ought to be getting tired of karma fortunes by now.BobC ought to be getting tired of karma fortunes by now.BobC ought to be getting tired of karma fortunes by now.BobC ought to be getting tired of karma fortunes by now.BobC ought to be getting tired of karma fortunes by now.
 
Posts: 644
Karma: 2865846
Join Date: Dec 2008
Location: Lancashire, U.K.
Device: BeBook 1, BeBook Pure, Kobo Glo, (and HD),Energy Sistem EReader Pro +
Quote:
Originally Posted by kovidgoyal View Post

As for the font size, I am not sure I understand why you find the same font ok in the editor and too large in live css. I can probably add a config option to have live css use the geenral ui font instead of the editor font, but I am not going to add a separate font size control for it.
@Kovid For me the font size isn't a real issue, however the fact there is a blank line (or the equivalent vertical space) between each line of the css display does restrict the overall view. Is it possible to reduce this excessive spacing ?

Another issue seems to be that the live css window has vertical scroll capability but not horizontal, meaning it isn't possible without maximising the window to read all of some longer lines.

BobC
BobC is offline   Reply With Quote
Old 05-24-2014, 07:29 AM   #15
arspr
Dead account. Bye
arspr ought to be getting tired of karma fortunes by now.arspr ought to be getting tired of karma fortunes by now.arspr ought to be getting tired of karma fortunes by now.arspr ought to be getting tired of karma fortunes by now.arspr ought to be getting tired of karma fortunes by now.arspr ought to be getting tired of karma fortunes by now.arspr ought to be getting tired of karma fortunes by now.arspr ought to be getting tired of karma fortunes by now.arspr ought to be getting tired of karma fortunes by now.arspr ought to be getting tired of karma fortunes by now.arspr ought to be getting tired of karma fortunes by now.
 
Posts: 587
Karma: 668244
Join Date: Mar 2011
Device: none
Quote:
Originally Posted by arspr View Post
Quote:
And yes, it is on my todo list to to indicate overriden properties.

As for the order they are shown in, the order is not going to change, it will allways be style attirbute, rules matched from inline style tag, rules matched from included stylesheets (in the order they are included), inherited rules from ancestors.
On second thoughts you're probably completely right. If you fully mimic Inspector, you already had Inspector from the beginning...

In this way we have styles sorted by source rather than Inspector's priority

Although, because of that, mrking overridden entries becomes much more critical. Glad to hear that it is in the ToDo list.
Entering brainstorming and desire mode about the overridden mark:

Could marking not only the overridden state but where it is being overridden possible? And a link to that overriding style?

I mean something like this (as an idea):

color: blue by .HiPriorityClass in whateverFile.css

where the property would be stricken through, not underlined, (but I cannot do it in this Mobileread forum), and, of course, the last blue whateverFile.css would be a link to that position.

Last edited by arspr; 05-24-2014 at 07:31 AM.
arspr 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
Questions about CSS and best practices graycyn ePub 8 03-18-2012 04:15 PM
External CSS file questions michaelbr Sigil 10 01-27-2011 08:08 AM
css pseudo elements and adjacent combinators in extra css? ldolse Calibre 2 12-21-2010 05:09 PM
a few extra css questions marbs Recipes 12 11-20-2010 10:15 AM
CSS Questions JTAL604622 Calibre 0 11-18-2010 06:33 PM


All times are GMT -4. The time now is 12:38 AM.


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