How to display different texts in different places in a single passage ?

Question

I'm using Harlowe 2.1.0, and I think I've resumed everything in the title.

I know this may sound very basic, but I'm totally new to Twine and the coding universe in general, yet I've learned tons of things recently, and still learning. I've been searching for hours, and I've found nothing about it (maybe because it's too way simple). So I would like to know what is the way/command to do it ?

Like, how do I put a first text in the top left corner, another one in the middle, and the last in the bottom right corner ? I have already tried to do it with the HTML (=|, |=, |==|) but it doesn't work that good, and same with the CSS commands "text-align: center;" etc. Do I have to do padding, or something like that ?

Answer 1

You can put something like this into your css stylesheet:

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.topleft {
  position: fixed;
  top: 0em;
  left: 0em;
}

.bottomright {
  position: fixed;
  bottom: 0em;
  right: 0em;
}

Then use it in your passage like this:

<div class="topleft">This text is at the top left.</div>
<div class="bottomright">This text is at the bottom right.</div>
<div class="centered">This text is centered.</div>

Should work in both harlowe and sugarcube.

Comments

Thank you so much !