How do you display two blocks of text side by side?

wingsofwax · June 2015

I was wondering if there is any way to divide the screen into two separate blocks of text side by side instead of just one.

My goal is to have room descriptions on the left and something like RPG-stats on the right. The left text would then change as you move from passage to passage, but the right text block remains the same.

Like this:

You are in a room Strength: 12
filled with weird stuff Dexterity: 18
on the floor. Wisdom: 9

I hope you get the idea.

I know Harlowe isn't designed to do this, but is it possible to do without too much hassle?

Thanks!

Sage · June 2015

I used a standard (although deprecated in favor of CSS) html table and it worked fine on Harlowe.

If you're using SugarCube you just put it into a passage named StoryCaption and you're all set.

wingsofwax · June 2015

Could you give me some example code? I have a basic understanding of HTML. but not enough to have an idea about how to do this in Harlowe.

greyelf · June 2015

The basic HTML structure of the dynamic part of a Harlowe story:

<tw-story>
	<tw-passage>
		<tw-sidebar>...</tw-sidebar>
		The Contents of the Passage being displayed goes here!
	</tw-passage>
</tw-story>

As you can see Harlowe's side-bar (the tw-sidebar element) is actually contained within the passage area (the tw-passage element) that is dynamically generated to display a passage, which it self is contained within the story area. (the tw-story element)

One major issue is that the tw-story element (and all it's contents) is destroys and then recreated each time a Reader moves from one passage to another. Which means that anything you programmatically add to this area will need to be added each time the Reader moves between passages.

1. One way you can get around this issue is to add a (display:) macro to each and every one of your passages that you want to see the RPG-stats on, something like the following:
1a. Stats passage:

<div id="stats">Name: $name
HP: $hp
MP: $mp
</div>

1b. Main passage (the initial passage of your story)
note: you will need to remove the line-breaks after the last (set:) and the (display:) to align the text better.

(set: $name to "John")(set: $hp to 100)(set: $mp to 100)
(display: "Stats")
<div id="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</div>

1c. Some very basic (and shonky) CSS to cause the stats area to be displayed to the left. (this would need to be corrected by a more experienced CSS coder)

#stats {
	float: left;
	padding-right: 1em;
	margin-right: 1em;
	border-right: 1px solid black;
	height: 100%;
}

2. The unreleased 1.1.0 version of Harlowe supports a new passage Header and Footer feature, which you may be able to use to display a stats area to the side of the main passage depending on how it is implemented. I believe you would still need to use CSS to do this.

wingsofwax · June 2015

Great stuff, GreyElf - much appreciated.

Howdy, Stranger!

Categories

How do you display two blocks of text side by side?

Comments