HTML Twine 2/Sugarcube: Aligning Text to an Image Inside a Dialog Box

DrFog · Feb 20, 2019

I've fiddled around with this for about 3 hours trying everything I could think of, but I still can't get the text to align properly. Any advice would be greatly appreciated, because otherwise, I'll probably just have to scrap the whole dialog box idea entirely.

This is the macro I'm using in javascript:

Macro.add('dialog', {
tags : null,
handler : function () {

var content = this.payload[0].contents;

if (this.args.length > 1) {
var title = this.args[0];
this.args.deleteAt(0);
this.args.push('macro-' + this.name);
var classNames = this.args.join(' ');
} else if (this.args.length === 1) {
var title = this.args[0];
var classNames = 'macro-' + this.name;
} else {
var title = '';
var classNames = 'macro-' + this.name;
}

Dialog.setup(title, classNames);
Dialog.wiki(content);
Dialog.open();

}

});

// <<popup>> macro
Macro.add('popup', {
handler : function () {

if (this.args.length > 2) {
var passageName = this.args[0];
var title = this.args[1];
this.args.deleteAt(0, 1);
this.args.push('macro-' + this.name);
var classNames = this.args.join(' ');
} else if (this.args.length === 2) {
var passageName = this.args[0];
var title = this.args[1];
var classNames = 'macro-' + this.name;
} else if (this.args.length === 1) {
var passageName = this.args[0];
var title = '';
var classNames = 'macro-' + this.name;
} else {
return this.error('need at least one argument; the passage to display');
}

Dialog.setup(title, classNames);
Dialog.wiki(Story.get(passageName).processText());
Dialog.open();

}

});

This is my CSS:

div.dialog
{
border-style: solid;
border-width: 3px;
border-radius: 1em;
padding: 10px;
}

#trans
{
color: fuchsia;
font-weight: bold;
}

This is what the passage looks like:
<div class="dialog">[img[images/friends_mom/id.jpg]]<span id="trans">"Oh, hey $name, I didn't know you were coming over today. $gf and $bf are upstairs listening to some new album they got yesterday."</span></div>

This is what it looks like when playing it:

All I'm trying to do is move the text up a bit so that it's either aligned in the middle or the top of the image. Does anyone know what the hell I'm doing wrong?

Epadder · Feb 21, 2019

I can't understand the macro completely, but you need to '

You must be registered to see the links

' the image so that the text wraps around the image.

If I remember my CSS correctly (And I probably don't exactly

) it would be something like...

CSS:

div.dialog.img{
    float:left;
}

DrFog · Feb 21, 2019

Epadder said:
I can't understand the macro completely, but you need to '
You must be registered to see the links
' the image so that the text wraps around the image.

If I remember my CSS correctly (And I probably don't exactly ) it would be something like...

CSS:

div.dialog.img{ float:left; }

Thanks for the reply. I tried that already, and it almost solves the problem. Here's what it looks like with that in place:

DrFog · Feb 21, 2019

Wow, never mind, I'm an idiot. All I had to do was fucking add <p> tags and then add a margin-left in CSS. /facepalm

sinichi1998 · Dec 22, 2020

hey i used your code and this is the result . how did i make it look like yours.
n i have a no idea how code works . can u help me please .?
thank you

stevejackhammer · Dec 13, 2021

Old post, but I'm going to chime in that what you might want to do is switch the display mode to "flex". Within a flex div, you have access to styling attributes that make this sort of alignment extremely easy. It's why flex was created.

Here's a quick example:

<html>
<head></head>
<body>
<div style="border: 1px solid black; width: 25rem; display: flex; flex-direction: row; align-items: center;">
<div style="border: 1px solid black; margin: 4px; flex-grow: 2;">
<div>I'm a picture</div>
<div>I'm a picture</div>
<div>I'm a picture</div>
<div>I'm a picture</div>
<div>I'm a picture</div>
<div>I'm a picture</div>
<div>I'm a picture</div>
<div>I'm a picture</div>
</div>
<div style="border: 1px solid black; margin: 4px; flex-grow: 5;">
<p>I'm dialog</p><p>And I'm vertical centered beside the picture</p>
</div>
</div>
</body>
</html>

HTML Twine 2/Sugarcube: Aligning Text to an Image Inside a Dialog Box

DrFog

Active Member

Epadder

Programmer

DrFog

Active Member

DrFog

Active Member

sinichi1998

Member

stevejackhammer

Newbie