Ruled paper background for notes (css?)

[aviv.ix]

Things I have tried

I haven’t tried much mostly because I don’t really understand how Obsidian templates/css works.
I search the forums but ‘ruled lines’ or ‘templates’ don’t give me what I am looking for. I don’t know how to search for this. Sorry.

What I’m trying to do

I want to create a template for notes which has ruled lines (like ruled paper). This is more than an aesthetic thing as it greatly helps me read through notes (I follow the line, otherwise it is quite difficult to read as I miss which line I am at).
I don’t know if this can be accomplished in Obsidian and if can be is it through a css-snippet or a template or a plugin?
Thank you!!

Obsidian has been a game-changer to keep track of things and jotting things down. I am just starting my PhD and reading through papers is a chore (I usually print them out and draw lines to help me read). If you have some hack to get ruled lines on a pdf, that would be a great help too!

[holroy]

I’ve played around a little, and found some alternatives. Not sure if any are just as you’d like them, but try them out, and see what fits your style.

Alt 1: Underline everything

Since the font and text varies on a page, you can’t have ruled paper per se, but you can underline every text, which in most cases are not a wanted option. So I wouldn’t publish stuff where everything is underlined, but you do state that you need it to help you read through notes.

One way to underline text is through text-decoration, see CSS text-decoration property. This allows for various options as to how it looks.

There does exist other options, like doing box-shadows, and other CSS-hacks. But this is a somewhat simple, and straight-forward way of doing it.

How to add CSS snippets

To test out the various CSS snippets, you need to save the CSS code in a pure text file, like vault/.obsidian/snippets/underline.css. When you’ve created that file, you can go to Settings > Appearance (near the bottom) > CSS snippets, and enable your snippet, aka underline. If you later on decide to try variations, you can just edit this file, and save it. The changes should be visible almost immediately.

So the first snippet to try out would be:

.cm-content, 
.markdown-preview-view {
  text-decoration: underline grey solid 2px ;
} 

Alt 1B: Underline particular notes

If you would like most notes not to have either of these alternatives, and just trigger it occasionally, you could change the CSS slightly, and add a cssClass to the frontmatter of the note you want underlined.

Then the CSS would look like this:

.underlined .cm-content, 
.underlined.markdown-preview-view {
  text-decoration: underline grey solid 2px ;
}

Note that in the first selector there is a space after .underlined, whilst in the second line there shouldn’t be a space after it.

And in each note you want to be underlined you’d add the following at the very start of the note:

---
cssClass: underlined
---

(If there is other stuff in the frontmatter, then just add the cssClass line )

Alt 2: Change line-height of the text

To be having everything underlined is somewhat of an eyesore, and I thought other options to help keeping track of the current line. One idea which came to my attention is to increase the line-height. Then each line would separate a little from the next one, and I imagine it would be easier to keep track of the current line.

If you’d like to try this out, you could use something like the following CSS code (with or without the .underlined like previously described):

.cm-content, 
.markdown-preview-view {
  line-height: 2.2em;
}

Of course you’re free to change the line-height to suit your needs, or change the colors and style of the underline. Just play around with it until you find something you’re comfortable with.