Display resolution affects rendering of certain unicode characters such as ⓘ

[DKlaper]

So we wanted to use ⓘ as a button label, however we had to discover that on Windows Desktop and Web depending on the used display resolution the character shows up "very ugly"

The size of the MS Teams client window/browser window does not matter, it is only the resolution of the display + Windows setting of text scaling which causes the issue. Similar characters exhibit the problem too but to a lesser degree it seems.
On Mobile we could not reproduce the issue.

It seems on older screens that have a lower pixel density the character shows up messed up. Note that other applications do not have it, for example Edge itself and Word can render the character just fine. So While I understand a lower Pixel density (PPI) can make things looks jaggier there is clearly a different issue at play here.

Examples:

16.5 Inch (High PPI) 3840x2160 (Windows recommended scaling 250% used)

Desktop

Microsoft Edge Teams Web

24 inch (Low PPI ) 2560x1440 (Windows recommended scaling 100% used)

Desktop <- Look at how crooked this i looks! The i-dot is not over the i

Microsoft Edge Teams Web <- Look at how crooked this i looks! The i-dot is not over the i

Microsoft Edge Address Bar (Not Teams)

MS Word:

The issue can be made go away by increasing the text scaling, however that is not practicable if you have a low PPI Screen, because everything will look huge.

24 inch (Low PPI) 2560x1440 (Increased scaling to 150%)

Desktop

Microsoft Edge Teams Web

[ghost]

Hi DKlaper! Thank you for bringing this issue to our attention. We will investigate and if we require further information we will reach out in one business day. Please use this link to escalate if you don't get replies.

Best regards, Teams Platform

[Meghana-MSFT]

@DKlaper - We tried this by sending below adaptive card. We also see that the icon is little distorted and 'i-dot is not over the i' in both web/Desktop client. The icon is rendering properly in Android mobile.

Below is the card JSON we used and screenshot of card.

{
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "version": "1.0",
  "type": "AdaptiveCard",
  "actions": [
    {
      "type": "Action.Submit",
      "title": "ⓘ"
    }
  ]
}

Could you please confirm if you are also doing the same.

[DKlaper]

Yes I am doing the same. Thank you for checking.

[Meghana-MSFT]

We have raised a bug for the same, we will keep you posted on the updates. Thank you.

[Meghana-MSFT]

@DKlaper - Engineering team has given the below update - Unicode character rendering is OS dependent behavior, not Teams behavior. Teams client doesn't apply any special processing on rendering Unicode while they're just rendered as the rest of Unicode characters anywhere else on your machine, i.e., it should be the same as ⓘ shown in Notepad, Edge, ...etc.

It should be Windows OS issue, not Teams. For example, on Mac OS it renders without any problem.

Hence this is a by design behavior.