How to: cssclass and readable line length

[jfrancois_michiels]

Hi,

What I’m trying to do

I’m trying to implement this tutorial

Obsidian readable line length

I’m being blocked at the last step where I should enter a body block to format my note.

Things I have tried

I looked to tutorial (especially callouts and css snipset) which I think I understand correctly.
As I don’t know how is called this “body block”, I’m not able to find a tutorial or the topic in the help. All website that I have seen assumes I know how to enter this.

I tried to enter this in the notes. This is obviously not the solution

[!tip] A tip
This is a callout

<p> body { --file_line-width: 1000px> } </p>

my question

can anybody explain me where I should enter this body syntax? Or point me a detailed tutorial?

Thank you in advance

[Pch]

I think you just need to create a .css file in the .obsidian/snippets folder containing, as content :

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

(adapt the 1000 to your desired value)

Once the snippet is enabled, I think it should globally modify the line width .

[jfrancois_michiels]

Hi,

I created the snipset with

.markdown-source-view.readable-line-width .CodeMirror,
.markdown-source-view.mod-cm6.readable-line-width .cm-sizer,
.markdown-preview-view.readable-line-width .markdown-preview-sizer {
  max-width: var(--file-line-width);
  margin-left: auto;
  margin-right: auto;
}

.markdown-source-view.mod-cm6.readable-line-width .cm-content,
.markdown-source-view.mod-cm6.readable-line-width .cm-line {
  max-width: var(--file-line-width);
}

because I want to change the line length per file (and not globally)

[Pch]

Alright, I was mistaken I think …

So, to make this work, per the tuto:

You’ll need to turn off the readable line length setting in Settings > Editor.

So, your whole css snippet should probably look like something like this:

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

.markdown-source-view.readable-line-width .CodeMirror,
.markdown-source-view.mod-cm6.readable-line-width .cm-sizer,
.markdown-preview-view.readable-line-width .markdown-preview-sizer {
  max-width: var(--file-line-width);
  margin-left: auto;
  margin-right: auto;
}

.markdown-source-view.mod-cm6.readable-line-width .cm-content,
.markdown-source-view.mod-cm6.readable-line-width .cm-line {
  max-width: var(--file-line-width);
}

The :

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

… being use to determine the size of --file-line-width (as “readable line length” should be disabled within Obsidian’s settings) and the rest :

.markdown-source-view.readable-line-width .CodeMirror,
.markdown-source-view.mod-cm6.readable-line-width .cm-sizer,
.markdown-preview-view.readable-line-width .markdown-preview-sizer {
  max-width: var(--file-line-width);
  margin-left: auto;
  margin-right: auto;
}

.markdown-source-view.mod-cm6.readable-line-width .cm-content,
.markdown-source-view.mod-cm6.readable-line-width .cm-line {
  max-width: var(--file-line-width);
}

… being use to create the CSS class readable-line-width allowing the per file custom readable length .

Then, to “activate” the readable-line-width in a file, you would need to add a cssclasses property to the note with the value: readable-line-width

[jfrancois_michiels]

Thank you. I followed your instructions. It looks that it applies for any notes whatever the cssclasses property is set to readable-line-width

[Pch]

Hmm … I’m really not well versed in CSS …

What did you set for the value of --file-line-width in the snippet ?
(in this part of the snippet precisely):

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

I’ve tested with 400px and it seems to work from my side …

I mean, here’s the complete css snippet I used:

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

.markdown-source-view.readable-line-width .CodeMirror,
.markdown-source-view.mod-cm6.readable-line-width .cm-sizer,
.markdown-preview-view.readable-line-width .markdown-preview-sizer {
  max-width: var(--file-line-width);
  margin-left: auto;
  margin-right: auto;
}

.markdown-source-view.mod-cm6.readable-line-width .cm-content,
.markdown-source-view.mod-cm6.readable-line-width .cm-line {
  max-width: var(--file-line-width);
}

Here’s now what I see when I don’t have a cssclasses in Properties

And here’s what I see when I add readable-line-width to the property cssclasses

[jfrancois_michiels]

Thank you again very much. It actually works as you described.
I admit I wanted to have something slightly different.

I have only a few notes that I want very wide and customisable, and those will be identified by the cssclass set as readable-line-width.
For all the other notes (more than 500 notes), I want the default behaviour (as if I switch on the option readable line length).

I could add the cssclass=readable-line-width to the 500 notes. But I don’t want to.

I learnt something new today. Thanks.

[Pch]

@jfrancois_michiels

Thank you again very much. It actually works as you described.

My pleasure … Sorry, that it wasn’t exactly what you were looking for …

Maybe it could be worth to look at Efemkay’s “wide views” css snippet
(as it seems to providing more flexibility, through the Style settings plugin)

Wide Views

[ariehen]

@jfrancois_michiels

I have only a few notes that I want very wide and customisable

It seems you may have gotten something already, but you could try this as well using only this snippet (with Readable line length enabled in Settings):

.wideish {
    --file-line-width: 70rem;
}

The value here can also be (e.g.) 1200px or 80%, but % shifts the body text to the left for whatever reason, I just noticed. This will work with almost all themes (not Minimal). Minimal has its own helper classes built-in, but they can be adjusted as well if need be.

All notes will have the readable line length except those with a cssclass of wideish. wideish can be changed to whatever as long as it doesn’t conflict with another cssclass.

[ariehen]

I changed the topic title for anyone searching in the future. It was “How to enter body formatting in a note”