How does this look to you?

I want to include images in a game so that I can have conversations between people in which the character’s portrait is shown next to their lines. In the final version, there would be different portraits for different states and alt text for people who can’t see pictures. I got the images working fine and found a way to format the page the way I wanted. But it occurs to me that maybe people have different fonts and resolutions and it might not display right for everybody, so before I invest too much work, could a few people check out the link and tell me how this test game is displaying for you? The intended layout is a line of heads down the left side of the page with a line of dialogue just to the right of each one.

Is that what you see? Please let me know!

Separating them with line breaks is asking for trouble. Instead put each portrait and its lines in a paragraph tag, and give the paragraph a class that sets the “clear: both” style.

I can’t speak to the import of Dannii’s advice, but I can say that it looked like you said it would, and stayed that way through vigorous window resizing on a desktop Mac in Chrome.


I’ll attach a pic showing how it is if you zoom in or out (Chrome 49 Win desktop). Using my suggestion will fix it.

Thanks for your help! Is there a place with more complete instructions for Choicescript than the ‘make your own games’ section of the site? I’ve just been using that, and I didn’t see paragraphs/classes/styles mentioned, so I’m not sure what the code for those is.

It looks like you’ve already made some modifications to the style.css file, which is where changes like this can be applied. Changing style.css isn’t really supported by Choice of Games/Hosted Games, and thus it isn’t documented in any detail, but dedicated folks like yourself have been known to change it for games published to dashingdon.

I think in your case, the easiest fix is to add “clear: both;” to the “.alignleft” rule in style.css.

(ChoiceScript doesn’t use paragraph tags, just text and
tags. Fixing that would require more invasive changes than I think you’d prefer.)

Actually, all I did was this:

[code]*image head_image.jpg left
This is US President Calvin Coolidge.

*image head_image.jpg left
This is a test to see how this comes out looking on various peoples’ computers.

…and so on. I didn’t do anything to the .css file, but I went and made the change now since you suggested it.
It ended up looking like this:

.alignleft { display: inline; float: left; margin-right: 1.625em; margin-bottom: 1em; clear: both; }

…but after I took out the line breaks, things weren’t properly aligned. Did I put it in the wrong place?

I don’t think clear will work on inline elements. I’m not sure the best way to go about it then. Can you move the dialogue above the portrait and give it the clear style?

I probably could (I don’t know ANYTHING about styles and stuff though beyond straight-up copying what people are telling me to use, so I don’t totally know what “clear style” is; is that the ‘clear: both’ thing?) but it really needs to be next to the portrait for what I want to do. Hopefully a few more people will see this and let me know if it works for them! If it’s okay for most people then I’m probably okay with putting a notice on it that a few browsers or whatever don’t work. If it’s broken for most people then I won’t pursue it.

I might be explaining it badly, but what I want is a way to write the code so:

  1. all images are on the side of the screen (either left or right) and
  2. the text associated with an image always displays next to that image.

The idea is to write dialogue where you can see the characters’ expressions as they’re talking, a little like the portraits in a text box in an RPG.

Lynnea Glasser wrote an excellent ChoiceScript Interactive Tutorial in Twine;

There is also a community-created IDE which is has an impending update soon. It helped me learn a lot by simplifying the compile process so I could focus on the language in an environment where the author can see results of code changes instantly.

Works for me with both resizing and zooming! Firefox 45.0.1, OS X 10.11.4.

Yeah, I love that thing! It makes a single file that actually works just as it is instead of having a billion little things in a folder. It’s so helpful for sending the game to people, which I’m definitely going to have to do with this one because I won’t be able to host it on dashingdon (since you can only put up 20 images max there).

The only issue is that there’s no way to put the pictures in the file, so I still do have to make a folder and put them in seperately. It’s not a critical problem, but I do hate the thought of people seeing all the images ahead of time instead of encountering them organically in the game.