Obsidian like iA Writer - the easy way

[emptysands]

Thanks @jwl.

[CawlinTeffid]

Quattro defaults to bold because of a metadata bug in it. Until iA finally get around to fixing it, you can fix it yourself: https://github.com/iaolo/iA-Fonts/issues/50

[bonsaibusch]

The function I miss especially after switching from IAW to Obsidian are the simple shortcuts to make headings. So: cmd+1 for H1, cmd+2 for H2, etc.

Does anyone maybe have an idea how I could replicate this, because I haven’t found a way or plugin to accomplish this yet.

[BarryPorter13]

If you have Alfred or Text Expander you can make your own Hotkey that would translate your input (cmd+1) to *, (cmd-2) to ** etc

[wpbloyd]

I am having some problems setting up the theme in “editor” mode. The result is that the headings do remains quite small. Example (same note: right preview, left edit) :

In the picture the problem is quite visible, as the first line is heading 1 and the second is at heading 2, but no change appears in-between the two. No problem for the preview (right)

Any idea what I need to change? I followed up the procedure indicated in the first post

[MarcusM]

wpbloyd: I noticed the same issue (headings small in editor mode).

A workaround is to enable the legacy editor (Options > Editor > Use legacy editor), which trades Live Preview for “better compatibility with some older plugins, themes, and snippets.”

This is not ideal, but it points to the possibility of a solution.

[CawlinTeffid]

One thing I miss from iA Writer is having the top bar scroll out of the way. I posted a feature request for it:

Option to show/hide top bar(s) when note is scrolled

Use case or problem I’d like more screen space on mobile when typing on the screen keyboard, and less interface clutter when I’m drafting text. I especially want this on my tablet, where the double top bar plus mobile toolbar really cut into the half of the screen left by the keyboard. It would be nice to have in desktop too but less important. Proposed solution Scroll the top bar(s) out of view when scrolling the page up (moving the text upward and the view downward) and reveal it again whe…

I believe it should be pretty easy to do as a plugin, but I’m not (yet?) a plugin-maker.

[huw]

A few snippets I use:

All headings are just normal-sized, bold text

I really missed this from Writer, it just didn’t look right otherwise.

body {
    --h1-size: 1em;
    --h2-size: 1em;
    --h3-size: 1em;
    --h4-size: 1em;
    --h5-size: 1em;
    --h6-size: 1em;
    --h1-line-height: var(--line-height-normal);
    --h2-line-height: var(--line-height-normal);
    --h3-line-height: var(--line-height-normal);
    --h4-line-height: var(--line-height-normal);
    --h5-line-height: var(--line-height-normal);
    --h6-line-height: var(--line-height-normal);
    --h1-weight: 800;
    --h2-weight: 800;
    --h3-weight: 800;
    --h4-weight: 800;
    --h5-weight: 800;
    --h6-weight: 800;
    --h1-variant: normal;
    --h2-variant: normal;
    --h3-variant: normal;
    --h4-variant: normal;
    --h5-variant: normal;
    --h6-variant: normal;
}

Slightly looser letter spacing

iA Writer applies 1px extra letter spacing at all text sizes, which I like the look of.

.cm-editor,
.cm-header-1,
.cm-header-2,
.cm-header-3,
.cm-header-4,
.cm-header-5,
.cm-header-6 {
    letter-spacing: 1px;
}

Normal-sized footnotes, code, etc.

For all other elements:

body {
    --font-smallest: 1em;
    --font-smaller: 1em;
    --font-small: 1em;
}

Outdented heading hashes

iA Writer shows heading hashes (#) outside the main body, to the left. For me, this helps fix the visual flow a bit when I’m editing in Source Mode. This snippet isn’t perfect, however—it’ll overlap with the folding indicator at some text sizes.

.HyperMD-header .cm-formatting-header:first-of-type {
    position: absolute;
    transform: translateX(-100%);
}

Line width & height

iA Writer enforces 64 characters per line, with a maximum line width of 80% at large sizes. It also displays all lines at 1.8 height. You can mostly set these through Minimal Theme Settings, or use this snippet:

body {
    --line-width: 64ch;
    --line-width-wide: 64ch;
    --line-height: 1.8;
    --max-width: 80%;
}

To override Minimal Theme Settings, you can just change the selector to body.minimal-theme.obsidian-app (or something else more specific than body.minimal-theme). FWIW, in practice I found that 70ch actually let me fit 64 0s on a line; I assume that’s just a CSS thing.

Link colours

iA uses faint text for links. Specifically, the body text is in the normal text colour, and all the other formatting is in the faint colour. So:

body {
    --link-external-color: var(--text-faint);
}

.cm-link:not(.cm-formatting):not(.cm-formatting-link) {
    --link-external-color: var(--text-normal);
}

[huw]

FWIW the line height of 1.8 and the letter spacing only apply to iA Writer Duo. If you’re using iA Writer Quattro, the line height is 1.7 and the letter spacing isn’t needed.