Two-column layout in Jonah

mariam

Hey everyone!

I'm writing a story thats a conversation between two characters. Each character's dialogue appears on a different side of the screen. I also want it to have the stretch text format, so I'm using Jonah.
Currently, I'm writing each passage like this:

passage 1

<div id="sectionLeft">[[ Person 1 Dialogue|two]]</div>
<div id="sectionRight"></div>

passage 2

<div id="sectionLeft"></div>
<div id="sectionRight">[[ Person 2 Dialogue|three]]</div>

and then using CSS on each div:

#sectionLeft {
	width: 49%;
	float: left;
	text-align:right;
	border-right:1px solid black;
}

#sectionRight {
	width: 49%;
	float: right;
	border-left:1px solid black;
}

It doesn't look great. There's too much white space between passages and when I get to passage 10 it displays passages next to each other.

Is there a better way to achieve this kind of layout in Jonah?

greyelf

There are a number of things that are adding extra space in your story.

1. You have a line-break between the #sectionLeft and #sectionRight div elements in the passage contents, this is converted to a br element. To fix this simply add a backslash character \ to the end of the #sectionLeft div elements in all your passages, this will tell Jonah to remove the line-break at the end of that line:

<div id="sectionLeft">[[Person 1 Dialogue|two]]</div>\
<div id="sectionRight"></div>

2. Jonah gives every passage a margin-bottom, so this needs to be removed.

3. The .title part of each passage has a larger line-height than the .content part so it needs to be reduced to be the same. Also by default the .title part is the same width as the parent .passage element so it needs to be made smaller so that the .content part can be position on the same line.

The following CSS should give you a better starting point, although you may want a more experienced CSS coder to have a look at it.

.passage {
	margin-bottom: 0;
}
.passage .header, .passage .footer {
	display: none;
}
.passage .title {
	line-height: inherit;
	width: 12em;
	float: left;
	clear: both;
}
.passage .content {
	margin-left: 13em;
	width: auto;
}

#sectionLeft {
	width: 49%;
	text-align: right;
	padding-right: 1%;
	border-right: 1px solid black;
}

#sectionRight {
	margin-left: 50%;
	width: 49%;
	padding-left: 1%;
	border-left: 1px solid black;
}

mariam

Sorry for the very late response.
I tried your method and it worked, but I ended up doing something similar in Harlowe because I thought the story looked better broken up as opposed to the stretch text style.

I have each passage broken up like this:

<div id="sectionLeft">"Hey, I'm the first text you [see]<see|
(Click:?text)[And it goes on like [[this->nextPassage]] ]</div>

<div id="sectionRight">(Click:?see)["Sup, I'm the next [text]<text|"]</div>

Using the same CSS:

.sectionLeft {
	width: 49%;
	float: left;
	font-size:12pt;	
}


.sectionRight {
	width: 49%;
	float: right;
	font-size:12pt;
  
}