Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Resizing Window Resizes Text

Hi, I am new to Twine and very, very new to CSS. My use of interactive fiction programs was restricted to Inform until about two days ago.

I am working on a story and one of the things that drives me crazy is when you resize the window, the text shifts. I would like the text to be fixed in place but I can't for the love of me figure out the corresponding code to do so. I've searched high and low online but without any luck. (Possibly overlooking or just using the wrong terminology.) Heck, I'd even be about putting a border around the text to keep it in place but yeah, also having no luck with searches and even trial and error.

I am using Sugarcube. Thanks a bunch.


  • Are you talking about how the text reflows to fit the window?
  • edited June 2017
    You need to state the name and full version number of the story format you are using, as answers can be different for each one. Especially when asking questions about screen layout.

    The current width of the "passage" area is determined differently for SugarCube 1 than it is for SugarCube 2.

    1. SugarCube 1.x's width is a dynamically calculated percentage based on the current width of the web-browsers view-port.

    The calculation is made up of the following part.

    a. 100% of the view-port's current width.

    b. minus the left (21em) and right (3.5em) margins of the body element.

    c. minus the right margin of the #passages element, which is 16% of the body element's current width.

    2. SugarCube 2.x's width is either: 54em wide if there is room; or calculated as follows.

    a. 100% of the view-port's width.

    b. minus the left and right margins of the #story element.

    note: The side-bar being stowed/unstowed can effect if the value or calculation is used, and the size of the left/right margins of the #story element change depending on a set of predetermined view-port width limits. (to handle different sized screens)

    If you want the "passage" area to always have a fixed width then you need to change the existing CSS of the story format you are using, what changes you need to make depend on what you want the end result to look like.
  • Hi, please disregard this post. I figured it out but because I was a new member posting for the first time, it took a couple days for this appear and I couldn't try and remove it or let people know that I solved the problem.

    Thanks for your help, though.
Sign In or Register to comment.