Help with space in visual layout

Authoring Twine
,
1

Twine Version: 2.8.1
[story format Harlowe, as far as I can tell!]

Hi all,
I am afraid I need some help.

I have written and laid out a text using a LaTeX editor. This gives me an HTML code that Twine does not seem to comprehend.

For example, this composition

Screenshot 2024-01-16 at 17.07.10
Screenshot 2024-01-16 at 17.07.10888×380 8.02 KB

is the result of the code

\hspace{30mm}(let it\vfill
\hspace{10mm}swing \vfill
\hspace{80mm}you\vfill
\hspace{50mm}gently.)\vfill

(I am a beginner in all of these, so bear with me if the above is not quite right).

I am trying to make the text more interactive by pouring it into Twine, and so far, so good, but I am missing ways to control the creation of space on the screen, like in the screenshot above.

I have figured out I can mess around with columns and whatnot, but this will not solve the myriad of compositions I’d like to transfer.

Would you have any tips?
Thanks so very much!

1 Like
2

To get this, you can use HTML/CSS

<span style="margin-left:1em">30mm}(let it</span>
swing
<span style="text-align: right">you</span>
<span style="margin-left:2em">50mm}gently.)</span>

(adjust as needed, could be div instead of span)

Or use the Harlowe alignment markup:
https://twine2.neocities.org/#markup_aligner

There are also a bunch of general styling option starting from this paragraph:
https://twine2.neocities.org/#macro_align

1 Like
3

If I understand your problem right — absolute positioning — this is a hard problem to solve in HTML. Depending on the context and, although it’s text handling is a little on the primitive side, I might suggest doing this with nested SVG instead. For example.

1 Like
4

thanks so much for this, I have tried it out and I can see the 30mm and the 50mm on the visible text, but I will see how to mess with it.
Fabulous leads - thank you!

2 Likes
5

Thank you!
Even finding the right forum threads has been hard, because I am not sure what to call what I need, so this is great to have.
Thanks so much!

1 Like
6

You might be interested in The Twine Grimoire, a series of tutorials on customising Twine with HTML and CSS, by Grim Baccaris, one of the preeminent Twine authors in the use of multimedia (and a fantastic writer too).

1 Like
7

oh my bad I didn’t remove all the relevant text when editing the code :joy:

<span style="margin-left:1em">(let it</span>
swing
<span style="text-align: right">you</span>
<span style="margin-left:2em">gently.)</span>

here you go

1 Like
8

There are layout tools in CSS specifically for this sort of application. In this case I think you’d want to make a CSS grid and then just place the text on it.

My number one reference for Grid is always this: A Complete Guide to CSS Grid | CSS-Tricks - CSS-Tricks

In this case, you probably want 8 columns of equal width, and 4 rows of equal height to put your text in.

CSS

.grid_area {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(4, 2em);
    align-items: center;
}

PASSAGE

<div class="grid_area">
    <div style="grid-area: 1 / 3">(let it</div>
    <div style="grid-area: 2 / 1">swing</div>
    <div style="grid-area: 3 / 8">you</div>
    <div style="grid-area: 4 / 5">gently.)</div>
</div>

Which produces

image
image2128×506 7.36 KB

You can adjust the vertical spacing by changing the 2em in the grid-template-rows line.

9

Thank you, definitely checking this out!

10

thanks again!

11

thank you, I did not even know I could do grids!
That’ll definitely come handy - thank you!

1 Like
12

Thanks for posting this - great to get some good tips/ideas on this topic :grinning:

1 Like