Homepage    |    GitHub    |    API    |    FAQ

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.


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.

1 Like

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.

1 Like

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!

1 Like

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.