Formatting links to all be on one line

Authoring Twine
1

Twine Version: 2.3.14
Story Format: 3.2.2

Not sure if this is actually difficult to do or I’m having a miniature brain wrinkle, but I can’t seem to wrap my head around it.

Essentially, I want to have a series of standard Twine/harlowe links (either (goto:) or the usual [[a->b]]) all formatted onto one line, with some spacing in between. Like, for example, being able to have a link aligned to the left that says “Go Left” and a link aligned to the right that says “Go Right” without them having to be on different lines.

Is this doable, and what wizardy do I have to accomplish to do it? Any input is appreciated.

2

Twine uses the <br> (“break”) element to lay out passages. So if you put all the links on one line, they should be all on one line, unless your window is too narrow.

You can always use the “collapse whitespace” markup – that’s enclosing the stuff you want kept together in curly brackets:

This is a separate line.
{
This will
all be
one line.
}

This will be a separate line with space above it.

will all be displayed on one line when the game is played. Unless, as I said, word-wrap kicks in.

BTW, the curly brackets don’t have to be on separate lines.

3

Thanks for the response!

I do understand that I can put the links on one line like that, but if I try to use the (align:) macro to force one link to the left and the other to the right and even one to the middle, it doesn’t actually align that second link to the right and instead just puts it alongside the first one. I don’t want to have to shove a bunch of spaces in between, because of word wrap.

Is there a way that I can force those links to align properly whilst all remaining on one line?

4

Oh I see. Yeah, the {} markup collapses all multiple whitespace characters down to one, so it would do that.

I think you might have to use css for this. The docs have a link to a project “styling with enchantments” (dl link) that might point you in the right direction, but otherwise I’m afraid you’ll have to wait until someone with better Twine-fu than me answers.

Good luck with your project, anyway!

5

For just left and right, you can use the “float” property, simply putting this into your passage:

<div style="float: left">[[Link on the left]]</div><div style="float: right">[[Link on the right]]</div>

If you want a greater number of links with equal spacing inbetween, you can put something like this in your story CSS:

#tab { display:inline-block; 
       margin-left: 120px; }

and then wrap your links accordingly:

<span id = "tab">[[First link]]</span><span id = "tab">[[Second link]]</span><span id = "tab">[[Third link]]</span>

(this will still add a linebreak if the line gets too long).

Hope that helps!

6

Thanks so much for the reply! The span stuff worked out great, I just think it’ll take some tweaking for the most part to get it to the sweet spot I’m after. Thanks for the help!

1 Like
7

Sure, just tweak the values to whatever suits your story! Also, if you want the first link aligned with the left margin, don’t put the span around it - I’ve just realised I unnecessarily did that in my example, shifting that link to the right.

8

This code is technically invalid because the ID property of each HTML element on the page is meant to be unique, and you have three elements on the page with the same ID.

If you want to apply the same CSS rule to multiple elements on the page then you would use a CSS class instead.
eg. Change the CSS selector to…

.tab {
    display:inline-block;
    margin-left: 120px;
}

…and then apply the CSS class to the Passage code like so…

<span class="tab">[[First link]]</span><span class="tab">[[Second link]]</span><span class="tab">[[Third link]]</span>
1 Like