0 votes
by (160 points)

I am new to twine, and I was trying to use horizontal lines using the ---. The problem is now the text before the line appear normally then after it finishes transition any text after the line appears suddenly. Is there a solution for that so the text appears normally? Thanks in advance :)

1 Answer

+1 vote
by (159k points)
selected by
Best answer

The --- horizontal line markup you are using is converted to a HTML <hr> element during the process that converts the current Passage's content into the HTML elements that will make up the current page.

Due to how Harlowe has implemented its Passage Transitioning the visual effect that process uses has rendering issues when showing content that appears after HTML elements that are block based, like the <hr> element is. The issue causes some of the current Passage's content to transition in noramally where other content will apear instantly (possibably after a short delay).

To overcome this issue you need to use CSS within your project's Story Stylesheet area to change any of the block based HTML elements you will be using into inline-block based ones instead. The following CSS example changes any <hr>, <div>, and <p> HTML elements you use to behave like other Passage content.

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

note: If you start using another block based HTML element that causes this same issue then you can simply add that element's name to the above CSS selector list.
eg. if you start using level 1 header element <h1> within your passages then change the above CSS to the following

hr, div, p, h1 {
	display: inline-block;
	width: 100%;