Canvas card YAML frontmatter manifests as a blank first line (padding, space) in reading mode

Bug reports
, ,
1

Bug description

When viewing cards in a canvas, cards with YAML frontmatter have a blank initial line that pushes the start of the card’s actual content to the second line. This differs from regular notes, where YAML frontmatter is completely zero-impact in reading mode (i.e., two notes with identical content would appear the same in reading mode even if one of the two also had YAML frontmatter).

Steps to reproduce

  1. Add a card to a canvas with at least one line of content (e.g., regular text)
  2. Add a YAML frontmatter section to the card
  3. Click out of the card to exit editing mode

Expected result

Frontmatter section turns invisible in reading mode (i.e., when card is not being edited); its presence has no impact on the line positions of the card’s content.

Actual result

Frontmatter section turns invisible in reading mode but appears to manifest as a single blank line before the card’s content, causing the content to begin on the card’s second line.

Environment

SYSTEM INFO:
Obsidian version: v1.2.3
Installer version: v1.1.9
Operating system: Darwin Kernel Version 21.6.0: Sun Nov 6 23:31:16 PST 2022; root:xnu-8020.240.14~1/RELEASE_X86_64 21.6.0
Login status: logged in
Catalyst license: insider
Insider build toggle: on
Live preview: on
Legacy editor: off
Base theme: dark
Community theme: none
Snippets enabled: 0
Restricted mode: on

Additional information

  • The screenshot below shows this behavior in the sandbox vault. The card being edited at the top becomes the bottom-left card when no longer being edited. Note the placement of the word “Text,” which is shifted lower compared to an equivalent card with no YAML frontmatter (bottom-right).
  • I’ve duplicated this behavior in macOS, iOS, and Windows.

image

3 Likes
2

Just to be thorough and sure, I repeated the test from the screenshot with properly formatted YAML and got the same result.

Anyone also seeing this or able to duplicate?

1 Like
3

thanks

4

Same here. A minor issue but very annoying. Does anyone have a fix?

5

The issue happed more serious after I updated to v1.3.7

See as the picture:

Snipaste_2023-08-01_21-09-12
Snipaste_2023-08-01_21-09-12847×208 9.71 KB

6

I found a decent workaround using the Minimal theme with the Style Settings plugin but it does affect the styling of notes outside canvas.

Go to Style Settings plugin > Minimal > Text > and set Heading Spacing to 0 (default is 2em)

7

Description

When adding a note that has a frontmatter into a canvas, and the note starts with a heading, there’s gonna be some extra spacing before the heading, that would not be there if the note had no frontmatter.

grafik
grafik807×398 9.37 KB

This happens because there’s a CSS snippet in place that adds a margin-top to any h1-6 that’s inside a div which directly follows a div that has some content (see below).

Steps to reproduce

In an empty vault, create two notes. One should have some frontmatter, followed by a heading, the other one should start with a heading.

Create a new Canvas, and embed both notes. You should see that the note with frontmatter has more margin-top on the actual h1 than the note without FM.

Additional Info

Obsidian v1.5.3
Installer v1.4.13
Windows 10

Additional files

Thesee two example notes can be used to reproduce the issue:

Note with Frontmatter.md:

---
---
# Note with Frontmatter

Note without Frontmatter.md:

# Note with Frontmatter

The CSS snippet causing the bug, from app.css:8735. The h1-6 should have a margin-top of 0 instead for visual consistency.

.markdown-rendered div:has( > :is(p,pre,table,ul,ol)) + div > :is(h1,h2,h3,h4,h5,h6) {
    margin-top: var(--heading-spacing);
}
1 Like
8

This minor issue still exists in Obsidian 1.5.12. I believe underlying reason is that the render handling changes to rendering/styling for a normal note whenever frontmatter exists, even if it’s actually only a canvas card.

As a workaround for myself, I use the snippet in @Sirs0ri’s post, but constrained to the canvas nodes only. I also add p to the inner selector so that it handles cards and notes that don’t have a heading or similar at the start.

.canvas-wrapper
.canvas-node-container
.markdown-rendered
div:has( > :is(p,pre,table,ul,ol)) + div > :is(h1,h2,h3,h4,h5,h6,p) {
    margin-top: 0;
}
1 Like
9

This is fixed in v.1.7.1 for notes.

Note that we don’t currently support/process frontmatter in cards.