Howdy, Stranger!

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

Two Issues with Sugarcube v1.0.34

I just updated Twine 1 to the latest Sugarcube release (v1.0.34) and it has created two issues for me:

1: There are very large margins on either side of the text when my story is displayed. The display from left to right is: story menu, big white space, story text, and then more white space. Is there something I have to change so the text fills up that empty white space?

2: Text that I have put into the StoryCaption passage (that I used to have in StoryMenu) is centered instead of being left aligned. What would I have to change so that it is left aligned?

Thank you for your help.


  • edited February 2016
    The default style of SugarCube 1.x is white text on a black background and the StoryCaption text is right aligned, so based on your "big white space" and "centered" statements I am assuming that you have used CSS to customize your story.

    I don't know if you created your own CSS or used someone else's, but if you want black text on a white background then I suggest downloading the latest version of SugarCube 1's Bleached [ZIP archive] style-sheet and use it as a starting point.

    Once you have done that then if you want the StoryCaption text to be left aligned just add the following to the end of your story's stylesheet tagged passage:
    #story-caption {
    	text-align: left;

    Also have a look at the left and right passage margins and let us know if they are still too large.
  • Greyelf, thank you for your quick reply.

    The story caption issue was exactly what I was looking for.

    I should have been clearer on the first issue. Yes, I had modified the colors (I think I was using the bleached style). However, the first thing I thought to do when I had a problem was delete my existing CSS. This issue of the margins being uncomfortably large exists even if I start a new story and don't edit anything.

    I've attached a screen shot of a new story in Twine and the only things I have done is change the format to Sugarcube and post my original message above into the start passage for scale.
  • edited February 2016
    That screenshot is of SugarCube v2, not v1 (this has nothing to do with the Twine version, BTW). Mind you, SugarCube v2 is what you should be using for new projects (v1 is in maintenance only mode).

    I'm actually unsure how you mixed the two up—they have separate pages, the version number is all over their download sections, and the archives even have the version number baked into their filenames.

    Note: If you do plan on using the Bleached style, make sure you download the one specifically for SugarCube v2, as the two are not compatible.

    Regardless, your "margin" issue isn't with margins. The passages container has a set maximum width (default: 54em). This is to reduce eye strain, among other things. If you want to remove the maximum width you may do so with something like the following.

    Style (goes in a stylesheet-tagged passage)
    #passages {
    	max-width: none;

    Personally, I'd suggest making that an option for the player, but that is, ultimately, your decision. Should you decide that you wanted to give that a shot, then you could by using something like the following, rather than the above.

    Style (goes in a stylesheet-tagged passage)
    html.widescreen #passages {
    	max-width: none;
    Setting (goes in a script-tagged passage)
    var setupWidescreen = function () {
    	$("html")[settings.widescreen ? "addClass" : "removeClass"]("widescreen");
    Setting.addToggle("widescreen", {
    	label    : "Allow the story to use the full width of your browser window?",
    	default  : true,
    	onInit   : setupWidescreen,
    	onChange : setupWidescreen
    It defaults to "widescreen", but allows the player to toggle it off/on.
  • edited February 2016
    In your original post you stated that you are using SugarCube 1 (v1.0.34) but the image you attached shows a story created using SugarCube 2, so I am going to assume you are actually using v2.2.0 of SugarCube 2.

    SugarCube 2 sets a maximum width of 54em for the #passages element, which is the element that contains the contents of the current Passage being displayed. You can remove the maximum width setting by adding the following CSS to the end of your story's stylesheet tagged passage:
    #passages {
    	max-width: none;
    note: If you plan to use the Bleached stylesheet then make sure you download the release that is on the SugarCube 2 website.
  • Thank you. I mixed up the Sugarcube versions because I was looking at Twine 2 at the same time as I was updating Twine 1 and mixed up my versions (I did not know this was unrelated to the versions of Twine, part of the reason for my confusion is that I did not think Sugarcube 2 would even work with Twine 1).

    The max width issue is exactly what I was looking for. Thank you for that and the option to change it by player.
Sign In or Register to comment.