08-05-2018, 11:29 AM | #1 |
Connoisseur
Posts: 55
Karma: 847
Join Date: Sep 2007
Device: Kobo H2O, Libre 2
|
Preview/Book View and Stylesheet Errors
I was editing my book in Sigil, and everything looked good in the preview. When I put the book on my Kobo, chapter titles were missing.
It finally dawned on me that I might have a bad stylesheet, so I ran the stylesheet checker. Sure enough, I set a font height to 1.5, instead of 1.5em. I understand that different e-pub readers do different things to work with poorly formatted books. But when I am in Sigil, it would be nice if the preview was more strict, not forgiving. My bad for not running a stylesheet check every time, like I run an e-pub check. But if the preview looked like my Kobo, I would have caught this sooner. |
08-05-2018, 11:48 AM | #2 |
A Hairy Wizard
Posts: 3,094
Karma: 18727053
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
|
As I understand it the standards say that if a CSS style is incorrect or otherwise undecipherable the app/device is supposed to degrade gracefully eg. it should ignore just that particular styling. Unfortunately not all devices/apps are compliant with the standards.
The question that comes to mind is: Was the preview pane compliant by ignoring the incorrect css, or was kobo compliant by not displaying the header at all?? |
08-05-2018, 12:07 PM | #3 |
Grand Sorcerer
Posts: 27,549
Karma: 193191846
Join Date: Jan 2010
Device: Nexus 7, Kindle Fire HD
|
There is no switch we can throw to tell WebKit to be "less forgiving" about css syntax errors.
|
08-06-2018, 12:11 AM | #4 |
Obsessively Dedicated...
Posts: 3,200
Karma: 34977896
Join Date: May 2011
Location: JAPAN (US expatriate)
Device: Sony PRS-T2, ADE on PC
|
I recommend using ADE for PC as the "Canary in the Coal Mine".
I use old version 2 for just this reason -- if there is even one stylesheet error, the formatting ALL displays as default. (I am not sure if newer versions 3 and 4 still behave this way.) I load my epub in ADE, and if there is any formatting failure, I pop back to Sigil, hunt for and fix error, save changes--- then go back to ADE, return to Library, and hit the Read button again to refresh the load. Rinse, lather, repeat until all errors are repaired. Some of the most frustrating to find were a missing semi-colon, an extra hyphen, mis-matched capitalization. Missing or extra curly braces can do a number on you. |
08-06-2018, 12:55 AM | #5 | |
Bibliophagist
Posts: 35,393
Karma: 145435140
Join Date: Jul 2010
Location: Vancouver
Device: Kobo Sage, Forma, Clara HD, Lenovo M8 FHD, Paperwhite 4, Tolino epos
|
Quote:
This is the main reason that using the W3C check became part of my standard workflow. I ran into a couple of lovely ebooks where they had Amazon KF7/KF8 conditional code without the extra closing curly braces. And another couple where the stylesheet had no semi-colon on the last line of a style before the curly brace (which was fine) but then someone added a padding line to every paragraph related style so you now had two lines with no semi-colon in those styles. epubcheck and W3C both whinged about those errors. |
|
08-06-2018, 01:34 AM | #6 | |
Obsessively Dedicated...
Posts: 3,200
Karma: 34977896
Join Date: May 2011
Location: JAPAN (US expatriate)
Device: Sony PRS-T2, ADE on PC
|
Quote:
I remember an old thread about "saving space" and someone who was totally hooked on "clean coding" recommended removing un-needed semi-colons --- I guess so you could reduce file size by 10 bytes or something. I just rolled my eyes and moved on. Last edited by GrannyGrump; 08-06-2018 at 01:39 AM. |
|
08-06-2018, 12:43 PM | #7 | |
Connoisseur
Posts: 55
Karma: 847
Join Date: Sep 2007
Device: Kobo H2O, Libre 2
|
Quote:
But as a content creator, you want every potential problem revealed. There is really a need for two different types of e-pub renderers. Are there other alternatives to WebKit? Or are they all targeted at the consumer? |
|
08-06-2018, 01:38 PM | #8 |
Grand Sorcerer
Posts: 27,549
Karma: 193191846
Join Date: Jan 2010
Device: Nexus 7, Kindle Fire HD
|
Webkit is merely what Sigil uses to render its content. There are many, many different rendering engines for various different epub reading devices and apps.
As a content provider/creator, Sigil has always stressed that you not trust Preview/Book View as the ultimate resource on how your book should look on target devices. You should look at them on as many target devices and apps as you can reasonably afford to do. As others have mentioned, ADE 2.0 is a fairly good test. Unfortunately, we can't use their RMSDK engine in our opensource Sigil project. Not even if we wanted to (and could afford to license it). The short answer is that Sigil can't give you what you want in this regard. We use what we have available to us. |
08-07-2018, 08:32 PM | #9 | |
Guru
Posts: 668
Karma: 929286
Join Date: Apr 2014
Device: PW-3, iPad, Android phone
|
Quote:
As for debugging CSS, I installed "CSS lint" plugin, but it has never told me anything useful. I would like a way to find any undefined styles. That can happen from a simple typo. And sometimes I take text from one book to transplant to another, very tedious to be sure all the styles have been translated. Last edited by DiapDealer; 08-07-2018 at 09:24 PM. Reason: I edited this instead of quoting. Whoops! Fixed it. |
|
08-07-2018, 09:25 PM | #10 |
Grand Sorcerer
Posts: 27,549
Karma: 193191846
Join Date: Jan 2010
Device: Nexus 7, Kindle Fire HD
|
The Reports Tool doesn't suffice for this? "Style Classes in HTML Files" should show you style classes in HTML files that have no matching selector in the linked style sheet(s). And "Style Classes in CSS Files" should show you whether or not class-based selectors in CSS files are used in HTML files or not.
|
08-08-2018, 12:39 AM | #11 |
Guru
Posts: 668
Karma: 929286
Join Date: Apr 2014
Device: PW-3, iPad, Android phone
|
|
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
View preview pane in Explorer with Calibre | Mamaijee | Library Management | 3 | 10-21-2017 11:21 PM |
Differences in Code view and File preview | chaot | Editor | 3 | 05-18-2016 02:49 PM |
Font size in Book View / Preview Pane | Notjohn | Sigil | 4 | 10-12-2015 10:17 AM |
replace in book view changes view to code view | cybmole | Sigil | 4 | 10-28-2012 01:20 PM |
Sigil highlight Book View No Longer Shows in Code View | Themus | Sigil | 4 | 10-04-2012 07:54 PM |