Tiddler icon in ViewTemplate has fixed size, not relative to text size

, ,
#1

This observation is nitpicky and of low priority if considered a bug at all, but looks like an overlook, so I decided to ask.

The icon displayed in front of the tiddler title in the ViewTemplate has fixed, not relative, size. It stays the same size regardless of the title font size.

This is not visible at all on the default font size $:/themes/tiddlywiki/vanilla/metrics/fontsize of 14px, because the fixed size happens to be the same or very similar to the view toolbar icons. It is also not very apparent on small changes of the font size. Bigger changes of the font size, as in screenshots below, demonstrate the problem:

14px
14px714Ă—190 7.31 KB

10px
10px715Ă—168 3.71 KB

20px
20px718Ă—207 7.66 KB

The tiddler title, subtitle, view toolbar icons react to the font size change, but the tiddler icon stays the same size. I have tested in on v5.3.0, v5.2.7, and v5.2.0.

Is it a bug, or is it intended for some reason? It seems to me it could easily have been overlooked until now, as it is only apparent by big changes to font size, and these usually don’t make sense. I think it’s more likely to cause problems when creating custom themes that attempt to modify title font size.

It should be relatively easy to fix it, perhaps by applying some of the CSS for the buttons to the icon as well. I didn’t dig deep into this, not knowing for sure if it is considered a bug at all.

I didn’t find any related GitHub issue or PR. There are some threads here about alignment of tiddler icon and title ( (css) How to vertically align ViewToolbar to title? - Discussion - Talk TW (tiddlywiki.org), Alignment of tiddler icon - Discussion - Talk TW (tiddlywiki.org)), but they concentrate specifically on the alignment issues, not on the size of the icon.

#2

If you can change he size applied to the svg icon to 1em it will scale to the font size in use. With 5.3.x you can now do this within the transclusion.

{{$:/core/images/globe}}
{{$:/core/images/globe|1em}}
  • I did propose this for the core icons but it was not clear if it would be backwardly

We can look at making this part of the Tiddler Icon cascade, or more likely as you see in the $:/core/ui/ViewTemplate/title it uses $:/core/ui/TiddlerIcon

However the use of the icon field and its text font display is a little different, such that changing $:/themes/tiddlywiki/vanilla/metrics/fontsize occurs independently from the icon display.

With a little more work I think we could make a change that ties the icon size with the font size possibly changing $:/core/ui/TiddlerIcon

#3

By the way it is “Relative to the Zoom in out size”, its only when you try and configure one element the title differently and not the other (the icon)

#4

This should work, but only for the core icons. It would work neither for non-parametrised svg added by user nor for raster graphics.

I think the best solution would be to modify ViewTemplate/title, $:/core/ui/TiddlerIcon, or vanilla theme css as needed, to make it work universally, regardless of what type of graphics is used.

#5

Do not use them. They are bloat. Use SVGs instead.

#6

The current behaviour is not ideal, and I would support improving it. However, I am not sure that it can be fixed without breaking backwards compatibility. (The width and height of 22pt are hardcoded into TiddlyWiki’s core images, and so the only way of changing them to use “em” units would be to change the definitions of the images, which would potentially break other usages of the images).

#7

On reflection, I think there is a viable fix. I’ve created a PR here:

https://github.com/Jermolene/TiddlyWiki5/pull/7619

There is a preview build available here:

https://tiddlywiki5-git-fix-tiddler-icon-size-jermolene.vercel.app/

1 Like