How to get CSS Snippet into correct place on iPad/iPhone

What I’m trying to do

I wanted to use a CSS snippet to put white space above and below a paragraph, so that I don’t have to manually put in a space. I understand that snippets are held at current_vault/.obsidian/snippets

So I figure I’ll use Notepad on windows to create obsidian.css, then I’ll email it to myself, then I’ll download it to the iPad and use the Files app to move it to the correct directory on iCloud.

But I don’t see any .obsidian directory inside my vault. I guess the dot means its hidden. I don’t see a way of unhiding it.

How can I do this more easily?

Thank you,

Roger

If you also have the vault on your PC and are syncing them, you can just add it on the PC.

I don’t have my PC setup to sync Obsidian. Needs to be an all iPhone/iPad solution.

Hopefully this can be set per theme in the next version of Obsidian. A paragraph is an object, seems like it would expose properties, like an object, and that one of those properties would be spacing above and below. The whole purpose is to make the paragraph appear as a logical unit to the eye, just as it is in the mind.

Roger

Ok, for the main question:

But for what you’re trying to use it for, note that typing blank lines is fundamentally how you mark paragraphs in Markdown. If you don’t type blank lines, you don’t get paragraphs.

You may be able to style your text in a way that puts space between adjacent lines (if you can somehow target the “paragraphs” but not list items and whatnot). But if so your “paragraphs” won’t be marked as paragraphs in the underlying HTML when you export, and if you copy-paste from Reading View to plain text there won’t be blank lines between the “paragraphs”.

Maybe none of that matters to you, but FYI.

You’re right, it doesn’t matter to me. That’s because I want a word processor that understands and displays the paragraph as a logical unit, to both the mind and the eye.

You’d think there would be a community plugin for this, so that it works across all templates. Then you could just toggle it on and off.

So maybe there’s another solution. My understanding is that Markdown explicitly allows HTML. So is there somehow a way to hide a stylesheet at the beginning of the document, so that I don’t have to mess around with trying to find hidden folders on the iPad. Perhaps embedding the stylesheet inside the HEADER tags?

Roger

I’m not at all surprised there isn’t a plugin that replaces Markdown’s basic syntax with a complicated, less compatible illusion. :slightly_smiling_face:

But it can probably be done, because Obsidian lets you do a lot.

I think you can only embed style sheets in the HTML head element, which I’m pretty sure is outside the editable area of the note.

If you’re willing to pay, Textastic makes it easy to access the hidden folder. A-Shell is less easy, but is free.

1 Like

If you want a word processor, there are LOTS to choose from. I recommend Mellel. Obsidian is a plain text processor that uses Markdown, and is extensible using CSS. it is NOT a word processor. iPad apps are very sandboxed by Apple. It make it difficult.

Actually, if you look at the Wikipedia definition of word processor, Obsidian qualifies. That doesn’t mean it’s not more than a word processor, it can be multiple things. For me, it definitely operates as a word processor. The Wikipedia definition is “ A word processor (WP )[1][2] is a device or computer program that provides for input, editing, formatting, and output of text, often with some additional features.”

Works for me.

I have Textastic. Apparently you have to create the .obsidian/snippets directory inside your vault, is that right?

Roger

That’s the correct location for CSS snippets, yes. We used to be able to add CSS directly in the note, but I don’t think you can anymore, because html gets sanitized for security. There may be some small subset that still works directly in the note.

Yes, it doesn’t only allow html; Markdown is a syntax for generating html. If you were on desktop, you could open the developer console, and see the underlying html and css that gets generated, which makes it easier to write snippets. I’m not sure if you can do that on mobile.

Your snippet will not be operating on <p> elements. You’ll likely need to add spacing to a <br> element. This will likely be the only html separating your lines if you don’t add a space.

One more thing: In case you haven’t already, make sure in your settings that you have Editor → Strict line breaks checked OFF. Otherwise, your single line breaks will be ignored, and you won’t even have the <br> tag. (I assume if you write per-line that you’ve already done this.)

1 Like