Trying to set Tabs in Sugar Cube 2.21

Question

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...

 

Answer 1

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   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    = 52
Strength        = 77

 

Comments

You shouldn't use a non-breaking space ( ) 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   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.

---

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.

Answer 2

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>