Changing button shape

Twine Version: 2.5.1
Story Format: Harlowe 3.3.3

Hi there! I’m playing around with Harlowe’s storylet function, and want to make three choices of open storylets appear side by side like cards. I have two main questions.

So far, to get the buttons side by side, I’ve found the closest option is to use the “button:” changer like this:


But the buttons are all appearing on separate lines, rather than collapsing into the same line. I’ve tried adding “break-after: avoid;” and “break-before: avoid;” into the .enchantment-button CSS, but that doesn’t do anything, nor does using \ to escape line breaks. How can I get three buttons on the same line?

EDIT - Solved this, easy fix using column markup!

And then, I’m trying to change the button shape to a vertical rectangle with text on rather than a traditional button shape. I’ve tried using the “padding” function on CSS but it seems to be affecting the space around the button outline rather than the space between the button outline and the text. Any advice on this?

I’ve seen some other advice on how to format buttons but it all seems to be for Sugarcube or much older versions of Twine! Thanks so much :slight_smile:

note: The simplest way to suppress line-breaks being automatically added to a block (multiple lines) of code is to wrap it within Collapsing whitespace mark-up.

While the fact that you are using storylet related links is adding to the complexity of achieving the result you are looking for, it is the default styling of HTML generated by the (button:) macro that is the real issue.

As you didn’t include an example of the three related storylets I’ve had to create my own, the following TWEE Notation is what I used as a test project.

:: Startup [startup]
(set: $first to true, $second to true, $third to true)

:: Start
(button: "X==")[(link-storylet: 1)]
(button: "=X=")[(link-storylet: 2)]
(button: "==X")[(link-storylet: 3)]

:: First
(storylet: when $first)
The first storylet

:: Second
(storylet: when $second)
The second storylet

:: Third
(storylet: when $third)
The third storylet

If you use the Web Developer Tools of your web-browser to inspect the HTML elements generated by the 1st of the “buttons” it will look something like…

<tw-expression type="macro" name="button" return="changer"></tw-expression>
<tw-hook class="enchantment-button" style="margin-left: 0%; width: 33.3333%;">
	<tw-expression type="macro" name="link-storylet" return="command">
		<tw-link tabindex="0" data-raw="">First</tw-link>

…and the default CSS being applied to the <tw-hook> element (which represents the “button” itself) looks something like… {
	margin-left: 0%;
	width: 33.3333%;
.enchantment-button {
	display: block;

…and the fact that that element has a display value of block is why the “area” associated with each of those “buttons” horizontally fills the entire width of the parent Passage “area”.

And the fact that the HTML structure generated by the (button:) macro doesn’t have a single “parent” identifiable element, and that the group of “buttons” aren’t within an identifiable container element, makes solving the issue a little harder.

So we will need to add both of these, and the easiest way to do that in Harlowe is using Named Hooks. The following code discards the (button:) macro calls and wraps all the links within a identified Hook…

		(link-storylet: 1)
		(link-storylet: 2)
		(link-storylet: 3)

…and it generates a HTML structure like the following…

<tw-hook name="buttons">
	<tw-expression type="macro" name="link-storylet" return="command">
		<tw-link tabindex="0" data-raw="">First</tw-link>
	<tw-expression type="macro" name="link-storylet" return="command">
		<tw-link tabindex="0" data-raw="">Second</tw-link>
	<tw-expression type="macro" name="link-storylet" return="command">
		<tw-link tabindex="0" data-raw="">Third</tw-link>

…and you can use CSS like the following within your project’s Story Stylesheet area to layout the “area” associated with of each those three links horizontally across the page using Flex (aka Flexbox).

tw-hook[name="buttons"] {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 10px;

tw-hook[name="buttons"] tw-expression[name="link-storylet"] {
	flex-grow: 1;

Now all that needs to be done is to make each of those links look more like a “button”, which can be achieved by borrowing the styling CSS used by the (button:) macro and converting it to work with Named Hook based structure. The resulting CSS would look something like the following, which should be added to the end of the above “flex” related CSS…

tw-hook[name="buttons"] tw-expression[name="link-storylet"] tw-link {
	border-radius: 16px;
	border-style: solid;
	border-width: 2px;
	text-align: center;
	padding: 0px 8px;
	display: block;

Thank you! Such an in-depth response :slight_smile: I’m not sure I totally understand everything as I am not super knowledgeable about HTML (or CSS) but I’m going to keep playing around based on your advice!