CSS snippet multi-column (like a newspaper) task query block results

[AnnaKornfeldSimpson]

Discovered this somewhat by accident, a very easy CSS snippet to make all task query blocks display in multiple columns (displayed like a newspaper, not like a table. Those of us in LTR languages would read down and then move one column right and read down that, etc). Note: I use Obsidian's default theme and have not tested this with any community themes or other customizations.
I do not yet know much CSS, but I suspect it would be a simple change to have this apply only to certain files (via the cssclass YAML attribute in Obsidian) rather than all task query blocks the way the below does. Anyone know how to do that?
Note that if you have tasks grouped in your query you may see some rather nonsensical column breaks such as a new group heading right before a column break. Curious if anyone knows how to fix that also.

/* Set minimum width of a column and let the software figure out how many columns will fit on your screen. 
* You can use other units here, such as ones related to your font size. */
.block-language-tasks {
    column-width: 250px;
}

/* Do not break columns in the middle of a task. */
.plugin-tasks-query-result > * {
    break-inside: avoid;
}

Related docs on styling tasks.
Wondering where to put a "css snippet" in your Obsidian vault? From the Obsidian forums: "To use a snippet, simply save it in a CSS file in <your vault root>/.obsidian/snippets/." The .obsidian folder may be hidden by default in your view of files and folders, so you'll have to figure out how to see hidden files, and you cannot see the folder from within Obsidian. You'll have to use some other editor to edit the css file. Once you've got a file in the .obsidian/snippets folder, go back to Obsidian, open your settings, go to the "Appearance" tab, scroll to the bottom and toggle on your new snippet.

[claremacrae]

Hi @AnnaKornfeldSimpson, thanks for another amazing contribution.

This doesn't really answer your comments, I think, but it does get some info out of my head, until I can put it somewhere better... and work out where.

1. I've started steering the docs slightly towards the Divio Documentation System, with the recent introduction of a How To section, and the new page How to style backlinks.
2. The snippets embedded in the above page are copied from the snippets directory in the Tasks-Demo vault:
   • https://github.com/obsidian-tasks-group/obsidian-tasks/tree/main/resources/sample_vaults/Tasks-Demo/.obsidian/snippets
3. The idea is to add a growing set of snippets in that vault, that people can experiment with - and that can easily be copied from there.
4. Eventually I will likely use mdsnippets to automatically embed the snippets directly in to the docs, triggered via a GitHub Action. This will have a bonus that there will be a link from the CSS in docs to a downloadable file. (I have emulated that manually for now)

[claremacrae]

All of which means that if you thought your snippets above would be useful to share, they could be added as a snippet inside the demo vault.

[claremacrae]

I do not yet know much CSS, but I suspect it would be a simple change to have this apply only to certain files (via the cssclass YAML attribute in Obsidian) rather than all task query blocks the way the below does. Anyone know how to do that?

Here are my notes on that....

(Important: That particular customisation broken some stuff, perhaps smooth scrolling, so I don't use it any more... but the general principle applies...)

---

File-specific customisations

Example Add and enable:

```css
.no-inline-backlinks .embedded-backlinks {
    display: none;
}
```

Then add this to the YAML at the top of markdown files to hide backlinks:

```yaml
cssclass: no-inline-backlinks
```

[claremacrae]

There is no reference to cssclass in the Obsidian Help currently. It is also not mentioned in the Hub.

I think I got it from someone on OMG Discord.

[AnnaKornfeldSimpson]

I believe I saw it in the Obsidian help page on YAML frontmatter, as one of the 4(?) keys officially supported along with tags, aliases, and something for publish. Not yet awake enough to track down the link; if I remember, I'll come back and edit this.

[claremacrae]

There is no reference to cssclass in the Obsidian Help currently. It is also not mentioned in the Hub.

I think I got it from someone on OMG Discord.

To be more precise, searching for cssclass in the obsidian docs gives me no hits in safari on Mac.

[AnnaKornfeldSimpson]

This barely counts as documentation towards the bottom of the page. So I guess everything I have really learned about it has been in other people's writing.

[AnnaKornfeldSimpson]

Anyway, I should try this out on my snippet above before posting it on the docs, I think. Adding to my Tasks list! 😀