current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
up vote 3 down vote favorite

After answering a few questions on Code Review and Stack Overflow, I noticed that the editor allows you to resize vertically, but not horizontally. The width seems to allow 80 characters.

My questions is:

Why not allow high-resolution monitors users to use some extra horizontal space (i.e. on the left) when editing answers? This meaning that the text-area allow resizing to the left, if window width allows it.

My arguments to allow that:

  1. Some programmers think that 80 chars/line is too small and might compromise readability as pointed out here.

  2. Since Code Review is about asking for help about functioning code, this usually means lots of code, typically much more than plain text. I would optimize the editor for code editing, rather than plain text.

  3. Many of us who post a question here are not that experienced to pay attention (or "OCD" enough, as I use to say) to line width, cyclomatic complexity (typically meaning large indentation levels) etc. and the code is very hard to read.

Here's a sample image of code showing improperly:

Sample image

share
1  
This has already been addressed on Meta.StackExchange as status-declined : Can SO have a fluid vs. fixed-width layout? – Phrancis Jan 12 at 21:07
    
I have read that question and it is not the same thing, because I am not concerned about the unused white space, but rather the not so great readability of the code inside a fixed width editor. I am not asking to change the layout in its entirety (as suggested in provided link), but to allow editor resizing only to the left (similar to what happens to the text area when resizing is allowed and it can be dragged to the right). – Alexei Jan 12 at 21:32
up vote 4 down vote

This has been addressed on Meta.StackExchange back in 2009 with no sign of a change in layout.

Can SO have a fluid vs. fixed-width layout?

To quote Shog9♦:

The primary designs are all based around a fixed layout; reworking them is not feasible.

This certainly doesn't preclude the use of fluid layouts for other designs. For instance, mobile practically demands a more fluid display.

And since the underlying data is all public and fairly easy to access, you could always write your own UI similar to how Stack Printer does it.

share
1  
Yes, I understand that and I am not asking for a tremendous work to be done only for this rather small inconvenient. I was just thinking about having the editor textarea able to resize horizontally (so, the default display does not change at all). However, I have a workaround to obtain a large width: remove fixed width and resize: none from the textarea and resizing to the right is allowed. – Alexei Jan 12 at 21:46
    
By any means, if you have a script or something like that to do it, please do share, I'm sure others would like to use it as well (including myself) – Phrancis Jan 12 at 21:50
    
Currently, I have changed the attributes of the textarea directly using Developer Tools, but I will check if this can be automated. – Alexei Jan 13 at 6:03
    
I managed to create a little extension for Chrome that automatically extends left column (see details in my answer) – Alexei Jan 17 at 20:51
    
Nicely done @Alexei ! Maybe you could add it to the post on Meta Stack Exchange for those on other sites who might like to use it? – Phrancis Jan 18 at 1:07
    
yes, I have added a Toggle button and posted the code as an answer to [meta.stackexchange.com/questions/5070/… original question). – Alexei Jan 19 at 6:33
up vote 1 down vote

A possible solution to improve code readability by allowing larger widths is to use an extension that changes the layout a little bit. The following works in Google Chrome (thanks to this post), but I think it can be ported to other browsers.

The extension enlarges the left column and also allows answer text-area to be horizontally resized. Other elements are unaffected (nothing disappears) (stats, events, related questions, footer etc.).

Now, the code:

1. Manifest file (manifest.json)

{
    "name": "",
    "description":"Extends code area from CodeReview site",
    "version":"1",
    "manifest_version":2,
    "content_scripts": [
        {
          "matches": ["http://codereview.stackexchange.com/*"],
          "js": ["jquery-2.2.0.js", "myscript.js"],
          "css": ["styles.css"]
        } 
      ]
}

2. Styles (styles.css) 

.moveToLeft { 
    margin-left: -200px !important;
    width: 928px !important;
}
.largerReadonlyCodeBlock { 
    width: 860px !important; 
}

.questionHeader {
    margin-left: -200px !important;
    width: 1270px !important;
}

.footerMenu {
    margin-left: -200px !important;
    width: 1310px !important;
}

3. Javascript file (myscript.js)

$(".wmd-input").css("resize", "both");
$("#mainbar").addClass("moveToLeft");
$(".post-text").addClass("largerReadonlyCodeBlock");
$("#question-header").addClass("questionHeader");
$("#footer-menu").addClass("footerMenu");

Currently, the code enlarges the column by a hardcoded value of 200px, but it should be enough in most cases.

share
    
Uh, this is what we have userscripts for. – Quill Jan 19 at 14:20

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .