System tray icon battery % indication text renders improperly

[ewancg]

The system tray icon does not properly render the battery indication text. I assume that intended behavior would make it vertically centered and have anti-aliased text...

[steam3d]

Hi. It is right position. I'm using integers so that the icon doesn't blur. Because of this it is not possible to perfectly center. If the size of the number is odd, then an additional pixel will appear on one of the sides.

I can add anti-aliased filter, but users prefer more sharp and large digit

[ewancg]

Considering other text in the taskbar is antialiased (see: the locale icon), I think default the behavior should to antialias. I'm sure users wouldn't be opposed to a toggle in the settings. My issue is only seen in the preview build at the time of writing, where the XAML taskbar tray icons behave differently (the biggest difference is that they are larger). The gap also looks like more than a pixel to me -- maybe it is an epx you are adding on either end. Have you considered using the same font size as the rest of the taskbar does, or using text metrics to find the best font size that your drawable region will allow?

[steam3d]

I use the Windows 11 Pro (not insider). I spent enough time to choose the best option. It also support different DPI up to 300%. I use Microsoft Sans Serif because it fits as much as possible free space.

I did not find the font which Windows task bar uses. It looks like Segoe UI but when I tried it - it looks differently.

I will wait when Windows release new version to public because if it changes tray icon, I need to create two options, one for Windows 10 and second for Windows 11.

The trouble may be also in hard-code size of tray icon.

[ewancg]

I believe that newer builds of Windows 11 will use Segoe UI Variable in situations like this. These references may be of some use to you: https://learn.microsoft.com/en-us/windows/apps/design/style/xaml-theme-resources#the-xaml-type-ramp https://learn.microsoft.com/en-us/windows/apps/design/signature-experiences/typography#type-ramp

I wouldn't personally treat it as an icon... just drawable space you know &/ can determine the dimensions of, just like anything else. You are probably right in all your decisions thus far concerning font sizes and positions, but I have to wonder if you have yet brought in any library like Win2D that can draw to any old buffer using WinUI's contexts for things like fonts. Something to consider

[steam3d]

I am not sure that I understood. I do not use WinUI, because WPF does not support it. WPF has enough features to render text so this is a style question not technical.

It is render on 4k screen Segoe UI Variable + anti-aliased. I forgot apply centered I think it does not matter for now. (Left - normal weight, right - semibold)

[ewancg]

It was a bad assumption on my part that you were using WinUI. I think the far right example looks much better. I also think that if you centered it, it would look even better

[steam3d]

@EwanGreen4 WinUI 3 is very raw technology. I added a task to improve tray icon. I could not say when it will be available, because I have plenty tasks right now.

[steam3d]

I made some tests.

Left - Segoe UI Variable Text Semibold Right - Microsoft Sans Serif

The right one has better readability.

I made absolute the same size and font style

I will fix the center issue and enable anti-aliased. I try to fill square with the text as mach as possible to get more readability of text.

[ewancg]

Looks awesome! If you want my opinion, I would try Segoe UI Variable Text Regular and see how it looks. The left one looks good, but it strikes me as a little bit thicker than the clock's text. But maybe that's what you were going for.

[steam3d]

New render available in 2.0.41.0