I’ve been putting together some suggestions on how the paragraph bookmarks feature can be improved, which I’ll post onceI’ve nailed down some details.
But one thing that can’t easily be coded around is the fact that the MarkDown parser is generating invalid HTML due to inline figure tags.
Take this paragraph randomly pulled from The Male Order Step 2: Transformation (with thanks to @rubbrsome). It starts out in the source like this:
When the connection was made, several things happened. [Their](https://drive.google.com/file/d/1Dyw3AQp8ydJkxq1B7WC6Pyb15q5FBV8T/view?usp=sharing) hands and feet sunk into the ground, integrating the men's bodies with the alien landscape. The men's rubber bodies began to glow. Small orange blobs began to grow like pods along their glossy skin And the orange vein-like netting that covered their bodies radiated with energy. It flowed out of them, through the cock and ass umbilicals, down that network of vines until it reached the tower.
I’m guessing the MarkDown parser then turns that into this:
<p>
<figure>
<img src="/image/show/10004265" alt="Christopher" decoding="async" class="zoomImg zoomify">
<figcaption>Christopher</figcaption>
</figure>
When the connection was made, several things happened. <a href="https://drive.google.com/file/d/1Dyw3AQp8ydJkxq1B7WC6Pyb15q5FBV8T/view?usp=sharing">Their</a> hands and feet sunk into the ground, integrating the men’s bodies with the alien landscape. The men’s rubber bodies began to glow. Small orange blobs began to grow like pods along their glossy skin And the orange vein-like netting that covered their bodies radiated with energy. It flowed out of them, through the cock and ass umbilicals, down that network of vines until it reached the tower.
</p>
The problem is, that’s invalid HTML.
The <p> tag is a block-level element that is only permitted to contain phrasing content — “inline” tags like <b>, <button>, <code> (but not <pre>), etc. The tag will automatically close if it encounters another block-level element like <figure>. So, the code is actually interpreted as this, in the browser:
<p></p>
<figure>
<img src="/image/show/10004265" alt="Christopher" decoding="async" class="zoomImg zoomify">
<figcaption>Christopher</figcaption>
</figure>
When the connection was made, several things happened. <a href="https://drive.google.com/file/d/1Dyw3AQp8ydJkxq1B7WC6Pyb15q5FBV8T/view?usp=sharing">Their</a> hands and feet sunk into the ground, integrating the men’s bodies with the alien landscape. The men’s rubber bodies began to glow. Small orange blobs began to grow like pods along their glossy skin And the orange vein-like netting that covered their bodies radiated with energy. It flowed out of them, through the cock and ass umbilicals, down that network of vines until it reached the tower.
<p></p>
All of that paragraph’s text is completely outside of the <p> tags (it’s a direct child of the enclosing <div class="storyText formattedText">), which is why the paragraphs around figures format weirdly and the bookmarking doesn’t work right — technically, they’re not paragraphs at all.
I’m not 100% sure what the right solution is. Most MarkDown figure-conversion plugins will only operate on image links outside of paragraphs, not inline ones, for this reason. It’s surprising that the site’s markdown parser is even willing to do this.
The fix might be to just always place image embeds on a separate line in the markdown source. If the figure-conversion code is at all sane, it will hopefully convert those without wrapping a paragraph tag around it (since, again, that’s invalid code). But even if it does still create two empty <p></p> around the figure, at least all of the body paragraphs would be real paragraphs, without any random bits of uncontained text floating around.
