Using headings (markdown or html tags) causes a delay in displaying text

Question

With some passages in my stories, I'm seeing a delay before the text is displayed. It took me a little while to isolate the issue, but I think it's related to using headings styled with either markdown (##) or html tags (<h2>). Here's an example.

In this passage, the text displays all at once:

Title
No heading.

[[Next->test02]]

In this passage, there's a delay between the appearance of the Title text and the rest of the passage text:

##Title
Markdown heading.

[[Next->test03]]

The same thing happens in this passage:

<h2>Title</h2>
HTML heading.

[[Next->test04]]

Finally, this passage displays all the text at once, with the Title text styled using <span> tags and a class on the story stylesheet:

<span class="h2">Title</span>
``<span>`` tag heading.

 

.h2 {
  font-size: 2.5em;
  font-weight: bold;
  padding-bottom: 80px;
}

...but the heading displays higher on the page than the other passages, and the padding-bottom CSS selector doesn't seem to have any effect.

Is this a Twine issue, or am I doing something wrong? I'd like to have all of the text display at once when the passage loads.

I'm using Harlowe 3.0.2 in Twine 2.3.1.

Cheers! ~K

Answer 1

Please use the Question Tags to state the name and full version number of the Story Format you are using, doing this with the Question Tags helps the answerer quickly determine exactly which story format is involved.

The visual effect you are seeing is a result of how the rendering phase of Harlowe's Passage Transition process handles HTML elements that are block based. (eg. elements that default to CSS display: block)

You will need to use CSS in your project's Story Stylesheet area to change the block based HTML elements you wish to use to be displayed as inline-block based instead. The following examples demostrates how to do this to the h2 HTML element.

h2 {
	display: inline-block;
	width: 100%;
}

note: You can change the above example to include other block based HTML elements by simply adding the element type to the selector. The following example extends the above to include the HTML div and hr elements.

h2, div, hr {
	display: inline-block;
	width: 100%;
}

 

Comments

That fixed it! Thank you!