HTML [Twine 2.0/SugarCube/Tweego] Formatting Story Text - Justify and Indention Automatically

[Heroine Hunter X]

So, I've been exploring Twine 2.0/Tweego for a bit. Ran into an interesting challenge (to me lol). I did some lazy typing of a scene just so I had something to work with. It's not great at all, I did not try and it's also not the focus of my question.

I'd like to simplify styling my story text without the need to break every paragraph down into a <P> tag manually. I once wrote an application to take text files and do this for me, and might write another if there are no other options. However, manually adding <p> tags over the length of a story would be incredibly tedious, not to mention obnoxious for editing. So I'm seeking solutions and wisdom before I do something overly complicated (something I do often lol).

Here are my objectives:

• have justified text like a novel would.
• have indention of paragraphs.

Here is my current CSS:

.story-text {
  text-align: justify;
  padding: 0;
  margin: 0;
}

.story-text p {
  text-indent: 30px;
  padding: 0;
  margin: 0;
}

Here was my original attempt which produced unexpected results. First, Twine (maybe Tweego's compiler?) added <br> tags after every return. No idea why, but made the whole thing look ridiculous which is why I added the [nobr] tag to the passage. Not sure why it would add them, but this did correct that odd spacing. However, the text-align: justify; did nothing. I figured that's probably an HTML thing or my spotty CSS. Not sure which.

This is what the results looked like:

Here is the code:

Spoiler: Code

You don't have permission to view the spoiler content. Log in or register now.

Activating [nobr] did what you'd expect. Which lead me to my next solution.

So, I went in and added <p> tags manually, updated the CSS to include indent on them and it produced the following, much cleaner version.

Here is the code that got me there:

Spoiler: Code

You don't have permission to view the spoiler content. Log in or register now.

So, I technically have a solution but it's a tedious one. Looking for advice or insight as to how some other's would approach this task before I start making side applications to format it for me. lol

Thanks for responses in advance!

 

[guest1492]

I believe the justify wasn't working earlier because you're using it on a span element. Span elements are only as wide as what it contains, so its contents inherently can't be justified. It worked when you added paragraph tags because paragraphs are block elements (display: block). The paragraph elements inherit the text alignment from the parent element (span) so their contents are justified.

Automatically turning line breaks into <br> tags are a feature of SugarCube. You can disable it by using the <<nobr>> macro as you found out. You can also disable it entirely in your game by changing

You must be registered to see the links

.

I'm not an expert, but I believe that writing a side application (or something similar) to add paragraph tags is the best solution. You can also look into using

You must be registered to see the links

to do it with Twine/SugarCube. Just capture everything inside elements with class "story-text", insert "<p>" after the opening tag and "</p>" before the closing tag, then replace all the line breaks in between with "</p><p>".

You can also try and create your own macro. This is just something I came up with so I don't know if it'll work:

Spoiler

You don't have permission to view the spoiler content. Log in or register now.

 

[Heroine Hunter X]

I believe the justify wasn't working earlier because you're using it on a span element. Span elements are only as wide as what it contains, so its contents inherently can't be justified. It worked when you added paragraph tags because paragraphs are block elements (display: block). The paragraph elements inherit the text alignment from the parent element (span) so their contents are justified.

I believe you're correct, also! Not even sure why I chose a span over a div. lol

I'm not an expert, but I believe that writing a side application (or something similar) to add paragraph tags is the best solution. You can also look into using

You must be registered to see the links

to do it with Twine/SugarCube. Just capture everything inside elements with class "story-text", insert "<p>" after the opening tag and "</p>" before the closing tag, then replace all the line breaks in between with "</p><p>".

I'm going to try this. That makes a lot of sense and would save me a whole lot of time. Thanks for the tip!

Automatically turning line breaks into <br> tags are a feature of SugarCube. You can disable it by using the <<nobr>> macro as you found out. You can also disable it entirely in your game by changing

You must be registered to see the links

.

It would be nice to just turn off the insertion of <br>. I get retaining an empty line, but my text had no blank rows and SugarCube still threw them in. It was odd behavior.

 

[guest1492]

I edited my previous post with a custom macro, which might be an even better solution.

 

[HiEv]

I'd like to simplify styling my story text without the need to break every paragraph down into a <P> tag manually. I once wrote an application to take text files and do this for me, and might write another if there are no other options. However, manually adding <p> tags over the length of a story would be incredibly tedious, not to mention obnoxious for editing. So I'm seeking solutions and wisdom before I do something overly complicated (something I do often lol).

FYI - Setting Config.cleanupWikifierOutput = true; in your game's JavaScript section should do that for you automatically (see the

You must be registered to see the links

).

It's not perfect, but it should work the vast majority of the time.

This is why I often recommend skimming through all of the SugarCube documentation every once in a while, just so you know what all is possible. You can go back later on and look up the specific details as needed, but already knowing what options are available helps. (Heck,

You must be registered to see the links

, so there's some new stuff in the documentation now.)

Hope that helps!

 

[Heroine Hunter X]

You can also try and create your own macro. This is just something I came up with so I don't know if it'll work:

Spoiler

You don't have permission to view the spoiler content. Log in or register now.

This worked great, thank you! I need to understand how the Macro API works, better. I read through the brief example they provided and it wasn't all that apparent to me. I'm sure it assumes knowledge of some other aspect of JavaScript.

 

[Heroine Hunter X]

FYI - Setting Config.cleanupWikifierOutput = true; in your game's JavaScript section should do that for you automatically (see the

You must be registered to see the links

).

It's not perfect, but it should work the vast majority of the time.

I tried this and it did work, however it took the entire text and put it into one paragraph. Not entirely sure how it's parsing, but don't think it's looking for returns. Might be looking for blank rows since it states it uses <br> to start a new paragraph. I did remove my [nobr] tag as well. This is where a little more info in the documentation would go a long way, imo.

This is why I often recommend skimming through all of the SugarCube documentation every once in a while, just so you know what all is possible. You can go back later on and look up the specific details as needed, but already knowing what options are available helps. (Heck,

You must be registered to see the links

, so there's some new stuff in the documentation now.)

Hope that helps!

I completely agree and I should review the documentation further. I get excited and want to start creating then wander off when I read. Of course, I'm sure a certain part of learning is trying the new things your read about.

 

[HiEv]

I tried this and it did work, however it took the entire text and put it into one paragraph. Not entirely sure how it's parsing, but don't think it's looking for returns. Might be looking for blank rows since it states it uses <br> to start a new paragraph. I did remove my [nobr] tag as well. This is where a little more info in the documentation would go a long way, imo.

For the "cleanup" code to work, you can't be using "nobr" on your text and your text has to be written with blank lines in-between your paragraphs. Something like:

Paragraph one. Blah, blah, blah, blah, blah, blah, blah, blah, blah,
blah, blah, blah, blah, blah, blah, blah, blah, blah.

Paragraph two. Blah, blah, blah, etc...

If you don't put the blank line between paragraphs, then the "cleanup" code treats them as a single "paragraph", even if there's a line break. (Note: The line break in the middle of the first paragraph above is just for illustration, because "code blocks" don't normally do line wrapping, and I wanted to be clear that there is a blank line between the two paragraphs.)

Hopefully that makes sense now.