How to: cssclass and readable line length

Hi,

What I’m trying to do

I’m trying to implement this tutorial

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

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 :innocent: .

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)

Alright, I was mistaken I think :sweat_smile:

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 :blush: .

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

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

Hmm :thinking: … I’m really not well versed in CSS :sweat_smile:

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

1 Like

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. :slight_smile:

I learnt something new today. Thanks.

My pleasure :smile: … 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 :woman_shrugging:
(as it seems to providing more flexibility, through the Style settings plugin)

1 Like

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.

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

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.