Sugarcube 2.0 - Spacing and paragraphs

[Nobody Cares]

In my never ending endevour to improve the readability of my game, I'm would like to increase the spacing between paragraphs, something that on docs or word would be super easy, barely an inconvenience. Can I also do that in sugarcube? How?

 

[Alcahest]

You can use regular html for that. If you just want a normal paragraph, then wrap the text section in <p> and </p>

 

[Nobody Cares]

Is there a way to apply it to the all passages? Forgive what is probably a dumb question, I'm a noob.

 

[guest1492]

SugarCube's default behavior is to add a <br> element whenever you have a line break in your code. Unfortunately, you cannot style <br> elements. As stated earlier, you can wrap your text in <p></p> tags, which will allow styling.

If you set Config.cleanupWikifierOutput = true; in your JavaScript, then SugarCube will attempt to wrap your text in <p></p> tags instead of using <br>. However, I've never tried using this setting.

I prefer to manually wrap text inside <p></p> tags, in which case I first need to disable the behavior of adding <br> everywhere. You can change the configuration settings by adding Config.passages.nobr = true; to your JavaScript. You can also add the nobr tag to the relevant passages' tags. If you want to only prevent the engine adding <br> to a section of your passage, you can use the

You must be registered to see the links

.

The effects of using the nobr config setting, passage tag, or macro is that the engine will replace line breaks in your code with a space instead of <br>. (Consecutive spaces are only displayed as a single space.)

 

[Nobody Cares]

SugarCube's default behavior is to add a <br> element whenever you have a line break in your code. Unfortunately, you cannot style <br> elements. As stated earlier, you can wrap your text in <p></p> tags, which will allow styling.

If you set Config.cleanupWikifierOutput = true; in your JavaScript, then SugarCube will attempt to wrap your text in <p></p> tags instead of using <br>. However, I've never tried using this setting.

I prefer to manually wrap text inside <p></p> tags, in which case I first need to disable the behavior of adding <br> everywhere. You can change the configuration settings by adding Config.passages.nobr = true; to your JavaScript. You can also add the nobr tag to the relevant passages' tags. If you want to only prevent the engine adding <br> to a section of your passage, you can use the

You must be registered to see the links

.

The effects of using the nobr config setting, passage tag, or macro is that the engine will replace line breaks in your code with a space instead of <br>. (Consecutive spaces are only displayed as a single space.)

Awesome. I'll give this a try and see how it looks. Thanks

 

[osanaiko]

Because Twine is essentially a HTML game creator, the output can be styled using CSS.

It may not have been clear from the above and you might not know this is you have never done web development before, but the <br> and <p> tags are HTML elements.

Browsers display HTML elements using their built in rules for layout and spacing, unless you override these rules. The way to override is to use CSS rules. It is possible to do this "inline" as part of the sugarcube code, like this <p style="margin-top: 20px;">...content...</p>. But this is not "scalable" because you need to include the style information every time you add a <p> tag.

You can setup CSS rules that affect all occurrences of a tag (or class etc), and these live in CSS stylesheets that are associated with the game. You can add your own CSS rules to the stylesheet file that override the browser and twine defaults, and for example, make it so every <p></p> everywhere has more space after or before it.

 

[Nobody Cares]

Because Twine is essentially a HTML game creator, the output can be styled using CSS.

It may not have been clear from the above and you might not know this is you have never done web development before, but the <br> and <p> tags are HTML elements.

Browsers display HTML elements using their built in rules for layout and spacing, unless you override these rules. The way to override is to use CSS rules. It is possible to do this "inline" as part of the sugarcube code, like this <p style="margin-top: 20px;">...content...</p>. But this is not "scalable" because you need to include the style information every time you add a <p> tag.

You can setup CSS rules that affect all occurrences of a tag (or class etc), and these live in CSS stylesheets that are associated with the game. You can add your own CSS rules to the stylesheet file that override the browser and twine defaults, and for example, make it so every <p></p> everywhere has more space after or before it.

Thank you for the explenation, I believe I get it now. Writing in this forum makes me feel like a third grader at MIT .

 

[osanaiko]

Thank you for the explenation, I believe I get it now. Writing in this forum makes me feel like a third grader at MIT .

No problem. Most of us are kinda friendly. And the way to learn is to read, experiment, and ask for help when stuck. It's a true fool who gives up without asking.

 

[guest1492]

I just recalled this thread from last year which may help. HiEv explains how Config.cleanupWikifierOutput = true; works which is helpful since the documentation is lacking.