Changes the readable line length in Obsidian Notes. Tested in Obsidian v1.0.0

readme.md

Changes the line length in Obsidian Notes. Tested with Obsidian v1.0.0

See also: https://forum.obsidian.md/t/adjustable-readable-line-length/7564/6

Note: For this to work the "readable line length" property in settings has to be enabled (as expected). As for Obsidian v1.0.0 the developers simplified the use to just one variable (see below). If you use an older version have a look at https://gist.github.com/vii33/f2c3a85b64023cefa9df6420730c7531/f4ea845b240e94c9fcd47d456340f78208dab38f

700px width is the default, just adjust the number below. Pixels (or percentage) are units that enable a width independent from the number of characters (good when adjusting zoom level / font size). For fixed amount of characters use rem, e.g. 70rem

obsidian-vii-adjustable-readable-line-length.css

/* Changes the readable line length in Obsidian Notes. Tested in Obsidian v1.0.0
See https://gist.github.com/vii33/f2c3a85b64023cefa9df6420730c7531/f4ea845b240e94c9fcd47d456340f78208dab38f
*/

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

.markdown-source-view.is-readable-line-width .cm-content doesn't exist anymore
I think it should be now:
.markdown-source-view.is-readable-line-width .CodeMirror

I've used:

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

Obisidian and CodeMirror use CSS variables.

I've used:

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

Obisidian and CodeMirror use CSS variables.

I tried that solution but no changes occurred

It works for me. Thanks!

In case helpful to anyone...
I've been using variations of the above snippet for some time. After Obsidian 1.0, I had a hard time getting a custom width to consistently work. Played around and came up with the following simple solution to replace all of the above. -- limited testing

/* Custom Line Width */
body {
	--line-width: 60rem !important;
	--tab-stacked-pane-width: 850px; /* Optional pane width increase */
}
/* Custom Line Width - fixes custom html elements except dataview plugin which this negatively impacts */
.markdown-source-view.mod-cm6.is-readable-line-width .cm-embed-block > div:not(.block-language-dataview) {
	max-width: 100%;
}

In case helpful to anyone... I've been using variations of the above snippet for some time. After Obsidian 1.0, I had a hard time getting a custom width to consistently work. Played around and came up with the following simple solution to replace all of the above. -- limited testing

/* Custom Line Width */
body {
	--line-width: 60rem !important;
	--tab-stacked-pane-width: 850px; /* Optional pane width increase */
}
/* Custom Line Width - fixes custom html elements except dataview plugin which this negatively impacts */
.markdown-source-view.mod-cm6.is-readable-line-width .cm-embed-block > div:not(.block-language-dataview) {
	max-width: 100%;
}

Hello! I just tried to use this snippet and unfortunately it didn't work :/. Just tested with both reading and live preview mode and it had no effect. I'm using the obsidian default theme and the 1.0 version too. Do you have any idea of what could it be?

In case helpful to anyone... I've been using variations of the above snippet for some time. After Obsidian 1.0, I had a hard time getting a custom width to consistently work. Played around and came up with the following simple solution to replace all of the above. -- limited testing

/* Custom Line Width */
body {
	--line-width: 60rem !important;
	--tab-stacked-pane-width: 850px; /* Optional pane width increase */
}
/* Custom Line Width - fixes custom html elements except dataview plugin which this negatively impacts */
.markdown-source-view.mod-cm6.is-readable-line-width .cm-embed-block > div:not(.block-language-dataview) {
	max-width: 100%;
}

Hello! I just tried to use this snippet and unfortunately it didn't work :/. Just tested with both reading and live preview mode and it had no effect. I'm using the obsidian default theme and the 1.0 version too. Do you have any idea of what could it be?

Hey, they changed --line-width to --file-line-width. That's why it's not working. Here's the snippet I used that worked for me in Obsidian v1.

body {
  --file-line-width: 50rem;
}

In case helpful to anyone... I've been using variations of the above snippet for some time. After Obsidian 1.0, I had a hard time getting a custom width to consistently work. Played around and came up with the following simple solution to replace all of the above. -- limited testing

/* Custom Line Width */
body {
	--line-width: 60rem !important;
	--tab-stacked-pane-width: 850px; /* Optional pane width increase */
}
/* Custom Line Width - fixes custom html elements except dataview plugin which this negatively impacts */
.markdown-source-view.mod-cm6.is-readable-line-width .cm-embed-block > div:not(.block-language-dataview) {
	max-width: 100%;
}

Hello! I just tried to use this snippet and unfortunately it didn't work :/. Just tested with both reading and live preview mode and it had no effect. I'm using the obsidian default theme and the 1.0 version too. Do you have any idea of what could it be?

Hey, they changed --line-width to --file-line-width. That's why it's not working. Here's the snippet I used that worked for me in Obsidian v1.

body {
  --file-line-width: 50rem;
}

Correct, that's the Obsidian variable according to the source code inspection.

In case helpful to anyone... I've been using variations of the above snippet for some time. After Obsidian 1.0, I had a hard time getting a custom width to consistently work. Played around and came up with the following simple solution to replace all of the above. -- limited testing

/* Custom Line Width */
body {
	--line-width: 60rem !important;
	--tab-stacked-pane-width: 850px; /* Optional pane width increase */
}
/* Custom Line Width - fixes custom html elements except dataview plugin which this negatively impacts */
.markdown-source-view.mod-cm6.is-readable-line-width .cm-embed-block > div:not(.block-language-dataview) {
	max-width: 100%;
}

Hello! I just tried to use this snippet and unfortunately it didn't work :/. Just tested with both reading and live preview mode and it had no effect. I'm using the obsidian default theme and the 1.0 version too. Do you have any idea of what could it be?

Hey, they changed --line-width to --file-line-width. That's why it's not working. Here's the snippet I used that worked for me in Obsidian v1.

body {
  --file-line-width: 50rem;
}

Wow, that's a pretty simplified snippet. Just tested and it worked, thank you! I hope Style Settings developers add this into their plugin

No problem :) Glad it helped!

Can someone clue me in on what file I add this css code to to make this work?
Thanks!

Can someone clue me in on what file I add this css code to to make this work? Thanks!

@GafferMan : There you go (last paragraphs): https://help.obsidian.md/How+to/Add+custom+styles

Just go to your settings ->appearance. There you can click on a folder icon which brings you to a directory where you can add your custom css files. Don't forget to enable them in the settings afterwards.

what if you are just trying to change this setting on specific pages I attempted adding a cssclass to the page and adding it to the css scriptlet like below. but it doesnt work

.pagefull, body {
  
  --file-line-width: 50rem;

}

Can confirm that following works in Obsidian 1.1.9:
Mind that this only affects Edit Mode.

body {  
  --file-line-width: 750px; /* change width to your wishes */
}

@symonxdd yes any idea how to make it also apply to reading view?

@StrangeGirlMurph took a hot sec, but this combo of style properties seems to do the trick.

body {
    /*Set the width of your desire here*/
    --user-custom-width: 80rem !important;
    /*Code for edit view*/
    --file-line-width: var(--user-custom-width) ; 
    /*Code for live read view*/
    --content-max-width: 100rem !important;
    --content-base-width: var(--user-custom-width);
}

@Nehroz thank you
I actually ended up just using the minimal theme with the minimal theme settings plugin which is amazing and lets me edit all those parameters with ease from the settings :)