Max text width for reading pane - userstyle

I find it’s difficult to read when your eyes have to track overly long lines of text.

This:

body { 
	width: 100%;
	padding: auto;
}

div {
	margin: auto;
        max-width: 40em;
}

Makes it look like this instead:

(Add those lines to your userstyle.css in your Profile folder. You can tweak the width by changing the 40. Restart Joplin after saving changes.)

How about making this the default? I see that’s how Bear displays text too, and I agree that’s generally how text should be displayed to be more readable.

Well, I’m all for it. Wasn’t sure about anyone else, so I didn’t wanna push it. I do think it’s a good idea, though.

Yes I can’t think of any drawback with it. Only subtlety is that the text width will need to scale depending on the zoom factor (I guess so).

The only disadvantage I can think of is the readability of code blocks. One might have to scroll a lot to the right and then to the left again.

For standard text this is great though.

If this was to be the default would it not be better to use a percentage for the max-width: value rather than a fixed 40em? I often use Joplin full screen and using the above settings gives a thin strip of text with huge white borders on each side. It also means that I have many more non-wrapping code blocks disappearing off the right side of the page as well as compressed tables because the usable area of the note is so much narrower.

Also, could I suggest that if such a design is to be default, it can be controlled via the client (ie a % width slider and off switch) without having to re-start Joplin.

My concern is that new users who just want a note app they can use straight away will start Joplin, see that the note only occupies a small strip of their large screen, wonder why so much screen “real estate” was wasted, find out they have to learn about CSS to manually edit a config file to stop it, and so give up and find something else.

Hm yeah, the code blocks are not ideal.

Maybe there should be a check box to enable/disable this feature?

When I find the time, I might try to see whether I can exclude code fences (and maybe images) from that restriction, so they’re fully visible, and see whether it’s better that way.

@dpoulton sure, a slider (or something similar) would be ideal.
I do not think a percentage of total width is a good idea, though. The point of this exercise is to keep the lines from being too long to read comfortably; if you base it on screen width, you would still have the same problem on wide screens.

Totally agree. That is why I went on to suggest a slider so the user could set a % suitable for their screen / use case.

Your modified userstyle.css is great for those who have lots of long-form, article-like notes and if you are constraining the width of the text, it makes sense to constrain any other elements (tables, images, code blocks) to match.

After testing your css I saw that it could really help in legibility for long-form text notes or even stored articles. I was just a bit unsure that it would be a good idea to make it the default display style without some very easy way for a novice user to adjust it.

Something like:

I am not a coder so I have no idea if such a thing is possible. But I use Joplin many times a day and it's making this the "default" layout that triggers my "spidey-sense".

Well that's my tuppence*-worth anyway.

EDIT / Clarification:
* Archaic British term for "two pence". Please feel free to insert your local currency equivalent here!

I agree that different text widths are optimal for different type of notes, and they could be a matter of preference. Therefore it would be great to have adjustable width, that one can change on the go, for example from the View menu.