EPubCheck and Funky HTML code with Code Block

Scrivener Scrivener for Windows
, , ,
1

Hi, I’ve come across a weird HTML coding issue with the Code Block style. I didn’t see anything about it in the forum.

In the book I’m working on, I use Code block to format chat dialogue. When I was compiling my book, EPubCheck gave me a ton of errors, all relating to the sections of said chat. They look like this:

ERROR (RSC-005) at “rehuman_codeblocktest.epub/OPS/body.xhtml” (line 48, col 6):
Error while parsing file: element “pre” not allowed here; expected the element end-tag, text, element “a”, “abbr”, “area”, “audio”, “b”, “bdi”, “bdo”, “br”, “button”, “canvas”, “cite”, “code”, “data”, “datalist”, “del”, “dfn”, “em”, “embed”, “epub:switch”, “i”, “iframe”, “img”, “input”, “ins”, “kbd”, “label”, “link”, “map”, “mark”, “meta”, “meter”, “ns1:math”, “ns2:svg”, “object”, “output”, “picture”, “progress”, “q”, “ruby”, “s”, “samp”, “script”, “select”, “slot”, “small”, “span”, “strong”, “sub”, “sup”, “template”, “textarea”, “time”, “u”, “var”, “video” or “wbr” (with xmlns:ns1=“``http://www.w3.org/1998/Math/MathML”`` xmlns:ns2=“``http://www.w3.org/2000/svg”``) or an element from another namespace

It took me a while, but I think I figured out the issue.

When I checked the HTML in Calibre, I noticed this output for a testing section of the Code Block style:

<pre><code><span class="code-block">Testing testing testing</span>

<pre><code>One two three</code></pre>

<pre><code>Four five six</code></pre>

In the first line of the text, there is the Code Block span (I don’t know why it’s only one line, though I suppose perhaps the formatting assumes a long, unbroken string of code, and not several lines?), but it doesn’t close the “pre” and “code” tags on that line, unlike the other lines. I think EPubCheck is freaking out because it then thinks the SECOND “pre” tag is nested.

I couldn’t figure out any other way to fix it aside from editing the raw HTML. I tried making a new style that had the same preformatted text font, but it doesn’t output the font in the final epub. really like how the preformatted text looks in my book, and I don’t mind fixing the HTML, but I wanted to pass the issue along!

I otherwise very much love Scrivener, thanks for making it! :slightly_smiling_face:

2

Sorry, I need to add this because I didn’t realize it when I was copying and pasting the code: the first line DOES put an ending tag at the end of the entire Code Block. So the other “pre” tags ARE being nested, which EPubCheck does not like (and I think you’re not supposed to do anyway). It looks like this:

<pre><code><span class="code-block">Testing testing testing</span>
<pre><code>One two three</code></pre>
<pre><code>Four five six</code></pre>
</code></pre>

So for some reason when you do a line break within the Code block style, it adds new “pre” and “code” tags for each line.

I just tested it with the following revision:

<pre><code><span class="code-block">Testing testing testing</span>
One two three
Four five six
</code></pre>

And it came out fine, without an error.

3

There is a known bug in the software that will cause spans to be added to block level elements, when the block element is styled (as it would be in this case, to Code Block). The trigger is having the style save “All formatting” instead of just “Save Paragraph Style”, at the top of the style configuration panel. The font checkboxes are fine to leave as they were, which is the main thing you would want to change for code anyway, at the character level.

You really only need to fix this in the compile format, so if you do have some purpose for character formatting in these, that you would like to retain for other formats, you can just address it in the compile settings. You can’t change the style type, in the Styles compile format design window, so delete it, and then add a new paragraph-only style. Important: after doing that, go into the HTML Options section, and make sure the newly created style is assigned to function as a proper code block—otherwise you’ll get <p class="code-block">...</p>.

Hopefully that resolves the lack of termination on the first line.

The other thing that is a little odd about your output is that it is not merging styled lines together into one block. When I put five test lines into a document and set them to code block, I get:

<pre><code>Line one.
Line two.
Line three.
Line four.
Line five.
</code></pre>

And that is how it should be. So there may be something additional going on in the original text that is causing such a result. Empty lines that aren’t also styled maybe?

So for some reason when you do a line break within the Code block style, it adds new “pre” and “code” tags for each line.

Do you mean the Insert ▸ Break ▸ Line Break? If so, that shouldn’t necessarily cause a problem like this. It wouldn’t be desirable in this case, as Scrivener should be interpreting those to <br/>, which is the closest HTML analogue to that kind of line break, but in my experience that shouldn’t break most HTML readers. It will still make a newline, it just makes your code less pretty for no reason (as the <pre> already lets normal newlines be newlines).

1 Like
4

The span tag thing isn’t causing issues in the epub so I’m not as concerned about it.

Do you mean the Insert ▸ Break ▸ Line Break?

No, typically I’m just typing a line, hitting Enter, then typing the next line. Though I did just test it out with Alt+Enter. Here’s the comparison:

This is JUST hitting Enter for a new line:
<pre><code><span class="code-block">Testing</span>
<pre><code>One</code></pre>
<pre><code>Two</code></pre>
<pre><code>Three</code></pre>
</code></pre>

This is Alt+Enter:
<pre><code><span class="code-block">Testing<br />one<br />two<br />three</span>
</code></pre>

Alt+Enter code wasn’t flagged on EPubCheck, which makes sense. I’m aware of Alt+Enter on MS Word and such, so maybe that could be a workaround.

1 Like
5

Okay, to rephrase my suggestion then, I think maybe the span issue is causing the problem with the improper element nesting, and with further testing since I posted the above, I think it is also causing the bizarre multi-line element wrapping, too.

It should be a quick and non-destructive test if you are concerned about going out of the way. Right-click on the Format you use in the left sidebar, of the compile overview window, and select the option duplicate and edit. You can apply the few quick fixes I mentioned now, without disturbing your original setup.

I have attached a very simple demonstration of a compile format that exports clean code blocks. If I do no more than switch to the stock “Ebook” format, it breaks in the same manner you demonstrated above.

code_block_test.zip (148.2 KB)

I will add these findings to our existing ticket on the span issue. It already causes negative issues with formatting (double indents in some cases), but if it is now also causing validation errors with stock settings, then that makes it even more important to fix.

1 Like
6

Oh I see what you mean now. I figured out how to fix the Compile style and that fixed it. Thanks for your help!

1 Like
7

Excellent, glad to hear it is working well now.

1 Like