Adjustable "Readable Line Length"

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.

6 Likes

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

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

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

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

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

1 Like

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

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

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

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

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

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.

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

1 Like

I would greatly appreciate this option.

1 Like

@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

There’s a solution that doesn’t require digging into classes. Obsidian and CodeMirror use CSS variables. I’ve successfully used the following CSS snippet:

:root {
  --line-width: 50rem;
}

@arathunku: Doesn’t work for me. The variable is actually:

body {
	--file-line-width: 750px;
}
6 Likes

This is great to hear! My solution worked with the most recent version at the time. I assume --file-line-width is now for 1.0.0?

I’ve just spent a silly amount of time bouncing between different threads trying to work out what I’m doing wrong, and trying numerous bits of code along the way only to find that I should have read the rest of the thread to find the code that does work (and then, for some reason, doesn’t work for me still).

I am starting to think I must have a plugin overriding the functionality.

I am using the Full Screen Mode Plugin to make the currently selected document exclusively full screen. I have tried with Minimal and Default themes. Maybe Style Settings or Minimal Theme Settings? Neither have exposed this variable for adjusting as far as I can see though, but I’m still new.

Ideally, when using non full screen mode, I want to either turn off readable line length or adjust it to fit a percentage of most of the size of the window.

When using full screen mode (wide screen monitor), I want to limit the width of the text and hide the scroll bar (only in this single document mode, ideally).

The simplest way to achieve this is to set the width of the text to what I want in full screen mode, and just be happy with that being the same maximum size when working in regular mode - and that probably would be fine, too.

I am able to enable, load and refresh CSS snippets in the .obsidian\snippets folder, but none of the snippets I find on here seem to function for this.

Has anyone got this reliably working now, and if so, pretty please let me know how?

Edit: Once again I’m a noob. Somehow I turned off Readable Line Length and didn’t check it while testing CSS for the past hour. Yeesh! But for some reason, none of the code is still working. I am trying to figure out what other nooby things I am still doing wrong.

Edit 2: The only code that seems to work for me now is:

body {
–file-line-width: 750px;
}

But the Minimal Theme or Minimal Theme Settings override this somehow.

1 Like

Can also confirm I am triple the goose after not being able to figure this out for the past hour:

If you make sure to enable Readable Line Length and don’t somehow turn it off by accident, Minimal Theme Settings has several ‘Line Width’ settings that do all this work for me.

Love this place, not so much a fan of how I stumble over my own feet, but hey XD