Textual presentation

[efrec]

This is a potential enhancement area for the plugin, which I'll demonstrate through my own attempt/struggle. I wanted, rather than a table, to see my note's metadata in a purely textual presentation, like the below, which I'm happy with:

It keeps the expand/collapse behavior of the table:

And the individual key/value pairs:

---

I used Metatable to get a table, then a mile of CSS to get the above presentation to work. I'm absolutely no CSS expert nor fan, but for anyone else's to repurpose, here's how I accomplished the above:

I have the following frontmatter:

---
Alias:      [About, About Me]
Tags:       [meta, design]
Progress:   [initial]
Confidence: [highly likely]
Importance: [2]
Previous:   [%Home%]
Next:       []
---

And this CSS, which again probably has some issues:

/*
 * PLUGIN:
 * Metatable
 */

/* * EXPAND/COLLAPSE * */

/* Get the detail/summary wrapper to work right: */
/* Closed: */
.obsidian-metatable details:not([open]) summary {
  font-size: 0;
}
.obsidian-metatable details:not([open]) summary::marker {
  font-size: 0.9rem;
  color: var(--text-muted);
}
.obsidian-metatable details:not([open]) summary:hover::marker {
  color: var(--text-accent-hover);
}
.obsidian-metatable details:not([open]) summary::after {
  content: "Metadata";
  color: var(--text-muted);
  font-size: 0.9rem;
}
/* Opened: */
.obsidian-metatable details[open] > summary {
  position: relative;
  left: calc(-1rem - 2px);
  padding-right: 1rem;
  font-size: 0;
}
.obsidian-metatable details[open] > summary::marker {
  font-size: 14px;
  color: transparent;
}
.obsidian-metatable details[open] summary:hover::marker {
  color: var(--collapse-icon-color);
}
.obsidian-metatable details[open] > table {
  position: relative !important;
  top: -1.5rem;
}

/* Expand/collapse works only on certain elements within the metatable: */
.obsidian-metatable details[open] th.toggle[part~="collapsed"] + td {
  font-size: 0;
  color: transparent;
}
.obsidian-metatable details[open] th.toggle[part~="collapsed"] + td * {
  display: none;
}
.obsidian-metatable details[open] th.toggle[part~="collapsed"] + td::after {
  content: "...";
  display: contents;
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* * THE METATABLE: TEXT FORMATTING * */
/* Text is slightly smaller than the document style. */
.obsidian-metatable details > table :not(.tag):not(.link) {
  font-size: 0.9rem;
  color: var(--text-normal);
  line-height: calc(1ex / 0.27);
  margin: 0;
  padding: 0;
}
/* No fancy links. They're just broken. Idk. */
.markdown-preview-view .obsidian-metatable details a.internal-link {
  color: var(--text-accent);
  margin: 0;
  padding: 0;
}
.obsidian-metatable details a::before {
  display: none !important;
}
.obsidian-metatable details a::after {
  content: none;
  margin: 0;
  padding: 0;
}
/* Tags get a slight resize. */
.obsidian-metatable details table .tag {
  font-size: 0.88rem;
  padding: 0.4ex 1ch 0.7ex 1ch;
}
/* Headers are lowercase and have an interpunct. */
.obsidian-metatable details table th {
  text-transform: lowercase;
}
.obsidian-metatable details table th::after {
  content: ":";
  font-weight: 600;
  padding-right: 0.8ch;
}
/* Values are italicized; interpunct handled later. */
.obsidian-metatable details table td {
  font-style: italic;
}
/* Numbers are highlighted, tabular. */
.obsidian-metatable details table .value .number {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  /* color: var(--color-green); */
}

/* * THE METATABLE: TABLES AND LISTS * */

/* In general, we are trying to use flexbox with a contents fit: */
.obsidian-metatable details > table {
  display: flex;
  align-items: flex-start;
  flex-direction: row;
  flex-wrap: wrap;
  min-width: none;
  max-width: 100%;
}
.obsidian-metatable details > table * {
  min-width: unset !important;
  max-width: unset !important;
  display: contents;
}

/* Table main rows -> one endlessly wrapping row */
.obsidian-metatable details > table > tr {
  display: contents;
  align-items: stretch;
}
.obsidian-metatable details > table > tr > * {
  display: contents;
}
.obsidian-metatable details > table > tr:not(:first-of-type)::before {
  content: "  ·  ";
  font-weight: bold;
  white-space: pre;
}

/* Lists w/o table entries, w/o key-value pairs: */
.obsidian-metatable details li {
  display: inline;
  align-items: flex-start;
  flex-wrap: wrap;
}
.obsidian-metatable details li:not(:first-of-type)::before {
  content: ",";
  padding-left: 1px;
  padding-right: 1ch;
  display: inline-block;
}

/* Lists of tables -> endlessly wrapping rows, inside parenthesis: */
.obsidian-metatable details li:first-of-type:not(:last-of-type) table::before {
  content: "(";
}
.obsidian-metatable details li:last-of-type:not(:first-of-type) table::after {
  content: ")";
}
/* Empty list items really ruin the overall look: */
.obsidian-metatable details li table:empty::after {
  content: "—";
  color: var(--table-header-color);
}

/* * EXCEPTIONS * */
/* (1) Tags has no header. Todo: they should be on their own line, also. */
/* (2) Progress has no header. */
.obsidian-metatable
  details
  > table
  > tr
  > th:is([title="Tags"], [title="Progress"]) {
  display: none;
}

/* * NOTE FORMAT FIX * */
/* The first heading is pushed way down, now. So: */
.markdown-preview-section > div:nth-child(2):not([class]) + div + div.el-h1 h1,
.markdown-preview-section > div:nth-child(2).el-pre + div.el-h1 h1 {
  margin-top: 0px !important;
}
.obsidian-metatable details:not([open]) {
  margin-bottom: calc(1rem / (1 - 0.24));
}

This is functioning for me in Obsidian v1.0.3 and Metatable 0.14.3. Hope this might help someone else, who may be able to contribute as well.

[arnau]

Hi @efrec thanks for sharing this, I never thought in displaying metadata this way. Quite interesting 💯

[efrec]

Not a problem, I just thought it was neat.

I missed a detail, that the Metatable setting to disable the plugin shadow DOM and CSS ought to be toggled on.