Weird Formatting Question

HerrAshmoo · July 2015

Hey! Before I explain what's up, I'm using Twine 2.0.6 for Mac, Harlowe.

So, I'm trying to build a game that has a heavy use of maps. I've basically created the bulk of a tileset to easily create the maps I need, but I couldn't figure out a decent way to display them.

Initially, my thought was to just do something like this:

[[<img href="image here">->Passage]][[<img href="image 2 here">->Another Passage]]

across the screen, centered, and just use standard line breaks to stack the images on top of one another. And this kind of worked, but it created two problems:

1) There was a weird gap between the line breaks that broke the map up into rows and
2) I realized that the tiles were going to have to be subdivided for the game.

So I ended up deciding to do tables, a la:

{
<table border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td>
			(if: $Acre1)
				[Crazy table division stuff to display map of acre]
			(elseif: $Acre2 or $Acre6)
				[[[<img src="image 2" width="64" height="64" border="0">->Acre 1 Sale]]]
			(else:)
				[<img src="image 3" width="64" height="64" border="0">]
		</td>
		<td>
			<--! More Cells Here -->
		</td>
	</tr>

and planning on subdividing those cells as needed in the future. I actually ended up checking out how Neopets used tables to display the maps in Neoquest years ago to see if I was on the right track, and it seemed legit? But:

The formatting was even weirder (a note: the first line in this screenshot has had all the whitespace of the above code removed, the second hasn't--but the difference isn't very much, and I only really needed the first line for this example) and the bloody line break space was still there. Where is all this space in the cells coming from? Is there like an HTML or CSS trick to fix this?

I'm at a total loss and have been frustrated with it for the last couple of days, so I figured asking wouldn't hurt. Any help on this issue would be awesome, and I can even post original code if it helps at all.

Thanks.

greyelf · July 2015

My suggestion would be to upgrade Twine 2.0.8 which comes with Harlowe 1.1.1 which contains a number of fixes related to removing unwanted spaces.

I used your table example in a Harlowe 1.1.1 story and there was no space between each of the images within a table row

HerrAshmoo · July 2015

Updating and clearing out the whitespace certainly helped, but I'm finding that the issues I had sans-tables are still in effect, i.e. the spaces between rows are identical to the spaces between linebreaks in a standard formatted story:

(Ignore the text, it's just a placeholder.)

Is there like a CSS thing I don't know about that automatically adds a few pixels between line breaks, and if so, can it be wrangled into being restyled in tables?

EDIT:

So to test even further, I found some random 32x images online and checked to see what would happen when I began to subdivide using a table within a table, and here's the results:

So you can see, subdivisions are affected by the linebreak dealio as well. It seems that maybe both

<tr>

and

<br>

are affected by something, I just don't know what that might be.

EDIT #2:

Okay, so I think I've solved the problem. CSS has a default linebreak style, so I went into the story's custom
CSS and did

tr {
	line-height: 0%;
}

and it seems to have done the trick! Here's a screencap of the most recent test:

So, for the moment, I think this is solved and can be marked as answered! Thanks for the suggestion to update Twine, greyelf, I think it probably had a hand in helping me get this cleaned up.

Howdy, Stranger!

Categories

Weird Formatting Question

Comments