Zettlr: Set a max width for the editor?

[davidbosman]

In the editor, the text will occupy as much width as possible. Would it be possible to have a setting to set a maximum width (in number of chars, or pixels, or whatever) and have the line soft wrap at that length?

Outside of code, I prefer shorter lines when reading.

[nathanlesage]

I just tested out the app on my new 27 inch monitor and realised I need some more breakpoints, as in Distraction-free mode the code should actually not be that spread out … I got to the CSS either way today, so I'll keep that in mind additionally!

Besides that: I recommend the Custom CSS option!

[davidbosman]

Wow, did not noticed that option. That's great. Thx :)

[samarulmeu]

I manage to modify the width of text adding to my Custom CSS this

.CodeMirror-lines {
  max-width: 250px;
}

The problem is that the text wrapper is not centered and I could not figure out how to do it.

[nathanlesage]

@samarulmeu Have a look in this file: https://github.com/Zettlr/Zettlr/blob/master/resources/less/geometry/editor.less

[nathanlesage]

As a short explanation: I don't set a max-width on the text itself, but handle this using margins and paddings:

[samarulmeu]

Thank you!
I manage to get what I wanted by having margin: auto on .CodeMirror-sizer

[HendySutarto]

Adding to @nathanlesage above, here's my implementation on Custom CSS:

.CodeMirror-lines {
  margin-left: 500px; 
  padding-right: 500px;
}

[siddacool]

This will solve the issue.

/* Page max width */
@media only screen and (min-width: 1600px) {
  #editor .CodeMirror {
    margin-left: 347px;
  }

  #editor .CodeMirror-scroll {
    padding-right: 347px;
  }
}

[janospower]

For a width that's consistently within the ideal range of roughly 50 ~ 70 characters per line regardless of window size, I've adapted what @siddacool shared like so (Depending on the font you use and your personal preference, you'll have to play with the em value a bit.):

#editor {
  --side-margin: calc( 50vw - 30em ); 
}
#editor .CodeMirror {
  margin-left: var(--side-margin);
}

#editor .CodeMirror-scroll {
  padding-right: var(--side-margin);
}

[nathanlesage]

This solution looks cool, and I might even end up putting this in the distraction free mode (albeit with 55em on monospace fonts because … well, they're monospace) — after all this is what I wanted to achieve with the margins earlier!

[siddacool]

@janospower, It's quite an improvement on the quick and rigid snippet I have posted. 👍