Skip to content

Instantly share code, notes, and snippets.

@vii33
Last active April 13, 2024 14:50
Show Gist options
  • Star 21 You must be signed in to star a gist
  • Fork 6 You must be signed in to fork a gist
  • 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

StrangeGirlMurph commented Feb 3, 2023

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

@Nehroz
Copy link

Nehroz commented Mar 4, 2023

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

@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

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