arnau / obsidian-metatable

An Obsidian plugin to display the frontmatter section as a fully expanded table.
MIT License
150 stars 13 forks source link

Feature Request: add possibility to style td and th #11

Closed cbr9 closed 3 years ago

cbr9 commented 3 years ago

Would it be possible to give td and th elements a part="metatable-td" or part="metatable-th" attribute so we can have control over their styling via ::part? I wanted to change some things at the level of td and th, like for example setting overflow: hidden for long URLs (to avoid the scrollbar) and also centering the values (they seem a bit skewed towards the top, not centered, but this may be caused by something else).

This could also apply to other intermediate elements, but I didn't have a use case for it. Is there a technical constraint here somewhere? I tried doing this in developer tools and it worked

Awesome plugin btw, it removes the need for some dataview weird syntax, and makes obsidian closer to some notion functionalities I was used to :)

arnau commented 3 years ago

Hi, sounds like a fairly easy thing to bring in for both keys and values. As long as you intend to affect only th and td you'll have control over their presentation.

The technical limitations (by design) of ::part is that you can only affect the element with the part, so you can't influence its descendants. In the case of say having a <td part="value"> you wouldn't be able to redefine properties of e.g. the child <a >. Well, more generally you can't use composed CSS rules.

The top skew is also bothering me, but I haven't had time to debug why it's happening. Any ideas? 😄

cbr9 commented 3 years ago

The technical limitations (by design) of ::part is that you can only affect the element with the part, so you can't influence its descendants. In the case of say having a <td part="value"> you wouldn't be able to redefine properties of e.g. the child <a >. Well, more generally you can't use composed CSS rules.

I removed the underline from the rest of my regular links, but it doesn't seem like too big of an incovenience.

The top skew is also bothering me, but I haven't had time to debug why it's happening. Any ideas?

Playing around in Developer Tools I found that using display: flex and align-items: flex-end on td and th actually centered the content. I hope this helps (I didn't do much more research on it)

arnau commented 3 years ago

Version 0.10.2 adds both ::part(key) and ::part(value)

arnau commented 3 years ago

Ah, I think you are onto something, thanks :)

cbr9 commented 3 years ago

Version 0.10.2 adds both ::part(key) and ::part(value)

Awesome! Thanks :)

Ah, I think you are onto something, thanks :)

No problem :)

cbr9 commented 3 years ago

I've been playing around some more in Developer Tools. I think it may be a problem with the default font family. Disabling the font-family rule defined in details seems to fix the problem.

cbr9 commented 3 years ago

I found a small problem with the part attribute in some cases. I have an entry in some of my notes' frontmatter that looks like this:

Days:
  Friday: "9:45 → 11:15"
  Tuesday: "9:45 → 11:15"

The plugin creates an embedded table. In this case, the inner keys and values get the part attribute, i.e., Friday, "9:45 → 11:15", Tuesday, and "9:45 → 11:15" get the attribute, but the th Days and the td that contains the embedded table do not get it.

arnau commented 3 years ago

Mmm, what seems to work well is using display: grid and changing the fold icon positioning to use grid columns. I'll release this one and see whether it works well across OSes.

arnau commented 3 years ago

Version 0.10.3 fixes the missing key/value parts, aims to fix the slight vertical skew in keys and, you convinced me, adds parts for link, external-link and internal-link in case you want to remove underlining.