Another small Sigil bug

[jwes]

The preview seems to get out of sync with the code window when I use the float option with a picture. In the attached epub, if I scroll past the picture in line 348 and click on a paragraph in the preview window, the code window highlights a paragraph generally two paragraphs before the correct one.

[KevinH]

Which direction? Are you clicking on CodeView to get Preview to sync too it. Or are you clicking on Preview to get CodeView to sync on it?

If the latter, CodeView should move to the start of that paragraph.

[KevinH]

Okay, Your html code is invalid. You have an img nested inside a block element div inside a span inside a p tag with none of the closing tags being properly present.

This leads to tag paths being different since Preview fixes all of that whereas CodeView can not.
So there is no way to actually sync anything between that image and anything following it.

Simply run MendHTML by right clicking on the CodeView window. Then syncing with Preview will work just as expected.

[jwes]

Originally Posted by KevinH

Okay, Your html code is invalid. You have an img nested inside a block element div inside a span inside a p tag with none of the closing tags being properly present.

This leads to tag paths being different since Preview fixes all of that whereas CodeView can not.
So there is no way to actually sync anything between that image and anything following it.

Simply run MendHTML by right clicking on the CodeView window. Then syncing with Preview will work just as expected.

I did have a div inside a p tag, but the closing tags were all there (wouldn't there be an error if they weren't?). Is it an error to have a div inside a p? Splitting the text into two paragraphs does fix the problem, but the text now doesn't flow the way I want with one paragraph that starts above the image and flows alongside the image.

SOLVED - I changed the div to span and now it works.

[KevinH]

A div is a block element and can not be inside a p element.

It is important to note that just because a browser shows something does not make it valid xhtml / html. Most browsers including Preview will silently fix broken html on the fly. This leads to a disconnect between locations specified in Preview (that autofixes) and the "broken" code in CodeView. Which is why MendHTML exists as a tool as it builds the CodeView code up from the autofixed version of the DOM tree built by Preview or in this case the gumbo parser.

[KevinH]

FWIW, that code also has empty sup tags and other anomalies that should be cleaned up.

[nabsltd]

Originally Posted by KevinH

A div is a block element and can not be inside a p element.

Although the HTML presented was malformed, HTML 5 and XHTML 1.1 have removed the "p cannot contain a div" restriction...both are semantically identical as far as document structure is concerned.

Except for user-agent stylesheet differences between div and p (like p often having non-zero margin-top and margin-bottom), putting one inside the other generally renders the same, and doesn't generate a parsing error (Sigil's view accepts it fine).

Also, div is only a block element by default (just like p, so the following lines render identically on almost every platform:

<p>Testing <div style="display:inline">a div</div> inside a p</p>
<div>Testing <p style="display:inline">a p</p> inside a div</div>

[KevinH]

As I tried to explain, how they render on browsers does not make it compliant. The browser parser itself will split that code and inject an ending p tag to prevent the issues when building its internal DOM - just like you can not embed a p tag inside another p tag.

That is what I meant by autofixing.

See the current whatwg parsing code algorithm for details of when closing p tags are injected and why.

See https://html.spec.whatwg.org/multipa...ng-main-inbody

When the next thing to parse is:

A start tag whose tag name is one of: "address", "article", "aside", "blockquote", "center", "details", "dialog", "dir", "div", "dl", "fieldset", "figcaption", "figure", "footer", "header", "hgroup", "main", "menu", "nav", "ol", "p", "search", "section", "summary", "ul"

If the stack of open elements has a p element in button scope, then close a p element.

Insert an HTML element for the token.

This is the spec followed by current browsers. It effectively terminates the p tag DOM node and then injects the div node.

This makes the code in CodeView be different from the code in Preview (as Preview follows these rules). The gumbo parser we use also follows these rules autofixing the code to match. That is what Mend HTML does.