Need help with aligning text to the right

Authoring Twine
, ,
1

So I need help with aligning text to the right side, I’ve tried everything but nothing seems to work. I have an equivalent of what a text message would look like but I want the player’s text bubble to be on the right side instead of the left. Could someone help me with this?
Edit: Story format I’m using is Sugarcube 2.30.0

2

You can either create a div for your text if you want to do it in just a few places:

<div style="text-align: right">Insert your text here</div>

If you want to reuse it for a text bubble, the best way to do this is to create a widget in your StoryInit passage

<<widget "bubble">><div style="text-align: right"><<print $args[1]>></div> <</widget>>

Then you can re-use it like this

<<bubble "Insert your text here">>

3

Widget’s should be defined within a Passage that has been assigned the widget special Passage Tag. and as explained in warning 2 of the Special Names section…

…so that Passage should NOT be the StoryInit special Passage.

1 Like
4

Sorry for the late reply! I tried using a widget as you suggested and it either didn’t work out like I hoped it would or an error would occur and the passage with the “text messages” suddenly wouldn’t exist.

Below is a shitty picture I took with my phone.

IMG_20210823_191136807
IMG_20210823_1911368071920×2560 876 KB

So, when the widget was working, it would replace the text I had with a small circle instead. And an error would pop up when it wasn’t working. Is there anything else I could do?

5

You probably tried it, but I feel I have to point to the obvious: have you tried to create a style?

Stylesheet:

.right {text-align: right;}

Passage:

<div class="right">Oh</div>
6

I tried it again and, sure enough, it still didn’t work. Do you have any other ideas?

Edit: This is the code I have in my stylesheet:

div.Yan {
color: White;
background-color: HotPink;
box-shadow: 5px 5px 3px #888888;
padding: 8px 8px 8px 8px;
border: transparent;
border-radius: 2.5em;
text-align: right;
position: absolute;
}

I tried messing around with the position and, while the text was on the right side, the padding and border would stay the same. I wanted the length of the padding and border to change depending on how long a certain text is, which position: absolute; does but the text would stay on the left side. Is there any way for me to have the text message bubble I created be on the right side while the padding still fits around the text? Sorry if this was confusing to read. If anyone knows how I can achieve this, please let me know.

7

Instead of

text-align: right;

try

right: 0px;

By doing this you will align the div rather than the text itself. You will need the position: absolute part, which you already have.

1 Like
8

It was this simple the whole time? Anyways, this works perfectly! Thank you so much :slight_smile:

9

For sure. Also for future reference, if you want to center one of the text boxes, you will want to combine it with translate like so

position: absolute;
left: 50%;
transform: translate(-50%,0);