View Single Post
Old 08-08-2016, 07:37 AM   #1
arthurattwell
Member
arthurattwell is on a distinguished road
 
Posts: 12
Karma: 56
Join Date: Dec 2008
Device: None
Kindle Previewer: error converting from epub with specific CSS and `display: none`

I believe I have found a bug in Kindle Previewer 3.4 on Windows 10. Here are the details. I'd love to know if others have found anything similar or can shed more light on what causes it, or if I'm just wrong about something.

Essentially, conversion from epub throws an error when, in its CSS, `display: none` is set for a class that is referenced on its own *and* as a child of another element.

So this HTML:

Code:
<body>
<div>
<h1>Test heading</h1>
<p class="test-class">Test chapter text, with a class of 'test-class'. I'm going to try to hide this with CSS.</p>
</div>
</body>
And this CSS:

Code:
body .test-class, .test-class { display: none; }
will throw this conversion error:

Code:
Error(prcgen):E21018: Enhanced Mobi building failure, while parsing content in the file.
The error occurs during the phase indicated by KP3.4 as 'Optimizing'. KindleGen does not throw any error and converts fine. So the problem is probably not with the KindleGen component of Previewer.

The error message references the HTML file, even though (after extensive testing) it's clear the problem is with the CSS.

If anyone would like to try reproduce this, I've included the full HTML and CSS files for testing below. I used Sigil 0.9.6 to create the epub.

Naturally the workaround is simple: just structure your CSS differently. I happen to use Sass to generate my CSS, and if I nest classes to keep things neat in Sass, it's very easy to end up with this error-causing CSS structure.

HTML file in full:

Code:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="../Styles/styles.css"/>
</head>
<body>
<div>
<h1>Test heading</h1>
<p class="test-class">Test chapter text, with a class of 'test-class'. I'm going to try to hide this with CSS.</p>
</div>
</body>
</html>
CSS file in full, with explanatory comments:

Code:
/* This CSS shows a bug in conversion with Kindle Previewer 3.4 on Windows 10
 * If a class is hidden with `display: none` and it is referenced both 
 * on its own and as a child of a parent element, conversion breaks:
 *
 * "Error(prcgen):E21018: Enhanced Mobi building failure, while parsing content in the file. Content: <Test heading> in file: C:\Users\Arthur\AppData\Local\Temp\mbp_7E0_8_8_B_15_10_F0_17D0_F50_1\OEBPS\Text\test-file.xhtml line: 7"
 *
 * The error occurs during the phase indicated by KP3.4 as 'Optimizing'
 * KindleGen (command line) does not throw any errors and converts fine.
 * 
 * So the following following line will cause the error:
 */


body .test-class, .test-class { display: none; }


/* This will also fail:

body .test-class { display: none; }
.test-class { display: none; }

*/

/* With this layout, the conversion does not seem to complete or error, but hangs:

body .test-class { display: none; }
div .test-class { display: none; }

*/
arthurattwell is offline   Reply With Quote