Howdy, Stranger!

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

changing Harlowe's "tw-passage" element's size and position using CSS

I have been wrestling with this for a while now, with no solution, so I just thought I'd ask on here.

I was trying to change the size and position of the area in which text is displayed, which, according to furkle's Twine 2 CSS Tutorial, is an element named tw-passage.

I find that horizontal properties(width:, left:) will work as expected but vertical ones(height:, top:) have no effect, unless the value supplied to the property is larger than a certain percentage value/number of pixels. I was unable to pinpoint the exact value, but it's small enough that it prevents me fine-tuning the position of the text display area within two centimetres of the top of the final visible screen.

Could anyone supply me with a fix, or a workaround, or at least an explanation as to why this is happening?

Side-note: I'm pretty new to CSS, so please be merciful if this is something I ought to know, or something that's glaringly obvious.


  • I'm not certain what problem you're running into here, but a good way to play around with this is to open a compiled twine html file with Firefox or Chrome, right click and open the Inspect window. If you then click the Element selector button, which is in the upper left of the inspect window and looks like a cursor on top of a box, you can mouse around the screen and see exactly which elements are positioned where, how big their margins and padding are, and other info.

    So, as I said, I'm not 100% certain why what you're trying isn't working, but from the description, you might try applying your styles to <tw-story>, which is the main container for everything on the page, instead of <tw-passage>, which specifically contains passage contents. It may be that you can't style your <tw-passage> exactly how you like it because, in essence, there are other elements stacked on top of it. Applying CSS to <tw-story> changes the whole container and moves those other child elements as well.

    For example, on one of my projects I'm using this CSS:
    tw-story {
    	width: 80%;
    	margin-left: 18%;

    This expands the main box from the twine default (which I think is width: 60%) and moves it over to the right by 18%. Feel free to play with the numbers to get a style you like; for instance, I started at 20% margin and dialed it back a bit because I liked the look a little more. If you want to move things to the very top of the screen, you'll want to add margin-top: 0; since <tw-story> has a default margin of 5% top and bottom. You can find out these values by looking in the righthand pane of the Inspect window; you'll see a list of CSS tags laid out under Rules (in Firefox) or Styles (in Chrome) with checkboxes next to them. You can selectively disable the rule by unchecking the box, or change the values themselves by clicking them and typing a new one to test.

    If you're looking for more resources on how to learn CSS, is a great reference for a lot of tags. There are also a good deal of useful help sites and blogs that you can Google relatively easily, or just ask on a forum like this one or StackExchange for more twine-specific/technical questions.
  • I think my problem was probably the 5% margin of tw-story, which I did not know about. Thanks for your help.
Sign In or Register to comment.