# Letter avatar font - letters horizontally off centre

**URL:** https://meta.discourse.org/t/letter-avatar-font-letters-horizontally-off-centre/44509
**Category:** UX
**Created:** [19 במאי,‏ 2016,‏ 4:31pm UTC](https://meta.discourse.org/t/letter-avatar-font-letters-horizontally-off-centre/44509 "2016-05-19T16:31:20Z")
**Posts on this page:** 12
**Page:** 1

<div class="post-metadata">

### Author: ![DeanMarkTaylor](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/deanmarktaylor/32/102462_2.png) [@DeanMarkTaylor](https://meta.discourse.org/u/DeanMarkTaylor)
#### Post date: [19 במאי,‏ 2016,‏ 4:31pm UTC](https://meta.discourse.org/t/letter-avatar-font-letters-horizontally-off-centre/44509/1 "2016-05-19T16:31:20Z")

</div>

Further to:

> [@Change letter avatar font to Roboto?](https://meta.discourse.org/t/change-letter-avatar-font-to-roboto/33918):
>
> @codinghorror thinks that the [Roboto font](https://www.google.com/fonts/specimen/Roboto) is quite the mallard’s testicles, and I’ve put together a version of the letter avatars code that renders Roboto avatars. This is a rendering of all letters/numbers in both the existing font (top) and Roboto (bottom)smile A few questions for the assembled experts: Do the avatars look better in Roboto than Helvetica? Is the ‘D’ off-centre too nasty to be reasonable? (I can’t push it right without making the rest of the avatars look crap, …

It looks like some letters have gone off centre - perhaps because of a font update?

 ![](https://global.discourse-cdn.com/meta/original/3X/d/4/d421588a7a6a709dde9645c19ab6d124777517b3.png)

Not sure if this is all of them - but `R`, `N`, `M` and `G` are off.

The numbers in the image are the width of rendered pixels for the character left / right of the black line.

---

<div class="post-metadata">

### Author: ![zogstrip](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/zogstrip/32/512781_2.png) [@zogstrip](https://meta.discourse.org/u/zogstrip)
#### Post date: [19 במאי,‏ 2016,‏ 5:01pm UTC](https://meta.discourse.org/t/letter-avatar-font-letters-horizontally-off-centre/44509/2 "2016-05-19T17:01:52Z")

</div>

It’s because we updated ImageMagick to the latest version due to [ImageTragick](https://imagetragick.com/) and, like every time we change version, avatars got “_decentered_” 😑

---

<div class="post-metadata">

### Author: ![fantasticfears](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/fantasticfears/32/119608_2.png) [@fantasticfears](https://meta.discourse.org/u/fantasticfears)
#### Post date: [19 במאי,‏ 2016,‏ 7:10pm UTC](https://meta.discourse.org/t/letter-avatar-font-letters-horizontally-off-centre/44509/3 "2016-05-19T19:10:29Z")

</div>

> [@zogstrip](#):
>
> It’s because we updated ImageMagick to the latest version due to ImageTragick and, like every time we change version, avatars got “decentered” 😑

Don’t know a upgrade can do that…ImageMagick are so nice at API 😓  
My multimedia project is generating letter avatar. I think I will go with OpenResty. Either way, I would tweak ImageMagick. And PR welcome here? I still need to center the avatar by all means. (\<= Next week)

> [@DeanMarkTaylor](#):
>
> It looks like some letters have gone off centre - perhaps because of a font update?

By the way, how you generate this graph? Looks good to generate for testing!

---

<div class="post-metadata">

### Author: ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [19 במאי,‏ 2016,‏ 7:12pm UTC](https://meta.discourse.org/t/letter-avatar-font-letters-horizontally-off-centre/44509/4 "2016-05-19T19:12:30Z")

</div>

> [@fantasticfears](#):
>
> Either way, I would tweak ImageMagick. And PR welcome here?

I think the Discourse team has submitted the same, if not similar, PR to ImageMagick to fix this issue multiple times now. As future versions continue to break it.

---

<div class="post-metadata">

### Author: ![fantasticfears](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/fantasticfears/32/119608_2.png) [@fantasticfears](https://meta.discourse.org/u/fantasticfears)
#### Post date: [19 במאי,‏ 2016,‏ 7:14pm UTC](https://meta.discourse.org/t/letter-avatar-font-letters-horizontally-off-centre/44509/5 "2016-05-19T19:14:33Z")

</div>

I was referencing `letter_avatars` microservice. There is a spot you can have an offset for those avatars.

Although, I will try to find the root cause

---

<div class="post-metadata">

### Author: ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [19 במאי,‏ 2016,‏ 7:20pm UTC](https://meta.discourse.org/t/letter-avatar-font-letters-horizontally-off-centre/44509/6 "2016-05-19T19:20:00Z")

</div>

Yeah, so was I. There have been times the offset was caused by a change in ImageMagick. I don’t really recall the details, may I can find the related topics here. I know there is also an offset table/array too.

I think this is semi-related

> **[Gravity center + annotate behavior change in 6.9.2-3 - Legacy ImageMagick...](https://jqmagick.imagemagick.org/discourse-server/viewtopic.php?f=3&t=28403)**

> [@Non-external avatars are unaligned](https://meta.discourse.org/t/non-external-avatars-are-unaligned/34755):
>
> Since I upgraded to v1.5.0.beta3 +126 (by rebuilding the Docker image), letter avatars are unaligned: Note that I’m not using the external avatar service. If I do turn that on, the avatars look different and are aligned: I’ve cleared browser cache as appropriate and so on. slight_smile

Granted now we’re talking horizontally instead of vertically

---

<div class="post-metadata">

### Author: ![DeanMarkTaylor](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/deanmarktaylor/32/102462_2.png) [@DeanMarkTaylor](https://meta.discourse.org/u/DeanMarkTaylor)
#### Post date: [19 במאי,‏ 2016,‏ 7:30pm UTC](https://meta.discourse.org/t/letter-avatar-font-letters-horizontally-off-centre/44509/7 "2016-05-19T19:30:01Z")

</div>

> [@fantasticfears](#):
>
> how you generate this graph? Looks good to generate for testing!

This one was manual - didn’t trust ImageMagick for this.

---

<div class="post-metadata">

### Author: ![mpalmer](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mpalmer/32/45740_2.png) [@mpalmer](https://meta.discourse.org/u/mpalmer)
#### Post date: [19 במאי,‏ 2016,‏ 9:34pm UTC](https://meta.discourse.org/t/letter-avatar-font-letters-horizontally-off-centre/44509/8 "2016-05-19T21:34:33Z")

</div>

A PR against the microservice to realign letter avatars would be greatly appreciated. The problems we had keeping letters aligned previously were related to our pulling whatever counted as “the latest” IM version when we built the image; I’ve fixed that now so we depend on a well-specified version of IM, so we can have better control over when things go haywire. So, if you’d like to submit a PR with a set of manual adjustment tweaks, that should be enough to keep things in the right place from now on.

---

<div class="post-metadata">

### Author: ![fantasticfears](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/fantasticfears/32/119608_2.png) [@fantasticfears](https://meta.discourse.org/u/fantasticfears)
#### Post date: [24 במאי,‏ 2016,‏ 1:51pm UTC](https://meta.discourse.org/t/letter-avatar-font-letters-horizontally-off-centre/44509/9 "2016-05-24T13:51:10Z")

</div>

Putting some tests on canvas. My local env does say different thing, so takes some time to dig into. When pointing to avatar services, got a lot of 500s.

 ![](https://global.discourse-cdn.com/meta/original/3X/c/6/c63046f8adf658124e13533375e3eac3e92624f9.png)

Source: [https://github.com/fantasticfears/letter-avatars-test](https://github.com/fantasticfears/letter-avatars-test)

I would bet ImageMagick and fontconfig version will cause a lot of differences.

* * *

Update1: 500 is caused by…I exhausted the avatar service. Here is what we have now for official service:

 ![](https://global.discourse-cdn.com/meta/original/3X/6/e/6ea3a3edf2daa1e0ae45b59239c7dfd5097649aa.png)

Update2: @mpalmer My investigation is done. I would need the information of deploy environment to test the result.  
I would bet MPC intermediate file will be much faster than PNG file, so I would update the command if applicable.  
I can exhaust the service because of only 16 threads. But that’s because file IO. Nginx should queue all those requests before bombing the ruby scripts.

---

<div class="post-metadata">

### Author: ![mpalmer](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mpalmer/32/45740_2.png) [@mpalmer](https://meta.discourse.org/u/mpalmer)
#### Post date: [24 במאי,‏ 2016,‏ 11:44pm UTC](https://meta.discourse.org/t/letter-avatar-font-letters-horizontally-off-centre/44509/10 "2016-05-24T23:44:58Z")

</div>

Hi Eric,

The deployment environment is contained in the `Dockerfile` in the letter-avatars repo. We just point port 80 on the host to the puma running in the container, and let 'er rip.

---

<div class="post-metadata">

### Author: ![DeanMarkTaylor](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/deanmarktaylor/32/102462_2.png) [@DeanMarkTaylor](https://meta.discourse.org/u/DeanMarkTaylor)
#### Post date: [24 במאי,‏ 2016,‏ 11:49pm UTC](https://meta.discourse.org/t/letter-avatar-font-letters-horizontally-off-centre/44509/11 "2016-05-24T23:49:50Z")

</div>

If you are using 120x120 images I would recommend making your black guide lines 2 pixels wide…  
… otherwise they will always look off centre as 1 pixel does not evenly divide into 120 visually.

---

<div class="post-metadata">

### Author: ![dax](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dax/32/244677_2.png) [@dax](https://meta.discourse.org/u/dax)
#### Post date: [19 בינואר,‏ 2018,‏ 3:23pm UTC](https://meta.discourse.org/t/letter-avatar-font-letters-horizontally-off-centre/44509/12 "2018-01-19T15:23:59Z")

</div>


