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.
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></p>
<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!
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></p>
<p>Second paragraph of Start.</p>
</tw-passage>
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.