[Messages] First letter of nickname on avatar

1

Hello.
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:

unnamed
unnamed187×646 9.93 KB

Thanks.

2

Do you have live example?

3

To see that the letters are not centered, you need to zoom in on the page by 300%:
https://452694.playcode.io

4

It’s perfectly center on div with textavatar class

Screen Shot 2021-08-13 at 18.57.10

5

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.
png

6

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:

7

Tried generating svg dynamically, it got much better!

1 Like