Icons in choices

Authoring Other Development Systems
1

As I put the finishing touches on the IntroComp entry, I’m running into one minor graphical issue.

There are icons that appear before certain choices, indicating that the choice is only available because of a decision you made at the beginning. Here’s how I’m currently handling that.

=== function icon(src) ===
<img src='icons/{src}.png' style='height: 1.7em;' alt='{src}' /> <>

* {Background == technology} [{icon("technology")} Test how robust their security system is.]

It tells the player this option is only available because they chose to be good at technology.

This is what appears in the web runner:

<a href="#">
    <img src='icons/technology.png' style='height: 1.7em;' alt='technology' />
    Test how robust their security system is.
</a>

In other words, Ink has put a line break between the icon and the text of the choice. This isn’t ideal; some players have commented that it’s not clear which choices are associated with the icon, because it appears above them instead of to the side.

How can I get rid of this line break? I thought the <> in the icon function would take care of it, but it doesn’t.

(Interestingly, the line break doesn’t appear in Inky. Only in the web runner. So this might require modifying the JS/CSS instead of the Ink code.)

1 Like
2

HTML normally collapses whitespace, so I’d suspect something in the stylesheet.

Yeah. Looks like in the default web build from Inky it’s style.css line 133: display: block, which makes it its own block, like a paragraph would be. Hmm… I think I’d probably delete that line and the following margin: 0 auto but leave the max-width? Or you could try changing it to display: inline-block;

3 Likes