Novel.css: sample code for Obsidian to display nicely formatted standard book looks

One of the things I mentioned when talking about using Obsidian to write my novels was that I prefer looking at my writing in a book format: I like indents, and I prefer no spaces between my paragraphs unless there’s a section break. In fact, I hate that the core internet design, flush paragraphs, spaces between them, that HTML settled on by engineers.

In a rare moment of feeling ‘old’ and shaking my fist at the clouds, I wish more of internet laid out text more like print. But that’s another cause I’ll be taking up on this site soon for display of my fiction. For now, I wanted to create a CSS snippet that I could drop into Obsidian using its CSS snippets function to change how my fiction is displayed as a I write and edit in Obsidian.

I slapped some CSS in there to create indents, but Markdown asks for an extra space between each paragraph and looks something like this post, or, here is a simple MD viewer/editor with some MD showing:

I can read Markdown and write in raw Markdown just fine, but when lost in fiction flow I prefer it to look like the printed page. So I deleted all the extra lines in my Markdown files and added indents, and got on with using Obsidian. Which was fine until… I needed to export my Markdown.

Now, that extra space is missing for MD to other file translators, so I was having to do a lot of copying and pasting and fixing the formatting to send documents to others. That was less than ideal. I did finally hack together a little script that could do it for me, but it broke, and I realized that by shifting Markdown format, when I used another Markdown reader that wasn’t Obsidian, the text looked wonky.

So I spent a day working on this, and here is the CSS if you want it for your own:

/* ============================================================
   Novel formatting for obsidian — reading view and live preview indented and no spaces...
   Source mode - raw markdown.
   ============================================================ */
/* ---------- Indent paragraphs ---------- */
/* Reading view */
.markdown-preview-view p {
    text-indent: 35px !important;
}
/* Live preview */
.markdown-source-view.mod-cm6.is-live-preview .cm-line:not(.HyperMD-list-line, .HyperMD-header, .HyperMD-codeblock, .cm-line:has(.cm-hmd-frontmatter), .cm-line:has(.cm-meta), .cm-line:has(.cm-comment)) {
    text-indent: 35px !important;
}
/* ---------- Proper paragraphing ---------- */
/* Reading view */
.markdown-preview-view {
    --p-spacing: 0;
}
/* Live preview */
.markdown-source-view.mod-cm6.is-live-preview .cm-line:has(br):not(:has(hr)):not(.HyperMD-codeblock) {
    font-size: 0 !important;
    line-height: 0.2 !important;
}
/* ---------- Scene break spaces ---------- */
/* Reading view */
.markdown-preview-view hr {
    margin-top: 1.5em !important;
    margin-bottom: 1.5em !important;
}
/* Live Preview */
.markdown-source-view.mod-cm6.is-live-preview .cm-line:has(hr) {
    padding-top: 1em !important;
    padding-bottom: 1em !important;
    font-size: initial !important;
    line-height: normal !important;
}

And here’s how it looks in Obsidian for me:

Live preview or edit mode

It looks like a book. I need to adjust the font, but I like the look. And I can edit, type, live in that just happily as I write fiction. And then, when I click back to source mode, I get raw Markdown:

The metadata YAML for the story is in the header, hidden when I am in non-source mode view, but easy to open when needed. When I work in notes, I can remain in source view, but for fiction, I have my more book-looking vibe.

Here are instructions for how to add custom CSS snippets to control how Obsidian looks to you.

So now my Markdown to other document format exporters work exactly as expected.

I just need to go write a script to add the lines back in to my over two thousand notes, novels, and story files in my external brain without destroying any hard work.

That’s today’s work…