Need help with formatting on display, i.e. removing newline in Twine 2.2.1, SugarCube 2.21.0

Question

Disclaimer: I'm not a professional coder, neither have the sufficient experience to call myself a coding beginner, so looking at the syntax and syntax formatting below may induce high levels of cringe.

Hi there,

I'm Adrijan, and I've recently started using Twine for creative expression (don't judge). ;)

However, I got hung up on the most basic of things: formatting the story and removing newlines (empty spaces) so that everything looks neat on display.

For example, the command '<<nobr>>' works, but only when "wrapped" around a fully executable code.

Ex.1 Input:

<<nobr>>
	<<if $buttonCPU gt 0>>
  		<<else>>
    		<<set $buttonCPU = 0>>
  	<</if>>
<</nobr>>
	Large chunk of Cyrillic text. 

	[[Оди на Запад|Запад]]

Ex.1 Output:

https://imgur.com/a/3QfrNu7

In Ex.1, everything works as intended (but it still includes one whiteline on story display. Ideal would be for each passage to start without any nevessary whitespaces). However, in the next one:

Ex.2 Input:

<<nobr>>
<<if ndef $CPU>>
	<<if $lightStatus eq true>>
  		Large chunk of Cyrillic text.
	
		[[Притисни го копчето|Компјутер]]
		[[Врати се назад|Премин]]
  			<<else>>
  				Cyrillic sentence.
	
				[[Оди на Север|Север]]
				[[Оди на Исток|Исток]]
				[[Оди на Запад|Запад]]
				[[Врати се назад|Премин]]
  	<</if>>
		<<else>>
  			<<goto "Компјутер">>
<</if>>
<</nobr>>

Ex.2 Output:

https://imgur.com/a/sKTKIe3

The code puts everything in a single line, including the links to passages, but it doesn't feature that illusive whitespace at the beginning of the passage.

What I want to achieve: No whitespaces whatsoever at each new passage, but with proper formatting down the line, or:

1) Each link to another passage should exist in a single row on story display: https://imgur.com/a/Y7ZCOTI

2) Each text paragraph should be clearly differentiated by a single row on story display as well: https://imgur.com/a/iTSZ2Bz

3) Basically, my ideal passage will be formatted as follows on story display: https://imgur.com/a/qcAww1p

... but without additional empty spaces at the beginning of each new passage!

Note: using the terms 'empty space', 'whitespace', and 'newline' as synonyms throghout this thread. Also, text in code is in Cyrillic.

Thanks,

Adrijan

Answer 1

When using the Twine 2.x application to develop a SugarCube 2 based project I suggest using either the Play or Publish to File option to check it's visual layout, because SugarCube's DEBUG view automatically injects extra HTML elements into generated output which are likely to disrupt the layout.

eg. The Test option is causing the first line in your "Ex.1 Output" example.

There are a number of ways to control the structural layout of the generated HTML elements, which you use depends on situation.

A. You can use one of the nobr releated features (the Config.passages.nobr setting; the nobr passage tag; or the <<nobr>> macro.) to suppress the automatically added HTML <br> elements.

This method would generally be combined with the manual inserting of HTML elements to generate the layout you want.

B. You can use Line Continuation markup to supress individual <br> elements.

This method can also be used to remove the leading white-space that results from the indentation of your code within a Passage.

C. You can use the <<silently>> macro to suppress all visual output of logic only sections of code.

D. Some combination of all of the above.

In your specific use-case I use the Config setting to suppress all line-breaks in your project, and then use a combination of Line Continuation markup to remove leading white-space and manual added HTML elements to layout the condenced output. I would also use the <<silently>> macro as needed.

Ex 1. The lazy HTML way, by just adding <br> elements.

<<silently>>
	<<if $someBoolean>>
		<<set $variable to "some value">>
	<<else>>
		<<set $variable to "some other value">>
	<</if>>
<</silently>>

A very long paragraph....
<br><br>
A different very long paragraph....
<br><br>

[[Markup Link 1|Target Passage Name]]<br>
[[Markup Link 2|Target Passage Name]]<br>
[[Markup Link 3|Target Passage Name]]<br>
[[Markup Link 4|Target Passage Name]]

Ex 2. A less lazy HTML way, by adding paragraph <p> elements as well as <br> elements.

<<silently>>
	<<if $someBoolean>>
		<<set $variable to "some value">>
	<<else>>
		<<set $variable to "some other value">>
	<</if>>
<</silently>>

<p>A very long paragraph....</p>
<p>A different very long paragraph....</p>

[[Markup Link 1|Target Passage Name]]<br>
[[Markup Link 1|Target Passage Name]]<br>
[[Markup Link 1|Target Passage Name]]<br>
[[Markup Link 1|Target Passage Name]]

note: CSS can be used to control the sized of the marigns that appear before & after each paragraph.

Ex 3. An even less lazy HTML way, by adding an un-ordered list <ul> element structure as well as the paragraph <p> elements.

<<silently>>
	<<if $someBoolean>>
		<<set $variable to "some value">>
	<<else>>
		<<set $variable to "some other value">>
	<</if>>
<</silently>>

<p>A very long paragraph....</p>
<p>A different very long paragraph....</p>

<ul>
<li>[[Markup Link 1|Target Passage Name]]</li>
<li>[[Markup Link 2|Target Passage Name]]</li>
<li>[[Markup Link 3|Target Passage Name]]</li>
<li>[[Markup Link 4|Target Passage Name]]</li>
</ul>

note: CSS can be used to control sytling of the un-ordered list as well as the sized of the marigns that appear before & after each paragraph.

The following CSS will remove the bullet points and left blank area from the above un-ordered, it needs to be placed within your projects Story Stylesheet area.

.passage ul {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
}

 

Comments

Thanks, excellent answer. Have to check this thoroughly to see which macros/elements will work best within the story. :)

Answer 2

In your first example you just have to put your "Large chunk of Cyrillic text" on the same line as the "<</nobr>>" line, since the linebreak you're seeing is from the linebreak between those two lines.  In other words, do this:

<</nobr>>Large chunk of Cyrillic text.

In your second example, everything is within a <<nobr>> macro, so you'll need to force linebreaks using the <br> HTML element (see here).

Also, instead of putting "<<nobr>>...<</nobr>>" around every passage, you can just add a "nobr" tag to each passage where you need it (see here).

Hope that helps!  :-)

Comments

Excellent asnwer. One more thing tho: could you provide a real-world example on how to apply the nobr tag/config.passage.nobr setting onto all passages at once? (sugarcube documentation offers only syntax without real-world incorporation of code for those two particular examples).

Thanks!