DrawText over a BMP 128x64 displays deformed text

[josellm]

Description

I need to send a text to a 128x64 LCD display. I need to generate a bmp and draw some text over. I first use System.Drawing but due to problems with windows nano container I migrate the code to SixLabors.ImageSharp.

The resulting text with SixLabors.ImageSharp don't display smoothly like System.Drawing

Removing HorizontalAlignment and VerticalAlignment helps but it still doesn't show it correctly.

At left the version using System.Drawing, at the right using SixLabors.ImageSharp

Steps to Reproduce

using (var img = new Image<Rgb24>(128, 64, Color.White)) {
	img.Mutate(x => x.DrawText(new TextGraphicsOptions() {
		TextOptions = new TextOptions() {
			HorizontalAlignment = HorizontalAlignment.Center,
			VerticalAlignment = VerticalAlignment.Center,
			WrapTextWidth = img.Width,
			ApplyKerning = true,
			DpiX = 100,
			DpiY = 100,
		},
		GraphicsOptions = new GraphicsOptions {
			Antialias = false,
			ColorBlendingMode = PixelColorBlendingMode.Normal
		}
	}, "Lorem ipsum dolor sit amet", SystemFonts.CreateFont("Tahoma", 8, FontStyle.Regular), Color.Black, new Point(0, 31)));
	img.SaveAsPng(filepath);
}

System Configuration

• ImageSharp.Drawing version:
  SixLabors.ImageSharp Version=1.0.3
  SixLabors.Fonts Version=1.0.0-beta0013
  SixLabors.ImageSharp.Drawing Version=1.0.0-beta11

• Other ImageSharp packages and versions: I tested with packages from MyGet with the same result
  SixLabors.Fonts Version=1.0.0-beta13.5.1
  SixLabors.ImageSharp Version=1.0.3
  SixLabors.ImageSharp.Drawing Version=1.0.0-beta11.8

• Environment: Windows 10 & Windows Nano Server

• .NET Framework version: .Net 5.0

[JimBobSquarePants]

Do you have your description correct? The left image is much smoother than the right to me?

[josellm]

Yes sorry, I updated the description

[JimBobSquarePants]

Thanks, I’ll have a look!

[tocsoft]

This will likely be due to the fact we don't have support for font hinting... which when implemented will potentially require an (at least partially) reimplementation of our current text rasterizer. We currently try and render each glyph as few a times as possible and the hinting might cause us to offset oddly when trying to reuse an earlier raster at a new location (but we might get lucky and it turns out fine).

[JimBobSquarePants]

I just did a quick test and antialiasing seems to correct most issues. @tocsoft would that be expected for a lack of font hinting?

Antialias = false

Antialias = true

It looks like something is broken with horizontal alignment with either our latest Fonts builds though. This is HorizontalAlignment.Center

[tocsoft]

yeah, anti-aliasing hides a lot of sins.

[josellm]

Hi,

I take photos to the final result, first using System.Drawing, second using SixLabors without antialiasing and third with antialiasing. Antialiasing with LCD display is not a good choice.

[JimBobSquarePants]

Thanks, yep. I was just confirming the expected behavior. We wouldn't suggest antialiasing as a workaround for LCD.

The only current workaround I would suggest would be to use a different font. We have an issue SixLabors/Fonts#30 that tracks hinting but will need assistance implementing it.

[antonfirsov]

This is a reasonable request, but we won't be able to make it into 1.0 (see #134 (comment)).