LayoutFarm / Typography

C# Font Reader (TrueType / OpenType / OpenFont / CFF / woff / woff2) , Glyphs Layout and Rendering
Other
401 stars 82 forks source link

implement TrueType Hinting / AutoFit #10

Open prepare opened 7 years ago

prepare commented 7 years ago
prepare commented 7 years ago

hinting1

from the picture, PixelFarm's Typography now supports TrueType Hinting,

prepare commented 7 years ago

I think, I need to fix the Hinting! It not as clear as expect. :(

hinting2

prepare commented 7 years ago

@MikePopoloski , Thank you for your attention. :)

I bring TrueType Hinting code from your repo. (now locate in https://github.com/LayoutFarm/Typography/blob/master/NetCore/PixelFarm.OpenType/TrueTypeInterperter/Interpreter.cs).

I don't change the inner logic.

I found the the hinted result look blur and not as clear as expect. (see above).

Do you have any suggestions about how to fix that?

MikePopoloski commented 7 years ago

It works correctly in my repo right? I see that you've changed the code, so I can only assume you've introduced a bug or aren't handling some part of the font parsing correctly.

prepare commented 7 years ago

closer look :) compare side-by-side.

  1. SharpFont: Hinted-> use bitmap texture. (fix pixel position)
  2. PixelFarm's Typography: Hint -> render each glyph vertex buffer directly to canvas (vary in glyph pixel position)
  3. MS Notepad : reference

Tahoma, 11 pts.

each hinted glyphs are very similar. diff in glyph spacing-> I will fix it later.

I think both of them have the same hint problem. eg. 'k' glyph -> left upper 'arm' is not sharp I will investigate further.

goals: to improve glyph quality in both libs

hinting4


from http://www.antigrain.com/research/font_rasterization/

(Maxim Shemanarev's Agg)

...

text_tt_hinting_13pix

This is how the patented aggressive hinting works for the nominal size of 13 pixels. This is why the strokes in “k” look so fragile, almost invisible.

prepare commented 7 years ago

hinting5

MikePopoloski commented 7 years ago

It's certainly possibly that there's a bug in my interpreter. Other things to check though: are there embedded bitmaps at this strike size? Also remember that GDI has 3x horizontal resolution thanks to ClearType. You can kind of simulate what the interpreter will do by just giving it 3x more horizontal DPI.

I would try verifying against FreeType and DirectWrite. DWrite has modes to render without ClearType and usually more closely matches what's actually in the font data.

For the blurry stems, that's all about positioning on a pixel boundary. Your layout algorithm probably needs to be smarter about subpixel advances.

prepare commented 7 years ago

Thank you so much :)

prepare commented 7 years ago

(Maxim Shemanarev's Agg)

in short...

So, in short words, for the nice looking text with accurate horizontal positioning we need the following.

1. Use horizontal RGB sub-pixel anti-aliasing for LCD flat panels.
2. Use vertical hinting only and completely discard the horizontal one.
3. Use accurate glyph advance values, calculated at a high resolution for unhinted glyphs.
4. Use accurate, high resolution values from the kerning table.

...

To keep vertical hinting but discard horizontal we simply cheat the hinter. We stretch the symbols horizontally so that, the hinter would have to work with high accuracy in the X direction

...

So, I want to ask David Turner, maybe it makes sense to add an option to his auto-hinter that would modify the Y-direction only, completely discarding the X coordinates. It even can be a special, 1-D hinter that is supposed to be much simpler than the existing one.

related resource : http://jcgt.org/published/0002/01/04/paper.pdf

prepare commented 7 years ago

contour analysis2, with polytri-cs (https://github.com/PaintLab/poly2tri-cs) small yellow points => center of each triangle

triangulate1

prepare commented 7 years ago

Attempt to do AutoFit, (without original TrueType instruction).

before do grid fitting typo_grid1

triangulate1


glyph 'x' triangulation: tri01


connected centroid1

glyph_centroid1


connected centroid 2 glyph_x


connected centroid 3

glyph_x2


connected centroid 4

glyph_m2


glyph_m


glyph 'm' edges analysis by triangulation we can separate inside, outside edges glyph_edges

prepare commented 7 years ago

Maxim's Agg Vertical Hinting

pic 1: tt_maxim


pic2: tt_maxim2


pic3: tt_maxim3


(font: Tahoma, 8pts)

zwcloud commented 7 years ago

For glyph outline tessellation, you may want to try https://github.com/speps/LibTessDotNet. It works well on .NET core.

prepare commented 7 years ago

Glyph 'a' : autofit + vertical hinting + agg's subpixel rendering

Need some color adjustment :)

lcd_04

prepare commented 7 years ago

Preview Latest AutoFit + SubPixelRendering

glyph_analysis_e_26

pic 1: Tahoma, 8 pt, (1) No AutoFit , (2) with AutoFit, Tahoma, 10pt, (3) No AutoFit, (4) with AutoFit

from 1, you can see horizontal stem of 'e' in (4) is sharper than (3)

prepare commented 7 years ago

Preview, Gdi+ vs the Typography

Windows Gdi+ image (SubPixel Rendering, LCD technique) and its zoom pic. vs PixelFarm's Typography Glyph Rendering, with Vertical AutoFit + Horizontal Fit alignment. Tahoma 8 pts.

autofit_hfit01

pic 1: upper(1) Gdi+ vs (2) Typography subpixel (lcd) rendering vs (3) Typography gray-scale


Visit the old problem (above), r-r-r sequence hinting5

pic 2: Dec 2016, Tahoma 11 pts


autofit02

pic 3: May 2017, Tahoma 11 pts

autofit03_1 pic 4: May 2017, Tahoma 8 pts


TrueType Instruction vs Typography's AutoFit

autofit04 pic 5: TrueType Instruction Hinted Glyph (Dec 2016), Tahoma 11 pts

autofit03

pic 6: Typography's AutoFit, with some inter-glyph err at q-u, f-o, and text is too bold

autofit03_2 pic 7: Typography's AutoFit + Lcd SubPixelRendering, Tahoma 8pts with some inter-glyph err at w-n


Tahoma 8 pts,

autofit_f1

pic 8: vertical-autofit, and horizontal fit alignment


autofit_f3

pic 9: vertical-autofit, NO horizontal fit alignment


autofit_f2

pic 10: vertical-autofit, and horizontal fit alignment