Imagesharp: Drawing crisp single pixel width text

[KLuuKer]

Prerequisites

• [x] I have written a descriptive issue title
• [x] I have verified that I am running the latest version of ImageSharp
• [x] I have verified if the problem exist in both DEBUG and RELEASE mode
• [x] I have searched open and closed issues to ensure it has not already been reported

Description

With the old System.Drawing i am using ZXing.Net to make it render a image like this

i tried allot of varations with the following (enabledisable AA, font sizes, pen width's, even dpi)
c# var top = height - 4; var font = new Font(FontCollection.SystemFonts.Find("Arial"), 10f, FontStyle.Regular); var pen = new Pen(Color.Black, 1); img.DrawText(orderTicket.Code, font, pen, new System.Numerics.Vector2(50, top), new TextGraphicsOptions(false));
but i cant get that nice crispy single pixel wide text (no need to concern yourself with the barcode that works just fine)

maybe @tocsoft can help with this

System Configuration

• ImageSharp version: 1.0.0-alpha3-00005
• ImageSharp Drawing version: 1.0.0-alpha3-00005
• Environment (Operating system, version and so on): windows 10 x64
• .NET Framework version: net461 (but if this works i'm switching to netcoreapp1.1)

[tocsoft]

don't use a pen instead use a brush or color

try
c# var top = height - 4; var font = new Font(FontCollection.SystemFonts.Find("Arial"), 10f, FontStyle.Regular); var brush = new SolidBrush(Color.Black); img.DrawText(orderTicket.Code, font, brush, new System.Numerics.Vector2(50, top), new TextGraphicsOptions(false));

Basically the rule of thumb is a Pen is used for outlining/drawing lines which may or may not have a pattern where as a Brush is used to fill it in.

[tocsoft]

BTW its awesome to see this usage of it the library. 👍

[KLuuKer]

hmmm that solidbrush definitely helped

AA on

AA off

it's just not that nice crispy pixel perfect aligned text that System.Drawing makes

[tocsoft]

The Font library doesn't currently perform pixel grid aligning which should help knock the glyphs over to better match the pixel layout. I've added an issue over there to track that. SixLabors/Fonts#19 pixel grid aligning should be part of the problem.

Additionally I've never tested trying to get a font to render at a single pixel width, i'll have to have a play to see if there anything quick I can do to improve the renderer for you.

You could try seeing if offsetting the text by half a pixel helps i.e. draw the text at new System.Numerics.Vector2(50.5, top) instead of 50. (should do the same thing as the pixel grid aligning but manually, might help.)

I'll have a play around with trying to draw the text at this size and see if I can make it "just work" for you.

[KLuuKer]

I tried the manual offset alignment but it only helped a tiny amount

If i would have to fix it like this i would have to align each and every single letternumber... 😢
So if you are able to perform pixel grid alignment that would be great!

https://en.wikipedia.org/wiki/ClearType that is the word that really describes this problem
or https://en.wikipedia.org/wiki/Subpixel_rendering

[tocsoft]

@KLuuKer try "1.0.0-alpha4-00021" or higher for both ImageSharp & ImageSharp.Drawing.

Its still not as good as System.Drawing because I'm still not doing font hinting and grid fitting but it should improve general font rendering making small glyphs render better.

You will want to render using anti-aliasing for the closest match.

[KLuuKer]

@tocsoft o wow this is so much better now, thank you very much for the quick (and huge) improvement in the rendering

even with aa turned off it also looks better then before

thank you very much for doing this, i can finally start setting fire to net461 😄 (it's a big app so it might take some time to burn)

[JimBobSquarePants]

Great work @tocsoft ! 💯