Vertical Lines at `n` characters via custom CSS

Plugins ideas
1

Hi!

I’ve been looking to moving to obsidian for all my notes. It seems super cool.

I’m a strict believer in never doing soft-wrap of lines and manually breaking lines at around 80-90 characters.

In VS code I’ve setup a, visually muted, vertical line at 90 characters.
I’m trying to achieve the same, but have not found a way yet.

Any css wizards on line that can assist?

Photo from VS code to show the desired effect

CleanShot 2023-01-28 at 17.27.51@2x
CleanShot 2023-01-28 at 17.27.51@2x1312×368 67.7 KB

2

A neat constraint!

If you don’t find an answer here, you might also want to ask in the Discord server in the #appearance channel.

3

Hi @rotendahl. I’m still fairly new to Obsidian so I’m not too clear yet on best practices, but perhaps something like this in a CSS snippet (Settings → Appearance) could work. It will only show in the current tab and only in editing / live preview mode (there’s likely no need to show the line in a pane where you’re not editing), though you could show it in all panes by removing .mod-active from the second CSS declaration.

You can make the line darker by increasing the percentage in background-color in the second declaration. You can make the line lighter in dark mode by increasing the percentage in background-color in the last declaration. Finally, you can change the breakpoint by adjusting left: 80ex;.

.cm-content {
  position: relative;
}

.mod-active .cm-content:after {
  position: absolute;
  content: "";
  top: 0;
  left: 80ex;
  bottom: 0;
  width: 1px;
  background-color: rgb(10 10 10 / 10%);
}

.theme-dark .mod-active .cm-content:after {
  background-color: rgb(245 245 245 / 10%);
}
1 Like