Drawing crisp single pixel width text

[KLuuKer]

Prerequisites

• I have written a descriptive issue title
• I have verified that I am running the latest version of ImageSharp
• I have verified if the problem exist in both DEBUG and RELEASE mode
• 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 (enable\disable AA, font sizes, pen width's, even dpi)

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

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 letter\number... 😢
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 ! 💯

[jez9999]

@KLuuKer All the same, it still doesn't reproduce that pixel-perfect aligned text produced by System.Drawing, does it? I totally know what you mean by that, it makes Arial look just perfect.

@tocsoft Was this ever fixed with ImageSharp? I've been experimenting with the latest (1.0.0-beta15) and as this issue above says, antialiased looks alright (though not the same as the "pixel perfect" look; possibly a bit too fuzzy), and unantialiased is atrocious:

[JimBobSquarePants]

Try the latest Fonts library MyGet build with hinting enabled. I’ve just done a ton of work there.

P.S ClearType contains a bunch of hacks to make old fonts like Arial look good at low resolution. Other font layout libraries like FreeType have opted not to include those hacks as they add massive development complexity at the cost of performance. We’ve opted to do the same.

P.P.S We don’t use the word atrocious here. It’s not nice to be negative.

[jez9999]

Wasn't intended as a negative, more as a factual description of how difficult it is to actually read. :-)

Sorry, I don't know what you mean by the MyGet?

[JimBobSquarePants]

MyGet is where we host our nightly builds.

https://github.com/SixLabors/Fonts#installation

[Kiritsu]

Hey @jez9999, have you found a good configuration to make it render as good as possible?

I've tried lots of different fonts (including "pixel-like" fonts), playing with the Brushes/Pens and Hinting. Probably a me-problem but I couldn't manage to play with aliasing's options.

I couldn't get something clearer than this:

If you zoom it you can see different shade of black:

My wish would be to limit that amount of shade, even if it lowers the general quality, but I couldn't manage to get something better than this.

It is an issue to me right now because I have something that then attempts to replace the color around the text (sadly without any tolerance) which then makes the final rendering a bit weird.

[JimBobSquarePants]

Probably a me-problem but I couldn't manage to play with aliasing's options.

What do you mean by this? Are you using the 1.0.0-beta19. The hinter has been fixed and works the same as Freetype's one now.

It is an issue to me right now because I have something that then attempts to replace the color around the text (sadly without any tolerance) which then makes the final rendering a bit weird.

That's more an issue than the font rendering IMO. You always need tolerance when doing color replacement. ImageSharp.Drawing has a RecolorBrush to do this.

Though of course the smart thing to do would be to draw the text onto the correct colored background in the first place.

[JimBobSquarePants]

@AnastasiiaShta This is a closed issue. Please open a new discussion or issue in the correct repository with the relevant details.

[AnastasiiaShta]

@AnastasiiaShta This is a closed issue. Please open a new discussion or issue in the correct repository with the relevant details.

I'm new here, sorry.
I opened a new one here:
https://github.com/SixLabors/ImageSharp/discussions/2318
Thank you.