#1

Have you searched for an existing request?

Use case or problem

If the “Readable Line Length” is checked, the max-length is locked( in my case, the value is 700px), and the max-length in the .css will not work. In case the user want to have longer line length, it is impossible.

By uncheck this option and using the css code provided in:

the “Adjustable Readable Line Length” can be implemented. But there should be a more user-friendly way to do this.

Proposed solution

Provide a method for the user to adjust the length of the “Readable Line Length” (may be a little gear icon next to the option button)

Current workaround (optional)

  1. Turing off the “Readable Line Length”
  2. using a customized css
  3. referring to A fix for ugly long lines in fullscreen v2

Related feature requests (optional)

21 Likes
Notes have to much margin in left side
#2

I also want this option

1 Like
#3

Currently, you can use the workaround to fulfill this requirement.

I think the output of an enhanced plugin and the one made by modifying the CSS are the same.

#4

i am using the workaround in this link:
https://forum.obsidian.md/t/a-fix-for-ugly-long-lines-in-fullscreen-v2/1279/21

All the solution will move your scroller from the side to the middle though.
Except this one:

.CodeMirror-lines, .CodeMirror-selected,  .markdown-preview-section {
  max-width: 700px;
  margin: auto;
}

But the .CodeMirror-selected will prevent you from folding heading/indent

#5

The code in your post can move the scroller to the right edge. However, the folding stops working. ( i don’t know the reason)

the following code does not move the scroller, but the folding can work with it.

.markdown-source-view, .markdown-preview-view {
/*.CodeMirror-lines, .CodeMirror-selected, .markdown-preview-section{*/
max-width: 900px;
margin: auto;
}
1 Like
#6

If someone stumbled upon this thread: I have solved it with

.CodeMirror-lines, .CodeMirror-selected, .markdown-preview-section{ max-width: 620px; max-width: 65ch; margin: 0 auto; }

(Ch is a newer CSS property that put the max width per character. The 620px in this example is a fallback.)

Optimal reading length is between 50-75 characters. Depending on the type, width, context, etc.

Till now nothing really broke. Panes work and scrollbar is on the far right.

2 Likes
#7

Will this ever be prioritised? It’s currently a joke on my screen. The text width is either 10% of my screen and 90% of my screen is wasted (Readable: on), or it’s 100% of my screen with zero margin and looks ugly as hell (Readable: off).

More egregious is the fact that “Readable: on” does not take text size into account. So at a reasonable size for my eyes, I’m only getting 20 characters per line, which is not exactly readable. Whether or not we get this option to be more granular, it should always at least exist relative to the text size.

5 Likes
#8

Have you tried turning on readable line length and using the following CSS snippet (activated)?

.markdown-preview-view.is-readable-line-width .markdown-preview-sizer, 
.markdown-source-view.is-readable-line-width .CodeMirror {
    max-width:90%;
}

Fiddle with the max-width if you like.

4 Likes
#9

Thanks for this.

Just want to add (or clarify) that you can also use different unit for the max-width, too.

For example, when I zoom the font really big, I want to reduce the length to 35rem (default is 40 I think).

.markdown-preview-view.is-readable-line-width .markdown-preview-sizer, .markdown-source-view.is-readable-line-width .CodeMirror 
{ max-width:35rem; }

Still, for it to become a stand-alone setting and be able to quickly adjust would be nice.

3 Likes
#10

I also would like to see an adjustable readable line length setting. The CSS snippet all seem to not work too well with v0.12.15 (for example they then further reduce the width of the text when I split the window vertically with pane relief)

How to reduce left padding on mobile when readable line length is on?
#11

Related Is there a way to set "Readable line length" option to a hotkey?

1 Like
#12

Live Preview/CodeMirror 6 changes what classes to use in your CSS snippets. Here’s my example:

obsidian-left-align-cm6.css (github.com)

#13

Hi @kjentech

Changing the margin-left parameter in your snippet seems to have no effect, but changing the max-width does work. Could you please tell me how I can center my text in live-preview, while keeping the custom max-width set in the snippet?

#14

This is the only one really working for me

.markdown-preview-view.is-readable-line-width .markdown-preview-sizer, 
.markdown-source-view.is-readable-line-width .CodeMirror {
    max-width:70%;
}
#15

I think that with ‘is-readable-line-width’ it indicates that the snippet you provided works ONLY when the “readable line length” is enabled.