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.

[marcotas]

Oh yeah plz!! 👍

[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.

[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 #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

[alessandro-fazzi]

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?

[alessandro-fazzi]

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

[iCodeForBananas]

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

[alessandro-fazzi]

@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

[alessandro-fazzi]

@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.