[Messages] First letter of nickname on avatar

How to properly style the letter on the avatar so that it is exactly in the center?
I try this way:

<div class="message-avatar"><div class="textavatar">A</div></div>
.textavatar {
    display: flex;
    justify-content: center;
    align-items: center;
    height: var(--f7-message-avatar-size);
    width: 100%;
    font-size: calc(var(--f7-message-avatar-size) / 2);

Tried it this way, but the result is the same:

.textavatar {
    text-align: center;
    position: relative;
    top: 50%;
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);

Letters are not centered:


Do you have live example?

To see that the letters are not centered, you need to zoom in on the page by 300%:

It’s perfectly center on div with textavatar class

Screen Shot 2021-08-13 at 18.57.10

Take a screenshot and flip the letter 180 degrees, the letter is off-center.
On an iPhone, this can be seen even without a zoom.

With font you can’t really do it, as even if the text is centered, then some chars within the font itself can have different baseline. 100% percent way of pixel-perfect centering is to export all those chars to images (svg or png) :slight_smile:

Tried generating svg dynamically, it got much better!

1 Like