Skip to content

Instantly share code, notes, and snippets.

@vii33
Last active November 16, 2024 00:46
Show Gist options
  • Save vii33/f2c3a85b64023cefa9df6420730c7531 to your computer and use it in GitHub Desktop.
Save vii33/f2c3a85b64023cefa9df6420730c7531 to your computer and use it in GitHub Desktop.
Changes the readable line length in Obsidian Notes. Tested in Obsidian v1.0.0

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

/* 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;
}
@StrangeGirlMurph
Copy link

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

@codethief
Copy link

codethief commented Apr 7, 2023

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.

@mapleroyal
Copy link

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

@vii33
Copy link
Author

vii33 commented May 1, 2023

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

@lonelygunter
Copy link

--file-line-width

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

@Marks9999
Copy link

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?

@loikein
Copy link

loikein commented Dec 6, 2023

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

@ai-chen2050
Copy link

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

@wazeerc
Copy link

wazeerc commented Aug 14, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment