Alignment of tiddler icon

[wixl]

What would be the best way to tweak the alignment of tiddler icons such that they properly align with a tiddler’s title text?

At present, icons always seem to float about half a line above the title text. I’ve had a bit of a dig, and I expect the answer is buried somewhere in the CSS, but as a mere “dabbler” in all things coding, I’m struggling to identify a good way to implement such a change.

If it matters, I’m using Nicola Petton’s Notebook plugin, but I don’t expect this will affect the answer, since the same icon misalignment is visible on the main tiddlywiki.com site.

[telumire]

This article might shed some light on the matter: Vertical-Align: All You Need To Know (CSS)

First thing first: let’s see what we are working with.

HTML

<span class="tc-tiddler-title-icon">..</span>
<h2 class="tc-title">..</h2>

CSS

.tc-tiddler-title-icon {
  vertical-align: middle;
  margin-right: .1em;
}

.tc-titlebar h2 {
  font-size: 1em;
  display: inline;
}

Tiddlywiki attempt to vertical align the icon with vertical-align: middle.
As we can see in this overlay of the bouding box of both title and icon, it is not the case:

I think that this match this example given in the above article:

The icon is vertical-align:middle; but the title is not aligned and so sit on the baseline.

To fix the alignment, we need to align the title :

.tc-titlebar h2 {
  vertical-align: middle;
}

We get this:

It’s still not perfect because the svg itself has a 1px left and bottom padding:

The culprit:

To fix this:

.tc-tiddler-title-icon svg{
padding:0;
}

I’m not sure why but the icon is still not perfectly centered:

Adding display: inline-grid; on the title icon seems to correct this, so the final CSS is :

.tc-titlebar h2 {
  vertical-align: middle;
}
.tc-tiddler-title-icon {
display: inline-grid;
}
.tc-tiddler-title-icon svg{
padding:0;
}

And the final result:

[tw-FRed]

Hi @telumire

Thanks for your detailed answer!
In my TW (latest Firefox, linux) things don’t look quite the same as your screenshots, but more like @wixl ones:

Without style:

With your style applied:

Changing vertical-align: middle; to bottom:

I prefer the last one, resulting from this stylesheet tiddler:

.tc-titlebar h2 {
  vertical-align: bottom;
}
.tc-tiddler-title-icon {
display: inline-grid;
}
.tc-tiddler-title-icon svg{
padding:0;
}

Fred

[wixl]

Thanks a lot @telumire - that’s a really useful answer. It definitely captures the key information I needed, so I’ll mark as “solution”.

I found the same as @tw-FRed - I actually get better alignment using

.tc-titlebar h2 {
vertical-align: bottom;
}

I also hit a minor bump resulting from using the Notebook plug. It turns out that the theme changes the titlebar font properties, such that the text is no longer the same height as the icons. I therefore added a couple of extra rules to revert the relevant properties back to those used on the vanilla template. For anyone who hits the same issue, my full solution as of now is:

.tc-titlebar {
  font-size: 2.35em !important;
  line-height: 1.35em !important;
}
.tc-titlebar h2 {
  vertical-align: bottom;
  font-weight: 100 !important;
}
.tc-tiddler-title-icon {
display: inline-grid;
margin-right:.2em;
}
.tc-tiddler-title-icon svg{
padding:0;
}

The !important flags were needed as these are used by the changes present in the Notebook plugin, so these (above) changes were not getting applied without the !important. I also doubled the margin-right for the tc-tiddler-title-icon based on personal preference.

For reference, my final result now looks like:

Thanks a lot for the help!