0 votes
by (2.3k points)

I've tried using the

 

inside the passages.

This does work in a sense but the tabs won't align with the figures on the next line e.g.

               59

                 71

My Code looks like this:

''Intelligence''&emsp;&emsp;&emsp;= ''<<print "$pcStats.int">>''

''Strength'' &emsp;&emsp;&emsp;&emsp;&emsp;= ''<<print "$pcStats.str">>''

  Do need to mess about in CSS? Please say it ain't so...

 

2 Answers

0 votes
by (23.6k points)
edited by

If you don't want to change your css, you could also just use a table.

Other than that you'd have to switch to a monospace font and use &nbsp; instead of &emsp. Put the following at the top of your Story Stylesheet (substituting any monospace font you'd prefer of course):

@import url('https://fonts.googleapis.com/css?family=Roboto+Mono');

body {
  font-family: 'Roboto Mono', monospace;
}

Now the following should be nicely aligned:

Intelligence &nbsp;&nbsp;&nbsp;= 52
Strength &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;= 77

 

by (44.7k points)
You shouldn't use a non-breaking space (&nbsp;) there, because there are cases where it may not come out at the same width as a normal space.  If you want a regular space you can represent that using &#32; instead.

That said, I'd go with the table method, since font changes within the page stand out and often look weird unless done well.
by (23.6k points)
You could also just wrap your text in a <pre> tag instead of substituting whitespace with anything  -but yes, just using a table would be the best method that won't cause any problems.
0 votes
by (68.6k points)

As others have noted, use a table, specificially a <table> element—your use case is literally what they're for.

Here's a basic working example for your shown code:

<table>
<tr>
	<th>Intelligence</th>
	<td>$pcStats.int</td>
</tr>
<tr>
	<th>Strength</th>
	<td>$pcStats.str</td>
</tr>
</table>

 

...