Twine 2 + Sugarcube 2 text width

olympusmons

Code such as

.passage { max-width:50%; }

placed in the stylesheet will effectively narrow the text box in Twine 2 + Sugarcube 2.

However, it does not seem to be able to widen it past a certain maximum. This is particularly noticeable on a large monitor; at 1280x720 almost half of the visible space is margin. Nor have I been able to narrow these margins by changing the margins from the stylesheet.

Where is this maximum coming from and how do I relax it?

greyelf

When using a percentage value it means a percent of the containing block, which in that case is the #passages div element. So in this case it means that the .passages div element can be grow to be as large as 50% of width of the #passages div element but it can also be smaller than 50%.

max-width is used to set the maximum width an element can grow to.

olympusmons

Why then does

.passage { max-width:200%; }

for example not permit an extremely wide passage, should the window be able to display it?

TheMadExile

It comes from the #passages element. To override the rule in question, you'd want to do something like the following:

#passages {
	max-width: 70em; /* default is 54em */
}

Note: You really don't want to increase that much. It may waste screen real estate, but it helps readability when you don't have to scan too great a distance while reading.


For your edification. The passage display area looks like this: (as seen in the SugarCube 2.x HTML documentation)

    <div id="story" role="main">
        <div id="passages">
            <div class="passage …" id="…" data-passage="…">
                <!-- The active (present) passage content -->
            </div>
        </div>
    </div>

(n.b. Periods of ellipsis signify data which is dynamically generated at run-time.)

Sparse though it is, SugarCube 2.x's default CSS also has documentation.

Claretta

#passages is already setting a max width. Maximum means maximum limit, so you can't tell it to have a max width larger than the max width.