Embedded Images without Gaps

Authoring Dialog
1

When embedding images, is there a way to display the images without horizontal and vertical gaps between them?

For a project I have in mind it would be essential to effectively assemble images from multiple smaller images; the combinatorial explosion would otherwise be prohibitive.

I have little experience with CSS, so it’s possible that there is a seemingly obvious solution I have overlooked.

2

I don’t know how CSS applies to Dialog games but in general if you want to remove the padding around an image, you use padding: 0;.

1 Like
3

Thank you, Kawa! Let’s hope someone has uncovered a way to apply this information with the desired result.

4

I have half-solved my problem! Horizontal gaps can be eliminated using (no space).

Unsurprisingly this solution does not eliminate vertical gaps.

1 Like
5

When you look at the web page which is generated when you bundle your game together with the Å-machine JS interpreter, you can use your browser’s developer tools (for example, by pressing F12 in Firefox) to inspect the HTML elements and the CSS styles applied to them.

You can change various values directly in the developer tools to see what they do.

We don’t want any space between images which appear on consecutive lines. With regard to that, one setting which looks promising is “line-height”, which is set to “1.35em”, as we can see in the browser’s developer tools or in Dialog’s default “style.css”.

We can experiment around with this setting. For text, small values will make the lines run into each other, but that doesn’t seem to be the case for images. So, when we just set it to 0, it seems to make the gap disappear.

Of course, we don’t want to set line-height to 0 in the whole game. So we put the setting in a style class and use that for a div where we want to display our images; as described in chapter 5 of the Dialog manual.

The code could look like this, for example:

(define resource #pic1)
    placeholder1small.png

(define resource #pic2)
    placeholder2small.png

(style class @picscontainer)
    line-height: 0;

(program entry point)
    Hello, this is introductory text!
    (line)
    (div @picscontainer) {
        (embed resource #pic1)(no space)(embed resource #pic2)
        (line)
        (embed resource #pic1)(no space)(embed resource #pic2)
    }
    This is some further text below the images.

Output:

dialog_images_no_gap_2

There might be other ways to do this, or hidden pitfalls with this method, but it seems to work AFAICT.

6 Likes
6

OMG! This is amazing!

I can hardly remember everything I tried now, but it looks like I spent some time playing with the margin-top and margin-bottom attributes and getting nowhere fast.

Again, this is wonderful! I cannot thank you enough. You have no idea how much trouble this is going to save me!

1 Like