Configurable line-length for Editor

[RoepLuke]

Hello there,

I have had a look through previous issues regarding the same broad topic, but as those are all currently closed, I'd like to open one here again. My Feature request is about the current Limit on the amount of characters/pixels in one Line in the Editor.

Related Issues I found: #24 #125

I can understand the Aspect of this setting currently being at about 80–120 characters (or is it now based on pixels?) because experts say that it should be, but not everyone wants to publish his/her work and reasonably might prefer to use more or less than (in my case) 1/3 of the screen width on a 15" Full-HD landscape display.

Describe the solution you'd like ~I'd like to be able to set the line-length/padding either from the Admin Settings or by the User in the Personal Settings.~ Alternatively, a Slider on the Bottom of the Editor View that defaults to the currently fixed amount of characters and could be dynamically adjusted would be great.

Describe alternatives you've considered Setting my browser to 130% Zoom, which only solves the Issue of "wasted" horizontal space, but not the Issue of not being able to fit more Information in one line (for example in Tables with more than 4 columns).

Additional context Default View (:root --text-editor-max-with: 670px) at 100% Zoom

Default View (:root --text-editor-max-with: 670px) at 133% Zoom

Modified View (:root --text-editor-max-with: 1200px) at 100% Zoom

Thank you very much!

Post Edits:

• Added physical Display Size
• Changed wording from amount of chars to padding
• crossed out "preferred" solution

[juliushaertl]

@nextcloud/designers This seems to be a reoccurring issue that bugs users. Not sure if we want to have a setting though.

Notion for example has two modes that can be toggled and are remembered per document:

[marcoambrosini]

I think it's ok to allow users to do that

[nimishavijay]

@jancborchardt what are your thoughts here? In the past we have avoided going above a certain width for readability. Notion and Confluence also have this option and the point about Tables and images being cramped makes sense for big screens.

[arnowelzel]

Using CustomCSS you can apply the following rules to get a maximum width of 960px (or apply any value you prefer) - not perfect yet, since table of contents will not work correct then, but otherwise usable:

:root {
    --text-editor-max-width: 960px !important;
}

.page-title, div.editor {
    max-width: 960px !important;
    margin: 0 auto;
}

I also changed the default text size to be 16px which is also much easier to read for me.

[arnowelzel]

@jancborchardt what are your thoughts here? In the past we have avoided going above a certain width for readability. Notion and Confluence also have this option and the point about Tables and images being cramped makes sense for big screens.

The default size of 670px is roughly about 41em in standard text size of 16px - but the editor even uses a smaller default font size (14px), so it may be about 47em per line.

Also see https://baymard.com/blog/line-length-readability where a length of 50-75 characters per line is also acceptable. In many cases I find 960px for a 16px font also very usable. Since the line height in the editor is already 150%, this should not be major issue.

And when talking about "readbility": fonts for regular text should not be smaller than 16px. This is the default text size in most browsers for a good reason.

About tables: I know, there are technical limitations as well and that is not easy to implement - but I would prefer having tables without any width limitation at all and using the available width. Confluence for example has setting for that to display tables at 100% width even when the document itself is narrower to stay readable.

[juliushaertl]

Apparently we use a standard font size of 15px, so having 14px in the editor is actually a bug. I remember some discussion to also increase it to 16px but cannot find the ticket in server for that.

@jancborchardt Could you have another look at the above discussions?

[arnowelzel]

Apparently we use a standard font size of 15px, so having 14px in the editor is actually a bug. I remember some discussion to also increase it to 16px but cannot find the ticket in server for that.

@jancborchardt Could you have another look at the above discussions?

I don't know exactly where the 14px come from, but I added some custom CSS to have 16px as default in the editor and 14px for code and preformatted sections, since this fits better to the regular text:

div.ProseMirror p,
div.ProseMirror th,
div.ProseMirror td {
  font-size: 16px;
}

div.ProseMirror code,
div.ProseMirror pre {
  font-size: 14px;
}

[juliushaertl]

Pushed a small PR for this in https://github.com/nextcloud/text/pull/4644, so also changing it through the CSS variable is properly adapted for now :)

[juliushaertl]

First iteration to bring this to collectives is in https://github.com/nextcloud/collectives/pull/874

@mejo- Maybe this one is a good follow up then in text.

• [ ] Needs decision if we persist it only in the browser or also in the file (e.g. frontmatter)
• [ ] Make sure that state is shared between collectives/text

[evilJazz]

The following is what I am using in conjunction with the CustomCSS plugin for now. This also takes care of the outline to the left of the document (if enabled). Currently fixed to max width of 1600px. z-index Patch to get outline clickable again. TODO: Using variables and making it pretty without the !important BS

.text-editor__content-wrapper {
  display: unset !important;
}

.editor__content {
  max-width: min(1600px, 100vw - 300px - 40px) !important;
  margin: 20px auto auto 300px !important;
  width: unset !important;
}

.text-editor__content-wrapper:not(.--show-outline) .editor__content {
  max-width: min(1600px, 100vw - 40px) !important;
  margin: 20px auto !important;
}

.editor--outline {
  z-index: 100000;
}

[modernNeo]

now that https://github.com/nextcloud/collectives/pull/874 has been merged and https://github.com/nextcloud/collectives/issues/242 has been closed, I was wondering what is left for https://github.com/nextcloud/notes to get the text-width feature toggle?

[juliushaertl]

I've been discussing this today with @jancborchardt and we came to the agreement to:

• Add a global setting for the default page width per user be either full page or the existing size
• Allow to toggle the width per document overriding the user setting (which should be persisted in the markdown frontmatter)

[burrima]

Hi, is there any update on this? I personally think it would really be helpful, especially in code blocks and tables which might be a bit wider than 670px. I am thinking of moving my personal wiki content to Nextcloud, but this is still a thing which makes me hesitate. I've seen above work-around with CSS - but I prefer proper solutions over work-arounds :-)

A big thank you to the devs who are investing their time and effort into Nextcloud!