Hello,
I want to format my next Ink game like a radio script:
Is there a way to add tabs to my game so that the dialogue all appears level like in the above picture? Resources I’ve found online explain how to create long gaps which don’t collapse into a single space, but that’s not the same as using tabs to ensure all of the dialogue lines up evenly.
Jason
Yeah…that’s something that’s not well supported in HTML/CSS in general. You probably want a little support from JavaScript in the Ink runner. I need to go run farm deliveries, but I was playing with this recently, and I’ll dig up my code this evening if no-one else gives you a solution sooner…
Sorry, didn’t use version-control on that experiment so it took a bit to untangle the basic layout stuff from the other things I was playing with. Give this a try. I just recognized all-caps plus colon at the beginning of lines as character names, so it would trigger on lines like “I: a Great Man of History…” but if that’s an issue for you I can presumably come up with some kind of work-around.
radio-play.zip (35.9 KB)
Thank you so much Josh! I’m out for the day (at the March of the Mermaids in Brighton) but I’ll have a go tomorrow and let you know how I get on.
Hi Josh, just given this a go! It works nicely until the Ink code comes to the first choice, and it stops and won’t display the choice.
I wonder if this has something to do with the version of Ink? I’m running version 20, and nothing will display at all until I go into the story.ink file and change the version from 20 to 19.
Ah, bother, I didn’t get all the choice handling code, and I forgot to test that. Hang on…
OK, this might actually work. And I upgraded to the newer version, I think? If that happens again, you should be able to replace ink.js with a newer version: I didn’t put any custom code in there.
radio-play.zip (39.9 KB)
This is looking great! Thank you so much!
Makes such a difference when it looks right! 
As it stands you’ll probably see the width pop if you start with a shorter name and then work up to longer ones. So you may want to go in style.css and add something like min-width: 15ex; to the .radio-play .char-name section. An “ex” is supposedly the width of an “x” character so it won’t exactly line up with the average width of capital letters, but you should be able to experiment and find a value that’s big enough for the names that you’re using without being excessive.
Hmm… and the names may not wrap even if they’re very long multi-word affairs. So maybe you want a max-width style property too? Dunno. Edge cases that might need handling…
Thanks for the tip. I’m going with very short names, first names or surnames depending on the character, so it shouldn’t be a problem with this game!
