Interactive Storytelling Summer 2022

Aligning Text on Twine

I was having trouble figuring out how to align text on Twine. After looking at another Sketchblog, I found a classmate having a similar issue.

I did some research and found a forum that helped me so I thought I would share the knowledge here with anyone else who might need it.

I was trying to center some of the lines on a page and keep others on the left-hand side.

This is how I achieved it:

For some reason, when I centred the one line, everything after it was also centred, so I just added another code to realign the stuff after the centred part to the left!

To make it easier, here are the codes so you can paste them into Twine!

<div id=”first-passage”> TEXT
<div>

#first-passage {
text-align: center;
}

<div id=”second-passage”> TEXT
<div>

#second-passage {
text-align: left;
}

Posted

in

by

maliha.chowdhury

If you’ve lost your way in the IFStravaganza, you can always go back to the beginning.

Tags:

,

Comments

2 responses to “Aligning Text on Twine”

  1. kawthar.mahdi Avatar
    kawthar.mahdi

    That’s amazing! I was having trouble figuring it out, so this is really helpful! Thanks for sharing! I just have one question though; so on the stylesheet, you have the lines named “first passage” and “second passage”. Can you name the lines anything? Or does it have to be first/second passage? Also, if you center a line like how you did above, will it center everything else after it? Is that why you’ve aligned the line after to the left?

    1. maliha.chowdhury Avatar
      maliha.chowdhury

      Happy to help! It does not have to be named “first-passage” or “second-passage.” After playing around with it, it seems like you can rename it to whatever you want as long as it’s not a numerical number.

      Also, yes, it does center everything else after it for some reason and that is why I added the code to the following line to bring it back to the left. A little bit tedious but it worked!

Leave a Reply