Skip to content

Instantly share code, notes, and snippets.

@pmbauer
Last active Feb 11, 2022
Embed
What would you like to do?
fixed-width fonts and ligature preservation in edit mode
:root {
--font-monospace: "MonoLisa", "JetBrains Mono", "Consolas", monospace !important;
--font-family-preview-edit-code: "MonoLisa", "JetBrains Mono", "Consolas", monospace !important;
--text-family-inline-code: "MonoLisa", "JetBrains Mono", "Consolas", monospace !important;
--rb-indent-font-family: "MonoLisa", "JetBrains Mono", "Consolas", monospace !important;
}
/**
* Use fixed-width font for edit mode
*/
.cm-s-obsidian,
.cm-s-obsidian .hmd-fold-html kbd,
.cm-header,
span.cm-strong, span.cm-em,
.markdown-preview-view :not(pre) > code,
.markdown-preview-view pre,
.markdown-source-view.mod-cm6 .cm-scroller,
.cm-hmd-list-indent .cm-hmd-list-indent-1,
.markdown-preview-view.is-readable-line-width .markdown-preview-sizer,
.markdown-source-view.is-readable-line-width .CodeMirror,
textarea {
font-family: var(--font-monospace) !important;
/**
* Preserves ligatures regardless of theme (e.g. Blue Topaz).
* Any value other than 'normal' disables ligatures.
*/
letter-spacing: normal !important;
/**
* MonoLisa script italics
*/
font-feature-settings: "ss01" 1, "ss03" 0, "ss05" 1, "ss06" 0, "calt" 1, "ss02" 1, "zero" !important;
}
/**
* Disable small font for header prefixes in Blue Topas
*/
div.CodeMirror-activeline .CodeMirror-line span.cm-formatting.cm-formatting-header,
div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting.cm-formatting-header {
font-size: 1em;
}
@pmbauer
Copy link
Author

pmbauer commented Nov 23, 2021

CSS contortions, during which we preserve fixed-width fonts and ligatures in edit mode

I prefer monospace fonts for edit mode - both classic and live preview - especially monospace fonts with ligatures: MonoLisa, JetBrains Mono, FiraCode (in ❤️ order). As some themes (looking at you Blue Topaz) blow up ligatures with their pixel-tweaking, I've settled on this CSS snippet to ensure monospace ligatures are working.

This works with a number of Obsidian themes, including Default, Blue Topaz, and Nord.

@pmbauer
Copy link
Author

pmbauer commented Feb 11, 2022

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment