Text in columns?

Twine Version: 2.3.16
Story Format: 2.36.1

In the character setup for my story, I want the player to choose from a series of different stats: gender, politics, religion, etc and maybe add some more personal ones later like hair colour, eye colour, skin colour etc. I want these stats to be reflected in options the player will have later.

However this results in a long line of text that forces the player to scroll down. I want to avoid scrolling as much as I can, simply because I think it looks ugly and breaks the game immersion for me.

Is there a way that we can create columns, so that the lists can be side by side?

This is my current code (there may be better ways of doing this as well, but this is my first game):

<<textbox "$name" "Enter your first name here" autofocus>><span id="name"></span>
<<textbox "$surname" "Enter your family name here" autofocus>><span id="surname"></span>
<<textbox "$age" "Enter your age here" autofocus>><span id="age"></span>
Gender
<label><<radiobutton "$gender" "male">> <<set $gender to 'male'>>Male</label>
<label><<radiobutton "$gender" "female">> <<set $gender to 'female'>> Female</label> 

Sexuality
<label><<radiobutton "$Orientation" "Hetro">> <<set $Orientation to 0>>Hetro</label> 
<label><<radiobutton "$Orientation" "Bisexual">> <<set $Orientation to 50>> Bisexual</label> 
<label><<radiobutton "$Orientation" "Homosexual">> <<set $Orientation to 100>>Homosexual</label>

Politics
<label><<radiobutton "$politics" "left">> <<set $politics to 'left'>>Left</label>
<label><<radiobutton "$politics" "right">> <<set $politics to 'right'>> Right</label> 
<label><<radiobutton "$politics" "centre">> <<set $politics to 'centre'>>Centre</label>
<label><<radiobutton "$politics" "apolitical">> <<set $politics to 'apolitical'>> Apolitical</label> 

Religion
<label><<radiobutton "$religion" "agnostic">> <<set $religion to 'agnostic'>>Agnostic</label>
<label><<radiobutton "$religion" "atheisist">> <<set $religion to 'atheisist'>> Atheisist</label> 
<label><<radiobutton "$religion" "old gods">> <<set $religion to 'old gods'>>Old Gods</label>
<label><<radiobutton "$religion" "new gods">> <<set $religion to 'new gods'>> New Gods</label> 

<<button "Continue">><<goto "Character Confirmation">><</button>>

Generally, you can put standard HTML and from elsewhere. That said the CSS code sometimes does not work in exactly the same way.

Here’s a way to make 4 columns, adapted from this thread:

In a new stylesheet

* {
  box-sizing: border-box;
}

.column {
  float: left;
  width: 25%;
  padding: 10px;
  height: 300px; 
border: 1px solid white;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

In the passage where you want the columns:


<<nobr>>
<div class="row">
  <div class="column">
    <h2>Column 1</h2>
    <p>Text</p>
  </div>
  <div class="column">
    <h2>Column 2</h2>
    <p>Text</p>
  </div>
  <div class="column">
    <h2>Column 3</h2>
    <p>Text</p>
  </div>
  <div class="column">
    <h2>Column 4</h2>
    <p>Text</p>
  </div>
</div>
<</nobr>>

I’ve left out the code you provided to be concise…it is just a matter of pasting it into the

paragraphs.

1 Like

Thank you once more. You have never failed me.