Let text be wider for bigger screens

[zeroepix]

I'm often getting frustrated when writing notes on my 1920x1080 desktop. I love the app, but the tiny write-space feels like an unnecessary limitation. I know there is fullscreen mode, but I prefer having the note list on the left.

It would be nice to have a clickable option for people who prefer the narrow view, but this is how I've edited my notes.js:

/* center editor on large screens */
@media (min-width: 1200px) {
  .note-editor[data-v-34551322] {
    margin: 0 auto;
    max-width: 75vw;
  }
  .note-container[data-v-34551322]{
    padding-right:0;
  }
}
@media (min-width: 1600px) {
  .note-editor[data-v-34551322] {
    margin: 0 auto;
  }
  .note-container[data-v-34551322] {
    padding-right: 0; 
    transition-duration: var(--animation-quick);
    transition-property: padding-right;
  }
  .sidebar-open .note-container[data-v-34551322] {
    padding-right: 0px;
  }
}

Obviously editing my notes.js file every time there's an update will be painful, so would you consider adding at least an option to enable the above?

[Larsene]

Hi, you can easely change the css style without modifing the notes.js files. Just add the Custom CSS package, then add your CSS in the tools.

With the same tool, you can also change the same limitation for the nextcloud text editor with . .editor__content{}.

I agree, this is so strange on a 3840x2160px if you're using notes as OneNote, but the width limitation appears to be more readable. This is why a Python file is 80 char large, for example.

@stefan-niedermann : why did you thumb-down on this discussion ? Because notes will change for Nextcloud Text tool ? Another reason ?

[stefan-niedermann]

No, no. I just have the opinion, that a wider editable area will distract most users. I know, it looks like wasted space, but long lines are very hard to read because one always have a hughe "eye jump" and one has to really concentrate to find the next line, when they are too long.

I understand the request but i think the majority of the users will not benefit. Also a new option next to full screen has to be maintained, tested and distracts the majority of users.

I think the proposed solution to use the "Custom CSS" app would greatly solve the issue for people who rea) rely on longer lines. Maybe it could even added to the documentation, but only with a hint, that this is not officially supported.

This was by no way meant to be offending :)

@korelstar will have to make the decision, maybe even the @nextcloud/designers @nextcloud/notes will have an opinion whether or not this should be implemented.

[marcoambrosini]

But yeah when thumbing down let's try at least to provide an explanation as it doesn't feel good to be thumbed down without knowing why :)

[korelstar]

I agree with @stefan-niedermann -- if anyone from @nextcloud/designers or @nextcloud/notes has another opinion, please write a comment.

[jancborchardt]

Check the Wikipedia article on line length: https://en.wikipedia.org/wiki/Line_length#Electronic_text

Research on readability of electronic text gives the limits between 55 characters per line as possible minimum and 100 cpl as possible maximum. This is why we go with something inbetween, which is corroborated by the print text readability studies.

Note that the size of the medium is not really mentioned because screen size is really irrelevant here. It is all about the ergonomics and limits of human perception and cognition. Sure lines could be longer on the screen, but making them longer would make them difficult to read.
Much like text could be lighter colored or smaller or thinner, but that would make it less readable too.

[Larsene]

that's right. This is the reason that others notes tools allows more than one column. Perhaps could Notes support more column, to be able to display more content without scrolling ? (I don't know what wikipedia says about scrolling, but this is so boring needed to scroll).

@stefan-niedermann : thanks for your answer and explanation.

[zeroepix]

@Larsene thanks, I've used your suggestion and just changed the custom-css...works a treat!

[reos-rcrozier]

With the same tool, you can also change the same limitation for the nextcloud text editor with . .editor__content{}.

@Larsene any chance you could give a fuller example of how to use the Custom CSS App to make the text editor have a wider text area? I'd like the same, but I'm not sure how to do it from the above.

[steadfasterX]

for those like me (or @reos-rcrozier ) struggling to use the custom CSS workaround - the following worked for me:

1. install custom CSS app
2. go into settings -> Theming and find custom CSS section
3. add + save
   .editor__content{ max-width:60% !important; }

ofc something like .editor__content{ max-width:1000px !important; } would work here as well

thanks to @Larsene for pointing me to this great adjustment! Finally the text app is usable for me.. :)

[doodhout]

Check the Wikipedia article on line length: https://en.wikipedia.org/wiki/Line_length#Electronic_text

Research on readability of electronic text gives the limits between 55 characters per line as possible minimum and 100 cpl as possible maximum. This is why we go with something inbetween, which is corroborated by the print text readability studies.

Note that the size of the medium is not really mentioned because screen size is really irrelevant here. It is all about the ergonomics and limits of human perception and cognition. Sure lines could be longer on the screen, but making them longer would make them difficult to read. Much like text could be lighter colored or smaller or thinner, but that would make it less readable too.

Interesting, but wouldn't it be more democratic to let people at least have a choice? E.g. by defining the width of the window they can define the width of the note.

Perhaps some sane hardcoded widths for mobile views to avoid e.g. having only 15 characters of width when rendered on a smartphone, but those can be isolated using CSS breakpoints. For regular computer screens, having the width be free and bound to the window width yields to more options. People who like 47em width can always emulate this by snapping the window to one half of the screen and perhaps zoom in or out to let it match perfectly.

But right now? Even though there is an objective optimum, it's still annoying to people whose preference falls outside of this optimum that they cannot easily* change this.

*: The suggested workaround is not easy for the lay man.

If this rule cannot be broken, then at least provide the possibility to fill the width of a window in another way, e.g. using multiple columns. CSS Flex should make this very simple.

EDIT: in the meantime I have used the CustomCSS app and added some custom CSS and thereby gotten what I plead for higher up in this comment, so I'm content.

[koying]

@steadfasterX Sooo much better! Thanks a zillion for this workaround for this issue that bugs me basically since the text editor was introduced.
Although the readability aspect is not to be discarded, I'm writing mostly technical doc, and having code line split is definitely not a plus, here.

[dpoerschke]

Instead of patronizing the user, I think it should be possible to configure the width. In my case, the default width is simply too narrow for the content to be displayed.

@steadfasterX thank you very much for sharing this solution! :-)

[psy0rz]

yeah i agree the width is too small. i use the notes to paste screenshots and add some comments.

[juliushaertl]

Relevant upstream issue for the text editor nextcloud/text#4024