Are there any conventions in place for dealing with dynamic whitespace?

Question

Hi! I'm working on my first Twine game, porting a text adventure game that I made for class in C++ (that I'm quite proud of) into a format that I can share online.

I want my game to look really good, and I'm having some issues with whitespace. The key issue is this: Some pages will have options like "inspect the bed" or "inspect the table", and then they are clicked, an extra blurb is added to the page somewhere.  I am able to program this just fine, but having the page look consistently formatted is proving to be a real issue. It particularly is an issue on pages where I have more than one of these pop-ups. Are there conventions in the Twine community for dealing with this that I should be aware of? Is there sample Harlowe code somewhere that can show me how to gracefully deal with this?

Like I said, I have the game fully programmed with randomized quizzes and a functioning inventory and a clock system and the whole lot. It's just making everything look nice and consistently spaced out that's giving me troubles. I'd be willing to post a working copy of my game somewhere or even an example passage to show what's going wrong if that helps.

Answer 1

An example would be good, I've a feeling this is a CSS issue rather than a <<nobr>> issue.

Comments

Sure! Here's a sample passage. I've written this out several ways using (hidden:) macros, but what's shown here is only my latest attempt. Whenever any text appears, I'm intending for it to be surrounded by exactly one blank line on top and bottom. Depending on whether you inspect the painting or the table first, it will crunch text together without a blank line in between or it will leave an area with extra blank lines. I feel like if I was able to see someone else's code tackling this same problem, I'd be able to figure it out, but I don't know where to find that. I'm not married to these text snippets appearing above or below the options, and I'm not even married to it always being spaced out exactly how I want it to be, I'm just curious what other people have found to work.

|text>[You enter into a grand dining room. The table is set with fine crystal glasses and corroded silver plates and silverware. A thick layer of dust covers everything. An eerie painting is displayed prominently on the wall.

](link: "Look at the painting")[(append:?text)[The painting, 7 feet across, depicts a man, woman, and baby. The man is holding the baby. The woman wears a $qDress dress and looks displeased.
]]
(link: "Look at the table")[(append:?text)[(if: $takenGarlic is false)[On the table you find an old, rotten clove of garlic. You take it with you.(set: $takenGarlic to true)(set: $hasGarlic to true)
](else:)[A thick layer of dust covers the tarnished sterling dinnerware.
]]]
[[Back to the foyer|Foyer]]
(display: "Inventory")

However this bedroom with just one interactive element works exactly as intended.

|text>[In the master bedroom stands a massive four-poster bed.

](link: "Inspect the bed")[(append:?text)[The bed is unmade, covered in decades of dust. Blood splatters from the white sheets to the $qWood headboard.
]]
[[Back to the foyer|Foyer]]
(display: "Inventory")

 

---

Here's your fix: 

|text>[You enter into a grand dining room. The table is set with fine crystal glasses and corroded silver plates and silverware. A thick layer of dust covers everything. An eerie painting is displayed prominently on the wall.

\](link: "Look at the painting")[(append:?text)[<br>The painting, 7 feet across, depicts a man, woman, and baby. The man is holding the baby. The woman wears a $qDress dress and looks displeased.]]
(link: "Look at the table")[(append:?text)[(if: $takenGarlic is false)[<br>On the table you find an old, rotten clove of garlic. You take it with you.(set: $takenGarlic to true)(set: $hasGarlic to true)](else:)[<br>A thick layer of dust covers the tarnished sterling dinnerware.]]]\

[[Back to the foyer|Foyer]]
(display: "Inventory")

As shown in the Harlowe documentation for Twine 2, putting text between \  and \ collapses the white space, so then there won't be any spaces there, and adding in <br> to the beginning of the appending text sections will make them start on a new line. You can add in more <br>  where you want more lines.