how to increase passage editor width

caberg

here what i mean



anyone know how to increase the passage editor width ? thx before

greyelf

As far as I know the simple answer is No.

Because the width of the editor window is control by the .modal-dialog.editor CSS rule of the application's built-in style-sheet and there is no easy way for an end-user to permanently edit that style-sheet.

The complex answer is Yes but each of the possible methods requires the end-user to do technical things like unpacking the node-webkit application so you can edit its style-sheet, or using javascript to modify the application's style-sheet while it is running.

The following solution is one way to use Javascript to temporarily increase the width of that editor, the width will return to normal when you close down the Twine 2 application.

warnings: My Javascript knowledge is limited so a person with more experience may be able to implement a better solution. The following instructions were written from the point of view of a Windows user so they may need to be translated for users of other operating systems, that also assume you are using the latest version of Twine 2.

1. Run the Twine 2 application then place your mouse cursor above a blank area of the Story List area and use the Right Mouse Button to open a context menu, select the Inspect menu item which will open the Developer Tools window. If you look at the lower left corner of this window you should see the Console area.

2. Cut-n-paste the following Javascript into the command line of the Console area, it is the line with a flashing cursor, and press the ENTER key. The Javascript will temporary add an addRule function to the application which we will use later to modify the applications style-sheet.

note: the following code is based on this jsfiddle snippet

window.addRule = function (selector, styles, sheet) {
    if (typeof styles !== "string") {
        var clone = "";
        for (var style in styles) {
            var val = styles[style];
            style = style.replace(/([A-Z])/g, "-$1").toLowerCase(); // convert to dash-case
            clone += style + ":" + (style === "content" ? '"' + val + '"' : val) + "; ";
        }
        styles = clone;
    }
    sheet = sheet || document.styleSheets[0];
    if (sheet.insertRule) {
        sheet.insertRule(selector + " {" + styles + "}", sheet.cssRules.length);
    } else if (sheet.addRule) {
        sheet.addRule(selector, styles);
    }
    return this;
};

3. Cut-n-paste the following Javascript into the same command line and press ENTER. It will change the width of the Passage Editor (from its default of 48em) to now be 80em wide. You may want to adjust the value to suit your needs, you could also do this for (or any other default CSS property of the application.

addRule(".modal-dialog.editor", "width: 80em");

4. Open a Story Project and then a Passage, it should be wider than it was before.

thebigh

Yep, the extreme narrowness of the passage editor annoys me too. I do 90% of my editing in an actual text editor, then either copy & paste, or just compile everything with twee2. The Twine2 passage editor screen is so narrow that it's just not usable.

greyelf

thebigh wrote: »

The Twine2 passage editor screen is so narrow that it's just not usable.

I believe it was designed to be usable on a tablet when viewed in portrait mode.

caberg

thx greyelf, when i posting this topic i'm using Twine 2.0 so it's doesn't have developer tool window (that time sugarcube 2 not yet support Twine 2.1.x because of the flaw)

so it's just temporary then yes? and actually instead of write code in console menu, i edit css style within inspect element for .modal-dialog.editor , i think its more easy for me

see image below, the one with red circle mark

greyelf

caberg wrote: »

i edit css style within inspect element for .modal-dialog.editor

I originally tried that but moving in-out of passages and stories sometimes caused it to reset back to the default values, I believe something was causing it to reload the CSS stylesheet file.

caberg

oh i c , ur method is more awesome then ... thx very much greyelf