Distorted font, font not rendering correctly in certain ES theme

lmjiang1

Re: Making a theme: In-depth questions (gamelist

This is driving me crazy. The text for my games list looks slightly distorted when using certain ES themes like Art Book. Carbon looks normal. Can someone please point me in the right direction?

lostless

@lmjiang1 each theme can have its own font, so some themes will have a very different look. What do you mean by distorted though?

lmjiang1

Thanks @lostless, here's a photo of what my text looks like. "Bluetooth" and "Configuration Editor" appear distorted and jagged, whereas other entries like "ES Themes" and "File Manager" look normal. I changed the font and font size in the theme's xml file, but the jagged/distorted text persists. I also tried a complete clean install, now the issue happens in Carbon too! Any ideas?

mitu

@lmjiang1 What is the resolution of your display ? How is it connected to the Pi (or PC) ?

lmjiang1

Thanks @mitu, I've tried on 2 different 1080 tvs via HDMI cable, with and without overscan.

lostless

@lmjiang1 i get that distortion too on some fonts. I know my PlayStation theme does that at 1080p. I guess I just shrug it off as a minor bug in ES

dankcushions

please pay careful attention to this section of the overscan wiki: https://github.com/RetroPie/RetroPie-Setup/wiki/Overscan#my-image-is-cut-off

mitu

@lmjiang1 Just for curiosity, can you post your /boot/config.txt file ?

dudleydes

The jagged font has been a bug in EmulationStation since ES 2.0 was released in July 2014. There remains an open ticket at Aloshi's Github page.

The bug is straightforward to replicate. Select the vanilla Carbon theme that comes, by default, in the RetroPie image and change the Gamelist View Style to Basic in UI Settings.

I noticed it again recently when I was developing a custom theme for my Picade build. I believe the bug occurs when the <alignment> tag in the <gamelist> section of the theme XML is set to center, as it is in the Carbon theme as well as the Art Book theme, which the OP is using.

Here are my findings using the CRT Centered theme by editing these lines in the theme XML:

Alignment center
Theme XML excerpt

     <textlist name="gamelist">
         <pos>0.05 0.575</pos>
         <size>0.9 0.3277777777777778</size>
         <alignment>center</alignment>
      </textlist>

Alignment left and gamelist moved towards middle with <pos>
Theme XML excerpt

      <textlist name="gamelist">
         <pos>0.425 0.575</pos>
         <size>0.9 0.3277777777777778</size>
         <alignment>left</alignment>
      </textlist>

As can be seen, by setting <alignment> to left instead of center, the text, now occupying a similar central position, does not have a jagged edge.

Please let me know if I am onto something and I can open an issue at the ES Github.

mitu

@dudleydes Tried with Carbon and basic view and yes, the `chipping' of the letters is there. Not so noticeable if you're on 1080p and standing 2m away, but it's there. IMHO it wouldn't hurt to open an issue.

lmjiang1

Thank you everyone for the replies. This is my first time posting and I didn't know what to expect, but you've all been super nice and helpful.

@dudleydes thanks for your insight. It's kind of amazing to me that this has been a known issue since ES 2.0. Aesthetics play an important part in the overall experience, and to me the jagged text is an eyesore. Then again, I am also the type of person who needs everything on my desk to be at right angles :)

@mitu here is my /boot/config.txt

# For more options and information see
# http://rpf.io/configtxt
# Some settings may impact device functionality. See link above for details

# uncomment if you get no picture on HDMI for a default "safe" mode
#hdmi_safe=1

# uncomment this if your display has a black border of unused pixels visible
# and your display can output without overscan
#disable_overscan=1

# uncomment the following to adjust overscan. Use positive numbers if console
# goes off screen, and negative if there is too much border
#overscan_left=16
#overscan_right=16
#overscan_top=16
#overscan_bottom=16

# uncomment to force a console size. By default it will be display's size minus
# overscan.
#framebuffer_width=1280
#framebuffer_height=720

# uncomment if hdmi display is not detected and composite is being output
#hdmi_force_hotplug=1

# uncomment to force a specific HDMI mode (this will force VGA)
#hdmi_group=1
#hdmi_mode=1

# uncomment to force a HDMI mode rather than DVI. This can make audio work in
# DMT (computer monitor) modes
#hdmi_drive=2

# uncomment to increase signal to HDMI, if you have interference, blanking, or
# no display
#config_hdmi_boost=4

# uncomment for composite PAL
#sdtv_mode=2

#uncomment to overclock the arm. 700 MHz is the default.
#arm_freq=800

# Uncomment some or all of these to enable the optional hardware interfaces
#dtparam=i2c_arm=on
#dtparam=i2s=on
#dtparam=spi=on

# Uncomment this to enable the lirc-rpi module
#dtoverlay=lirc-rpi

# Additional overlays and parameters are documented /boot/overlays/README

# Enable audio (loads snd_bcm2835)
dtparam=audio=on
gpu_mem_256=128
gpu_mem_512=256
gpu_mem_1024=256
overscan_scale=1

dudleydes

@lmjiang1 The jagged font issue has been fixed. You will need to update EmulationStation to v2.8.2

lmjiang1

@dudleydes woohoo, THANK YOU!

mironc

I've just installed RetroPie and I think I'm getting the same problem as shown in this post. Here's a screenshot:

Screenshot - distorted fonts.jpg

As you can see, AUDIO and CONFIGURATON are perfect, but BLUETOOTH and ES THEMES look terrible.

It's a new install of RetroPie 4.4 on a 32Gb card, running on a Pi 3 B+. My screen is 1024 x 768 connected via HDMI. In boot/config.txt I've got the following lines which set the HDMI to DMT and res 1024x768 @60Hz:

hdmi_group=2
hdmi_mode=16

I've done a system update, and ES is showing version 2.8.3RP. It's running the default CARBON theme, and I get this on all the games lists and the Retropie list (as shown). The ES menu and options screens (the white ones) are all perfect. I haven't tried any other themes yet, or tried tweaking this theme as I'm a bit new to this.

Any suggestions or advice would be appreciated.

mitu

@mironc This looks more like a display issue - is this a CRT that you have connected ?
Can you take a screenshot of the framebuffer with raspi2png and upload it ? This way we'll see if the scaling artefact is within Emulationstation or because of the display.

mironc

The screen is a 10" LCD from Pimoroni:

https://shop.pimoroni.com/products/hdmi-10-lcd-screen-kit-1024x768

Here's the screenshot, it shows the same thing as the photo:

snapshot - font rendering.png