[Snowman] Missing p tags when rendering a passage with a link click

This error happens in Snowman 2.0.3.

Instead of using standard Twine links, I have programmed a link that renders the next passage inside the current screen. It works but there’s a small problem: the first paragraph is missing its p tags.

The link code can be something like this

<a href="javascript:void(0)" id="next">
    Click to render passage
    $('#next').click( function() { 
    } )

This creates a link with the id “#next”. When clicked, the link is removed, and the passage named “passge” is appended to the screen using the Snowman function story.render.

However, the HTML for the new passage looks like this:

First paragraph.
<p>Second paragraph.</p>

As far as I know, <%= story.render( ‘passage’ ) %> doesn’t cause this problem.

This causes CSS problems. Perhaps anyone has any idea of how to prevent this from happening? Thank you!

Oh god. Can you believe that I’ve stared at this for months and 4 minutes after posting here I get an idea to solve it?

It’s kind of hacky, but it seems to work. Instead of append(story.render("passage")), what I do now is append("<p>" + story.render("passage"))

No idea why it works. But it seems to.

(Of course, it could break if the first thing in the rendered passage isn’t text but some other HTML.)

If you create a simple test Snowman v2.0.3 project with a initial Passage containing content like the following…

First paragraph of Start.

Second paragraph of Start.

…then generate a Story HTML file and use your web-browser’s Developer Tools to Inspect the HTML elements of the ‘passage’ area, you would see something like…

<tw-passage class="passage" aria-live="polite">
   First paragraph of Start.
   <p>Second paragraph of Start.</p>

Which shows that the “automatic generation of paragraph elements based on consecutive line-breaks” feature of the story format is fundamentally broken when it comes to the 1st “paragraph” within a Passage. So the issue you’re having has nothing to do with what you’re trying to do.

And if you look this issue on the story format’s GitHub repository, you will see that is a known problem.

1 Like

I see. Thanks!