Adjustable "Readable Line Length"

Feature requests
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)

43 Likes
2

I also want this option

3 Likes
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.

1 Like
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.

5 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.

7 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)

2 Likes
11

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

2 Likes
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)

1 Like
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?

1 Like
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%;
}
1 Like
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.

16

Posted solutions didn’t work for me. As @kjentech stated the CSS classes are different in the newer Obsidian versions, so older samples don’t work. Unfortunately that solution also didn’t work because it shifted the text to the to left (as stated in the snipped title), instead of keeping it centered.

I dove into (hopefully) all CSS classes:

Tested in Obsidian v0.14.6, with smaller and bigger line width. All keeps centered.

@Xzs: This should work for you.

6 Likes
17

Is it possible to have a CSS class that we have multiple different line lengths? I have a page for table summaries and I would love to give the table extra margins, but I like the size of the rest of my screens. Using a CSS class would probably be for the best, because I could then control which pages have a large line max and which are constrained to something more text friendly.

18

u can try my css snippet (link below). use MCL Wide Views.css to control wide table only or wide dataview only.

1 Like
19

I would greatly appreciate this option.

1 Like
20

@qwer Thanks, This is only snippet I found which is working properly with Live Preview editor and works with majority of themes.

It would be much better if this is an inbuilt feature, Themes like Things has option to adjust Normal line width but only works on preview mode.

2 Likes