Preview/Book View and Stylesheet Errors

ChrisI · 08-05-2018, 11:29 AM

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.

Turtle91 · 08-05-2018, 11:48 AM

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

DiapDealer · 08-05-2018, 12:07 PM

There is no switch we can throw to tell WebKit to be "less forgiving" about css syntax errors.

GrannyGrump · 08-06-2018, 12:11 AM

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.

DNSB · 08-06-2018, 12:55 AM

Quote:

Originally Posted by GrannyGrump

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'm reverted to using ADE 2 after a failed attempt to use ADE 3 -- it deregistered every second time I used it and never got to trying 4.5. However, ADE 3 did the same error in stylesheet is no stylesheet as ADE 2.

This is the main reason that using the W3C check became part of my standard workflow.

Quote:

Originally Posted by GrannyGrump

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.

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.

GrannyGrump · 08-06-2018, 01:34 AM

Quote:

Originally Posted by DNSB

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

That there is exactly why I developed the habit of ALWAYS placing a semi-colon at the end of EVERY line -- then I don't have to worry about being absent-minded and forgetting to do that if I add more lines...

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.

ChrisI · 08-06-2018, 12:43 PM

Quote:

Originally Posted by DiapDealer

There is no switch we can throw to tell WebKit to be "less forgiving" about css syntax errors.

And this is the fundamental problem. The "viewer" software used by the consumer that purchases the book needs to be able to deal the best it can with whatever gets thrown at it.

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?

DiapDealer · 08-06-2018, 01:38 PM

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.

AlanHK · 08-07-2018, 08:32 PM

Quote:

Originally Posted by GrannyGrump

That there is exactly why I developed the habit of ALWAYS placing a semi-colon at the end of EVERY line -- then I don't have to worry about being absent-minded and forgetting to do that if I add more lines...

The "Reformat CSS" on the r-click menu will do that for you on any style definitions without a final ;, one reason I run it fairly often.

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.

DiapDealer · 08-07-2018, 09:25 PM

Quote:

Originally Posted by AlanHK

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.

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.

AlanHK · 08-08-2018, 12:39 AM

Quote:

Originally Posted by DiapDealer

The Reports Tool doesn't suffice for this?

You're right of course--thanks for pointing that out.

08-05-2018, 11:29 AM	#1
ChrisI 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.

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

08-05-2018, 11:48 AM	#2
Turtle91 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
DiapDealer Grand Sorcerer Posts: 27,548 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
GrannyGrump 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, 01:38 PM	#8
DiapDealer Grand Sorcerer Posts: 27,548 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.