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 in settings (as expected).

700px is the default width, just adjust the number below.

Pixels px (or percentage %) are possible units that enable a width independent from the number of characters (good when adjusting the zoom level or 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;
}

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

FWIW, I use

body {
  --file-line-width: 80ch;
}

to set my line length to 80 times the width of the "0" glyph which, since I'm using a monospace font, means that my line width will be (approximately) 80 characters. For other fonts it might also make sense to try out ex instead (= height of "x" in the current font). Overall, ch and ex give me a much better idea of how long the line is going to be than em or rem.

Where are you guys putting this css to change the appearance?

Where are you guys putting this css to change the appearance?

In Obsidian/snippets. Then the file will be shown in the Obisidan settings menu where you can toggle it on and off. See also https://help.obsidian.md/How+to/Add+custom+styles

--file-line-width

really thx, first snippet I try, that work after only one code change

Hi all,
I would like to have more line length in Obsidian.
I put this into my snippet file:

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

But the width of my editor line length stays always the same. The snippet folder is displays in the preference section. I called the file "mysnippets.css"I also tried 900px without success. In the preference section I turned the "readable Line length" option on an off. What is missing?

Hi, just found out this snippet. I think now you need to add !important for it to take effect, but otherwise still works great in the newest version.
Aka,

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

what if you are just trying to change this setting on specific pages I attempted adding a cssclass to the page a

halo, bro. Have you had it fixed? specific pages works, but not affect other pages

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%;
}

Thanks! This worked for me.