Tasks in callouts: inconsistent starting positions (or margin) between live preview & reading view

Steps to reproduce

In the sandbox vault, create a new note with the following content:

> [!note]
> - [ ] task

Did you follow the troubleshooting guide? [Y/N]

Y

Expected result

The callout and the task in it should be rendered the same both in live preview and reading view and should look like this:

Actual result

In live preview, the left margin of the task item is unnaturally larger than in reading view.

Live preview:

Reading view:

Environment

SYSTEM INFO:
	Obsidian version: v1.5.3
	Installer version: v1.4.13
	Operating system: Darwin Kernel Version 22.6.0: Wed Jul  5 22:22:52 PDT 2023; root:xnu-8796.141.3~6/RELEASE_ARM64_T8103 22.6.0
	Login status: logged in
	Catalyst license: none
	Insider build toggle: off
	Live preview: on
	Base theme: adapt to system
	Community theme: none
	Snippets enabled: 0
	Restricted mode: off
	Plugins installed: 0
	Plugins enabled: 0

RECOMMENDATIONS:
	none

Additional information

It seems that this bug can be fixed by making a few changes to app.css, as I described here:

1 Like

While Live Preview tries to present the same view rendering as Reading View, some inconsistencies will probably always remain. Spacing in particular can differ, since in editing mode it sometimes has meaning that needs to be preserved and sometimes is just hard to manage. I don’t know if the case you’re pointing out is intentional, a side effect (known or unknown), or a bug.

You are right, but at least, I guess callouts are supposed to be displayed the same as in reading view when the cursor is not overlapping with them (as CodeMirror’s replace widgets with their DOM rendered using MarkdownRenderer or MarkdownPreviewView).

In fact, this seems to be fixed just by changing app.css a little bit.

  1. Replace .markdown-preview-view with .markdown-rendered in the following rule:
    .markdown-preview-view .task-list-item-checkbox {
      position: relative;
      top: 0.2em;
      margin-inline-end: 0.6em;
    }
    
  2. Add :not(.markdown-rendered .task-list-item-checkbox) to the following rule:
    .markdown-source-view.mod-cm6 .task-list-item-checkbox {
      top: -0.1em;
      vertical-align: middle;
      margin-inline-start: 1em;
      margin-inline-end: 0.25em;
    }
    
2 Likes

thanks