improve font-size consistency with textMarginRatio property

[GertSallaerts]

This is a proposal of a new way to manage font-size on text-based avatars.

The current implementation makes the width of the text match avatarSize / textSizeRatio but this results in a lot of different font sizes. This happens because when you're not using a monospaced font, "JJ" for example will be significantly narrowed than "WW". This causes font-sizes to very even between avatars that all have two initials. (see image)

My proposal returns it back to the old implementation where font-size is set as avatarWidth / textSizeRatio. The problem with that implementation was that avatars with three of four initials could overflow the avatar's background. I propose to solve this by adding a new property textMarginRatio which reduces font-size only when the text would become to wide.

For now this is a POC; let me know what you think and I'll dot all the i's 😉

[JorgenEvens]

The problem with the old implementation was that it would not behave as expected when using relative units (primarily percentages) for size. So I'm not really interested in returning back to the original font-size calculation.

Maybe we should try determining the fontSize based on the text height and make it fit within avatarWidth / textSizeRatio if larger than that. Or you know... use a monospace font by default.

I'd love to hear the opinion of @Sitebase and some of react-avatar's users before moving ahead.

The original issue is available at #136

[GertSallaerts]

I made a second commit that takes your first comment about not working with relatives sizes into account.

---

Maybe we should try determining the fontSize based on the text height and make it fit within avatarWidth / textSizeRatio if larger than that.

Your meaning is not clear to me so I can't comment any further on this.

[JorgenEvens]

@GertSallaerts Could you finalise this PR as it seems to address most issues related to font-scaling.
I know I earlier didn't want to go with the old behaviour, but it seems that it used to be a lot more consistent for most users that seems to be the best way forward.

[GertSallaerts]

Updated.

[JorgenEvens]

Thanks, I'll look into merging this next week!

[JorgenEvens]

This has been released as part of version v3.5.0!