0 votes
by (190 points)

Hello,

I am using using Harlowe 3.0.2/Twine 2.3.1 browser. I want to be able to put a box around a section of text in my game. I have seen a previous question asked but as that user was using Sugar Cube I thought the coding would be different.

I looked in the Twine Cookbook and the closest thing was Variable Story Styling but as that affected the entire page it was not the desireable effect.

So, how do I put I box around some text in a certain passage?

Replies are immensely appreciated.

1 Answer

0 votes
by (158k points)

Your question can be broken down into two parts:

1. The CSS property used to define a border (what you are calling a 'box')

This link leads to a simple description of the border property, while this link leads to a more indepth description.

/* The following defines a 1 pixel wide solid white border. */
border: 1px solid white;


2. How to apply the above CSS propert to the related text.

There are a number of ways you could do this, which you use depends on your project and preferences.

a. Using the (css:) macro directly.

This becomes an issue is there are lots of instances where you want to apply the 'box'

(css: "border: 1px solid white;")[Some boxed text.]


b. Using the (css:) macro combined with a story variable.

Ideally the initialisation of the $box story variable (the calling of the (set:) macro) would be done within your project's startup tagged special passage. The downside of this method is that it requires storing the story variable's value within your story's History system, and that the Save system can have issues saving such a value.

(set: $box to (css: "border: 1px solid white;"))

$box[Some boxed text.]


c. Using a HTML element and related CSS rule.

You could wrap the related text in a HTML element (like <span>, <div>, or <p>) like so...

Some <span class="box">inline boxed</span> text

<div class="box">Some boxed text in a div.</div>

<p>Some boxed text in a paragraph.</p>

... and use CSS like the following within your project's **Story Stylesheet** area to style each of the above.

.box {
	border: 1px solid white;
}
p {
	border: 1px solid white;
}

warning: If you plan to use a block based HTML element (like either <div> or <p>) to markup your 'boxed' text then you will also need to include CSS like the following to fix an issue Harlowe has with such elements.

div, p {
	display: inline-block;
	width: 100%;
}


d. Using a Named Hook and related CSS rule. (my preferred solution)

You would place the text within a known Name Hook. you can have multiple instances of the same hook in the same passage as well as in multiple passage.

|box>[Some boxed text.]

... and use a CSS selector targeting the name of the Named Hook within your Story Stylesheet area to style them.

tw-hook[name="box"] {
	border: 1px solid white;
}

 

by (190 points)
Thank you for the quick reply, the final solution (your preferred one) works the best for me.

Is there a way to make the box (inside the border) filled with colour as well? (Instead of just changing the background?
Welcome to Twine Q&A, where you can ask questions and receive answers from other members of the community.

You can also find hints and information on Twine on the official wiki and the old forums archive.

See a spam question? Flag it instead of downvoting. A question flagged enough times will automatically be hidden while moderators review it.
...