A fix for ugly long lines in fullscreen v2

Share & showcase
23

Whose font? :thinking:

24

I was responding to the OPs example. In the photo, I liked the font.

25

I think it’s Lato.

26

My Font:

Header: Avenir (It’s clean and looks cool)
Body: Open Sans (its easy to read)

27

A post was split to a new topic: Can Obsidian open multiple edit panes simultaneously?

28

So this is a nice solution for the preview mode; I can choose the max-width of the text, and the scroll bar is on the far right. However, now, in source view I have two scroll bars which is pretty ugly. Is there any way for edit mode to have this same feature (user specified width, scroll bar on the far right)?

.CodeMirror-scroll, .markdown-preview-section {
    max-width: 40rem;
    margin: auto;
}
29

This thread represents quite an old problem + solution. Have you tried the “Readable line length” setting in Preferences → Editor?

1 Like
30

I don’t know if this is an intended behavior or design prerogative, but should the “readable line length” take into consideration the font size used in the editor/preview mode? I’m using a larger font because I’m getting a little blind, but due to the extreme width limitations in line length, I find myself with lines that have very few words.

1 Like
31

Good point —tagging in @Silver for clarification!

32

I’m having a disproportionate amount of trouble selecting the sapan inside a
“CodeMirror-line”

<pre class=" CodeMirror-line " role="presentation">
<span role="presentation" 
 style="">||||||||||||||||||||||||||||||||||||||||||||||||||||||||||~
</span></pre>

The CSS above is suppose to brake at the “~”.
I’m a screenwriter and my notes requiere a limit on characters per line.

I’ve tried this so far:

.CodeMirror-line span{
   max-width: 570px;
}

This shouldn’t be this hard. I’m definitely doing something wrong.

33

@KauDerK: if I understand your issue, you could try temporarily disable the span by deleting the relevant <, make your alteration, then put the < back in.

1 Like
34

I’m sorry I don’t totally follow, I’m that skilful at CSS.
" deleting the relevant <" do you mean: the actual CSS snippet on the inspector window?

35

@KauDerK: there is no snippet in the inspector window. But that is not what I mean anyway.

In the code you posted there is <span role: delete the <, make your amendment, then put < back.

If that does not make the selecting any easier, take out the < in <pre class too, then put it back.

36

Hi everyone,

Trying Obsidian right now, getting some customization setup and I got into this amazing conversation about the line width with the scrollbar.

I believe a better solution would be changing the default –file-line-width property from body element, as follows:

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

This will keep the scrollbar on the right place, while it will make the content width larger.

Sorry for reviving the post, but I thought this could help somebody.

Thanks!

7 Likes