Ensuring consistent line spacing

Question

Using Twine 2 and Harlowe 2, I am creating a story that is mostly prose, but also contains a poem in one passage. When I test my story in Twine, said passage looks like this screenshot which is exactly how I want it to look. However, when I play the published file in Firefox, it looks like this screenshot in which the line spacing is messed up.

How can I ensure that the line spacing will be correct when played in-browser? This seems like it should be a simple thing to solve, so I apologize if I have overlooked an answer elsewhere.

Answer 1

If you used the Developer Tools built into those two web-browsers to Inspect the relevant section of the HTML generated for your example you will see that it looks something like the following.

<tw-passage tags="">
	<tw-sidebar>...</tw-sidebar>
	Here is some poetry:
	<br>
	<br>
	stanza one line one
	<br>
	stanza one line two
	<br>
	stanza one line three
	<br>
	stanza one line four
	<br>
	<br>
	stanza two line one
	<br>
	...
</tw-passage>

Harlowe includes the following default CSS rule...

br + br {
	display: block;
	height: 0;
	margin: 0.8ex 0;
}

... which is meant to only effect the situation where you have two consequential line-breaks (BR elements) and there is nothing between those two line-breaks. This is known as an Adjacent sibling combinator selector.

Ideally this rule should only affect the double <br> elements between "Here is some poetry:" and "stanza one line one" and the ones between "stanza one line four" and "stanza two line one", and in the case of Chrome this is true because all the other <br> elements are separated by a line of text.

However Firefox also treats the <br> elements are separated by a line of text as if they are the same as the double <br> elements. This results in the 0.8ex top & bottom margin being applied to all the <br> elements, which in turns results in extra space between each line of a stanza.

note: You can test this yourself by Inspecting the HTML of the current page in Firefox and temporarily disable that margin in that CSS rule, you will then see that the extra spacing disappears.

I would guess that the reason this is happening is because those lines of text are what's known as Text Nodes, which are slightly different to a HTML element, and for some reason known to only the developers of Firefox they are not considered when determine if a CSS Adjacent sibling combinator selector rule should be applied or not.

There are a number of ways to fix this issue, one of the simpler ones being to wrap each of those lines of text within a HTML element like so. (you don't have to use a <span> element, you can choose one of the others.)

<span>Here is some poetry:</span>

<span>stanza one line one</span>
<span>stanza one line two</span>
<span>stanza one line three</span>
<span>stanza one line four</span>

<span>stanza two line one</span>
<span>stanza two line two</span>
<span>stanza two line three</span>
<span>stanza two line four</span>

<span>stanza three line one</span>
<span>stanza three line two</span>
<span>stanza three line three</span>
<span>stanza three line four</span>

... now there is a HTML element between each of the single <br> elements. so those single <br> elements will no longer be affected by the double <br> element CSS rule.

Comments

That fixes it perfectly, thank you!

Answer 2

Can you post your code here?  It's hard to troubleshoot without seeing it.

 

EDIT: quick guess, try putting a

<br />

...after the fourth line of each stanza.  That should insert a line break.

Comments

That added an extra space when testing in Twine, but did nothing in Firefox.

I neglected to add the code before because there isn't any, really, just the text, but here:

Here is some poetry:

stanza one line one
stanza one line two
stanza one line three
stanza one line four

stanza two line one
... etc

 

---

Choose "Edit Story Stylesheet" and paste this in:

.clear {
    clear: both;
}

Then, force line breaks in your passages like so:

Here is some poetry:
<div class="clear"></div>
stanza one line one
stanza one line two
stanza one line three
stanza one line four
<div class="clear"></div>
stanza two line one
stanza two line two
stanza two line three
stanza two line four
<div class="clear"></div>
stanza three line one
stanza three line two
stanza three line three
stanza three line four

That worked for me in Firefox & Chrome.

---

There's still a bit more space between individual lines than I'd like, but I think that may always have been the case and I never noticed until I had an example this extreme. At any rate, this fixes the stanzas, so I'm willing to accept it. Thank you so much!