UWP: difference between RichEditBox and RichTextBlock in displaying some fonts

Question

I have a project in UWP where I need to display the same text in a RichEditBox and in a RichTextBlock.

For some fonts (e.g. Courier), this is pretty ok and no big problems, but for other fonts (like Arial) the difference is pretty substantial. Please note that I use exactly the same code, the only difference is just the Font.

Please find an MVCE that reproduces the issue here: https://github.com/vfailla/UWPRichEditBox

How can I setup the two elements to display the text in Arial in the very same visual way?

Answer 1

For some fonts (e.g. Courier), this is pretty ok and no big problems, but for other fonts (like Arial) the difference is pretty substantial. Please note that I use exactly the same code, the only difference is just the Font.

First of all, you will need to set the same CharacterSpacing of these two different controls:

m_richEditBox.CharacterSpacing = 100;
m_richTextBlock.CharacterSpacing = 100;

Then, you will need to set the same FontStretch of two controls, but here comes the issue:After a few tests I found textStretch doesn't work for RichEditBox/TextBox. And by default, the text inside look more like FontStretch.Condensed. So as a temporary workaround, you can set your RichTextBlock.FontStretch to FontStretch.Condensed:

m_richTextBlock.FontStretch = FontStretch.Condensed;

I'll consult through internal channel to report this issue, and I'll update this thread once I got any response.