Vscode: Zen mode: Centered Editor Layout

[mjbvz]

With the recent addition of zen mode, it may be worth considering adding a centered editor layout option:

This is something that the Typewriter atom extension adds, and I see it being particularly useful in zen mode and when writing text documents, such as markdown. A centered layout would apply both a softwrap and align the wrapped editor content to the center of the current editor pane.

The major downside is that this would add an ui configuration that we would have to test and support. The centered editor layout also doesn't fit well with all VSCode ui paradigms

[Zyst]

For now is there any extension doing something similar to this?

[mjbvz]

@Zyst No, this is not something that an extension would be able to control. VSCode isolates extensions from the UI implementation, which has a number of benefits, but it also means that extensions cannot customize the VSCode UI like this.

[atombender]

I think the most intuitive solution would be to let the user specify a desired width, in characters. So if I set 100 (that's how long my codes lines are before I wrap them) as my Zen width, it will adjust the padding so that a 100-character line effectively becomes centered at all times.

[coreh]

An extension could at least add several extra gutters to fake this, no?

[phest]

Would love to have this. Ideally top and bottom margins should also be supported. In my opinion WriteRoom has one of the most well designed zen modes, thanks in part to the top and bottom margins. The margins only appear when scrolling to the top or the bottom of the page.

I think ideally it should look something like this (mockup based on @mjbvz's):

(Notice the top and bottom striped blocks in the scroll bar area.)

[filipesilva]

I would also like this. Going into Zen mode on a ultrawide results in a lot of wasted space with an editor all the way to the left.

[msageryd]

This would be a very welcome feature. Working i zen-mode on a 27" monitor requires me to physically move to the left on my desk so I can look straight forward on the code. I'd rather stay centered in front of the screen with the code centered in front of me.

[filipesilva]

As a comparison, this is how VSCode's Zen mode looks on 3440x1440 resolution (ultrawide):

By comparison, this is how the same file looks on Webstorm's distraction free fullscreen on 2560x1080
resolution (also ultrawide, but smaller):

[datendenker]

I would also like to see this feature.

[marcoT89]

Oh yeah plz!! :+1:

[Grogs]

+1, this prevents Zen Mode from being as good as IntelliJ's "distraction free" mode for me.

[prokher]

+1, waiting for this feature since the day one...

[cmer]

+1

[bradharms]

+1

[prichodko]

+1

[bjrnt]

+1

[neronmoon]

+1

[klaytonfaria]

+1

[jens1o]

Guys, let me say: There is something called GitHub reactions, which avoids such useless comments and won't get maintainers mad.

You do it like this:

1. Go to the top
2. Click on that button:
   
3. Select an reaction(you can also use the heart emoji):
4. Be proud of yourself

Thanks in advance.

[filipesilva]

It also helps maintainers gauge how much interest there is from looking at the first post only. It's much better overall.

[phest]

@jens1o they're not clueless. They're probably eager to get a status update, it's been a while. I'd also love to know if there are any plans to implement this.

[jens1o]

There is a button on the side:

Actually, I used the wrong wording, I was a little bit upset, sorry...

[asgmojtaba]

There is a workaround that i using until the issue fixed. Create empty tab and split editor vertically then adjust split area until give semi-center-aligned editor :

[exallium]

This would be very helpful even outsize of zen mode.

[lomholdt]

Still no centering? I'm running on a ultrawide screen in 3440x1440 resolution. Centering the code would be über awesome!

[btstream]

It will be a great feature.

[thundernixon]

@asgmojtaba great workaround! Wow, yeah I really wish there were a hotkey I could hit to do this in a less-hacky way, but this works until then.

[anhdat]

here's another workaround by using search panel, when nothing enter the search box, this panel is an empty one, suitable for our need, and it has a great shortcut combo:

• Ctrl/Cmd + Shift + F to open panel
• Ctrl + 1 to refocus on editor

[mathsalmi]

I mean really?! This issue's been open for a whole year and nothing yet? 😢

[jens1o]

@mathsalmi You're free to do a pr :)

[SrTobi]

Hi, I added a pr for this. Here is a preview:

[mathsalmi]

@SrTobi great work!

… and sorry for being an asshole before. I was in a really bad day.

[dtgriscom]

@usernamehw referenced this from my suggestion at #40841 . Is there a reason why this proposal is limited to Zen mode? And, it isn't completely clear from @SrTobi's PR preview; are the given sizes relative to the screen size, so that having multiple edit groups don't end up with extra margins for each group (wasting screen space)?

[SrTobi]

@dtgriscom there is only one reason it is limited to zen mode: I only need it in zen mode 😄. That, though, is of course a very bad reason and it would be the mattar of removing one line to make it work in normal mode as well.

I tried to show it in the GIF and am sorry that it doesn't become quite clear, the centered mode is only activated if only one editor group is used (the moment a second one is activated the centered mode is disabled) and it is limited to text editors only, so the welcome screen or the settings screen does not become centered (though I tested it with a diff-screen a moment ago and that is centered as well. That shouldn't be the case). Here are the relevant code lines:

https://github.com/Microsoft/vscode/pull/40757/files#diff-a01e5a175d29ffe97b726ad068c29e9bR2055
typescript // When in zen mode, if there is only one silo open and it shows an editor, // center the editor const centerEditor = this.partService.isInZenMode() && editor instanceof BaseTextEditor && this.configurationService.getValue<boolean>('zenMode.centerEditor') && this.visibleSilos === 1;
Currently the centered mode is activated based on these 4 conditions. And when it is activated, it will enforce the sizes that are given in the settings respecting the available space. I also thought about adding a maxWidth option but I wasn't sure which use cases to consider (the current PR is mostly aimed at using the centered mode in zen mode and fullscreen).

We would now need to decide which behavior we want in which situation. Maybe we can gather some use cases?

Oftopic @dtgriscom: I have my wide screen monitor for 2.5 years 👍

[dtgriscom]

@SrTobi Very cool. To perhaps make this more broadly useful, I have a few suggestions:

• Make it available as a general feature, rather than Zen-only (as we discussed, although this could instead be a setting)
• Instead of specifying left and right margins in percentages, specify width in text columns, which is how existing settings seem to work (it took me a while to understand your percentages)
• To specify positioning of the narrowed editor, have an "align" property, which defaults to "center" but can also be "left" and "right"

Perhaps the settings could be as follows (with a few extra features thrown in):

// Specifies parameters limiting editor width
"editor.limitWidth": {
    // Maximum number of columns (0 is default, and means "no limit")
    "columns": 120,
    // Alignment of editor(s) in available space (can be "left", "center" or "right")
    "align": "center",
    // What modes is visible in. Can be single string or array of strings. Values are
    // each possible mode ("zen", "fullscreen", "non-zen"?)
    "active": "zen",
    // Maximum number of open editor groups for this to take effect
    "maxGroups": 1
}

This would meet my needs; would it meet yours (and the others who have posted to this thread)? If so, then I'll suggest that it would be more broadly useful than either of the two original requests.

... thoughts? "Love it"? "Take a flying leap"?

[SrTobi]

Yeah columns is a good idea. Also

• add a boolean option named rightflow or righttail or overflow or something like that which controls if the most right editor should fill the remaining space on the right side.
• currently the editor is centered into the available space which means the left menu pane influences the position of the editor... I think it should be centered in the center of the window. That's no problem in zen mode where the menu pane is hidden most of the time but it would matter in normal mode.

[dtgriscom]

@SrTobi I'd keep this as simple as possible, and since I don't know VSC internals, and don't really have the time anyway, I'd shoot for whatever would be easiest for you to implement, giving some thought to possible future enhancement. With that in mind:

• Only put the "columns" in if it's easy (e.g. if you can do it without getting complicated about how "remaining space" is handled). In fact, although I'm the one who proposed it, I'm worried that it would open a can of worms (e.g. what if the user manually drags an editor border?).

• I agree that having the nicely centered editor jerk around when you show/hide the sidebar could be annoying, but that's the default behavior that everyone deals with today, and thus it's expected, so I'll suggest fixing it shouldn't be a priority.

• For now, I'd have this be always active (in zen and other modes); once it's done, someone can add in the ability to enable/disable it in various modes if they like.

The other concern is that the more complex this proposal is, the less likely it will be accepted as a PR. A big concern would be lots of special cases, hence my suggestion to skip the "columns" feature for now. Once (if) the primary feature is accepted, then enhancements could be proposed.

[SrTobi]

Yeah I see the same problem with the columns and the window centering. Haven't looked if it is easy or not (maybe there are already functions to calculate it) and I won't work on any features before someone official has approved of the technical way the centering is currently implemented. I don't want to write it twice :D

[dtgriscom]

Well, my original feature request just got closed as a duplicate of this one. So, help me, Obi @SrTobi ; you're my only hope...

[rchrdnsh]

wait...this doesn't seem to work yet...is it coming soon???

[mikerockett]

This is literally the only thing I need for VSC to be my new Sublime. +9999 for @dtgriscom’s suggestion there. active could be zen, fullscreen, and always.

[SrTobi]

Ok, I changed the PR and streamlined the settings a lot (sorry, I didn't feel like making a gif video again, but it essentially looks the same as the gif above... only the settings have changed completely).

The Center Mode is now independent from the zen mode.
It can be activated automatically or manually by the "Toggle Center Mode" action.
If active, it will set the width of the active silo to centerMode.size and center it.

The settings are now as follows:

• centerMode.autoActivate has the options always, zen, fullscreen and never. It controls in which context the center mode should be activated automatically.
• centerMode.size controls the size of the centered widget.
• centerMode.adoptRight -> Normally, on the right side of the centered widget would be free space. With this option the silo can be expanded all the way to the right border (is on by default)
• centerMode.onlyEditors -> I think most people would use the centered mode only for the text editor... it doesn't make much sense - in my opinion - to use it for a diff widget or a settings page or welcome page. But if you want that, you can set onlyEditors to false.

[jeffochoa]

Is this going to be merged anytime soon? Looking forward to it.

[jens1o]

@jeffochoa As you can see, it is scheduled for the February release.

[phest]

@jens1o @jeffochoa Not quite scheduled, it's set as a stretch goal. Hoping it makes the cut.

[bpasero]

@isidorn I merged the PR, feel free to do follow up work as you see fit.

[MikeDevice]

Wow, great! So, is it going to be in the next release?

[isidorn]

@bpasero thanks, taking over from now.

[SrTobi]

@isidorn the border looks great

I also opened a PR (#44116) for centering the layout when entering the zen mode.

[isidorn]

Fixed by @SrTobi in https://github.com/Microsoft/vscode/pull/40757

[robsonsobral]

Is it possible to enable the centered layout for an specific file? Markdown, on my case.

Thanks.

[SrTobi]

@robsonsobral no, not at the moment. You have to either activate zen-mode (where the center layout is automatically activated) or use the "Toggle centered layout" action. You may assign a key shortcut to that action though

[pioneerskies]

1.21 on mac does absolutely nothing when activating this awesome feature from command palette nor from the View menu. No output in console, no nothing. Just me?

[pioneerskies]

Wiped config and reimported...all ok. Just an x-file.

[michaeljcalkins]

@pioneerskies What do you mean wiped config and reimported? Nothing happens for me either when running the command.

[pioneerskies]

@michaelchiche I've reproduced the problem in a more scientific way: CMD+option+0 indirectly enables/disables the centred mode.

[OutThisLife]

Not sure where to put this but it seems like the right place.

Is there a way to resize the editor viewport (like how centered is now) but rather than centering, just let us resize it as we want?

So we could have the editor 50% of the entire window on the left side, rather than straight center.

[robsonsobral]

Thanks, @SrTobi . So sad...

[3ximus]

@OutThisLife You mean how they show in the demo? https://code.visualstudio.com/updates/v1_21#_centered-editor-layout
You can use the ALT key while dragging to move the borders separately

[pioneerskies]

@outthislife that is not working for me FYI 😢

[SrTobi]

@OutThisLife that's possible. you can press and hold the alt key. That decouples the sashes and you can move them freely. Then you can move the left border all to the left and the right border to the middle or something. Currently it's only possible for the horizontal direction. We thought about the vertical direction but put that back for now. But I don't even see a usecase for that

[OutThisLife]

@3ximus @SrTobi

Thanks, perfect :)

[nohwnd]

@SrTobi Is there a way to reset the borders back to default? I've moved them (by using the Alt key and dragging as you described above), but now I'd like to make them perfectly centered again.

[isidorn]

@nohwnd double click on sash resets them

[ericls]

I almost switched back to atom because I did not know this is the reason / how to turn this off.

How about not automatically set this to true when zenMode.FullScreen is false by default?

[addertheblack]

I find myself using zen mode to see more of the code cut off horizontally. Is there any reason why someone would want to go into Zen Mode when they have a horizontal scrollbar and not want to expand the viewing area until at least they don't have to scroll horizontally?

Secondly, there's a "zenMode.fullScreen": false! That's awesome!

[Vxider]

Is there anyway to hide centered layout sash?

[SrTobi]

@Vxider no, you have to stick with them or open a new issue and request this feature

[davidmrnustik]

When an user has View: Toggle Center Layout enabled, moving cursor over tabs over left and right sashes, an app provides you with a resize cursor for resizing centered layout instead of let you click the tab.