lvgl / lv_font_conv

Converts TTF/WOFF fonts to compact bitmap format
https://lvgl.io/tools/fontconverter
MIT License
178 stars 77 forks source link

Glyphs quality #15

Closed beibean closed 5 years ago

beibean commented 5 years ago

Hi @puzrin,

First of all, congratulations for the great job done with de font converter 😉.

I was migrating from LittlevGL v5.3 to LittlevGL v6.0 and found some issues discussed here.

I already understood more or less the stuff related with new paradigma. Whichever, the thing I am worry about is the quality of the glyphs with new font converter.

As I show in this post, there is a bit lost in glyph quality. I guess is not about the new font converter at all but for the method of getting the .ttf into image.

What do you think? It might be an special case, but is important on my project.

Do you know if is there any possibility to use the method used in LittlevGL v5.3 just for getting the glyphs images?

Thanks in advance

puzrin commented 5 years ago

Everybody welcome to test dev branch!

What is done:

Pending:

Left to others (C-related):


How to use: just checkout dev branch and use it as ordinary, no special actions needed.

kisvegabor commented 5 years ago

I've tried and it works well expect a minor issue in the writer. The header of the font looked like this:


#ifndef LV_FONT_ROBOTO_16
#define LV_FONT_ROBOTO_16 1
#endif

#if undefined

On the left is the old version, on the right is the new. They seem quite the same for me.

image

puzrin commented 5 years ago

If you have time - try 1bpp & 4bpp FreeSans, difference should be visible. On current screenshot i don't see difference at all. Are sources really different?

Please, report all found bugs in #23.

kisvegabor commented 5 years ago

Ups, my bad.

The new version is where the cursor on to the top of the list and the texts are longer. The new version looks sharper. See the t and T letters.

ezgif com-gif-maker

New

1

Old

2

puzrin commented 5 years ago

Yes, that's one of hinting method - it slightly change glyphs to fit more points into display pixels.

If someone don't like that, can add option to disable.

puzrin commented 5 years ago

It's strange - text width changed. Not sure is this correct or not.

puzrin commented 5 years ago

Try to create font without kerning. Seems it's missed (not used) in hinted sample.

kisvegabor commented 5 years ago

Disabling the kerning was no effect. I visually compared the kerning tables and they looked the same.

However, there are differences in the glyph dsc table:

Old

  {.bitmap_index = 0, .adv_w = 0, .box_h = 0, .box_w = 0, .ofs_x = 0, .ofs_y = 0} /* id = 0 reserved */,
    {.bitmap_index = 0, .adv_w = 63, .box_h = 0, .box_w = 0, .ofs_x = 0, .ofs_y = 0},
    {.bitmap_index = 0, .adv_w = 66, .box_h = 13, .box_w = 2, .ofs_x = 1, .ofs_y = -1},
    {.bitmap_index = 12, .adv_w = 82, .box_h = 4, .box_w = 4, .ofs_x = 1, .ofs_y = 8},
    {.bitmap_index = 21, .adv_w = 159, .box_h = 12, .box_w = 10, .ofs_x = 0, .ofs_y = 0},
    {.bitmap_index = 80, .adv_w = 144, .box_h = 16, .box_w = 9, .ofs_x = 0, .ofs_y = -2},
    {.bitmap_index = 148, .adv_w = 188, .box_h = 13, .box_w = 12, .ofs_x = 0, .ofs_y = -1},
    {.bitmap_index = 218, .adv_w = 159, .box_h = 13, .box_w = 10, .ofs_x = 0, .ofs_y = -1},
    {.bitmap_index = 280, .adv_w = 45, .box_h = 4, .box_w = 2, .ofs_x = 0, .ofs_y = 8},

New

  {.bitmap_index = 0, .adv_w = 0, .box_h = 0, .box_w = 0, .ofs_x = 0, .ofs_y = 0} /* id = 0 reserved */,
    {.bitmap_index = 0, .adv_w = 64, .box_h = 0, .box_w = 0, .ofs_x = 0, .ofs_y = 0},
    {.bitmap_index = 0, .adv_w = 80, .box_h = 12, .box_w = 3, .ofs_x = 1, .ofs_y = 0},
    {.bitmap_index = 10, .adv_w = 80, .box_h = 4, .box_w = 5, .ofs_x = 0, .ofs_y = 8},
    {.bitmap_index = 21, .adv_w = 176, .box_h = 12, .box_w = 9, .ofs_x = 1, .ofs_y = 0},
    {.bitmap_index = 75, .adv_w = 144, .box_h = 15, .box_w = 9, .ofs_x = 0, .ofs_y = -2},
    {.bitmap_index = 141, .adv_w = 192, .box_h = 12, .box_w = 12, .ofs_x = 0, .ofs_y = 0},
    {.bitmap_index = 205, .adv_w = 160, .box_h = 12, .box_w = 10, .ofs_x = 0, .ofs_y = 0},
    {.bitmap_index = 260, .adv_w = 48, .box_h = 4, .box_w = 3, .ofs_x = 0, .ofs_y = 8},

E.g. in the last line box_w = 2 has changed to box_w = 3 bur ofs_x remained 0.

puzrin commented 5 years ago

https://github.com/littlevgl/lv_font_conv/commit/1667bcd132bbf3ad575136dc8fea831c74587ee6

Fixed (i hope) hinting flags. Try update please.

Monochrome (1bpp)

Now monochrome hinter is really used. Dump looks very cool. I'm satisfied.

Others (2bpp+)

Switched to less aggressive hinter (FT_LOAD_TARGET_LIGHT). It adds only horizontal improvements, and doesn't touch vertical lines. As a result - kerning space not affected.

Difference is small for Roboto, but notable for FreeSans.

Using more aggressive hinting (FT_LOAD_TARGET_NORMAL) requires harfbuzz to compensate distortion. I'd say, current settings should be good enougth.

puzrin commented 5 years ago

@kisvegabor

https://github.com/littlevgl/lv_font_conv/issues/15#issuecomment-531268361

I could not reproduce this bug with undefined. Tried both CLI and npm start. Got there "font name" as expected. If it still exists - need info how to reproduce.

Starting to fix missed property with compression ID.

kisvegabor commented 5 years ago

Great! Now the text has quite the same length. However, I've noticed that the rt in "Char" has no letter space. It's not the kerning because it's the same with disabled kerning.

image

I could not reproduce this bug with undefined. Tried both CLI and npm start. Got there "font name" as expected. If it still exists - need info how to reproduce.

Sorry, I didn't mention, it's ok now. git was tricked me. :)

puzrin commented 5 years ago

However, I've noticed that the rt in "Char" has no letter space. It's not the kerning because it's the same with disabled kerning.

Is this a problem we should solve? For example tt on Button are also close, and that's normal. We should care not about "pixels" but about readability.

Technically, if you wish to experiment with disabled hinting at all, you can comment here first line and else block (may be first one will be enougth). But IMHO current light hinting should be always better than without.

kisvegabor commented 5 years ago

IMO such spacing issues looks ugly and unexpected but probably what we gain with hinting is more than we lose on spacing.

puzrin commented 5 years ago

That may be subjective, but i don't reject adding CLI flags to tune hinting if anyone interested.

At current moment, i have no ideas what else can be changed or improved in convertor. It can be released, if no sudden bugs found. It would be nice to get "C" help with rest of tasks in #23, but those are not critical for release.

I think, current issue can be closed.

kisvegabor commented 5 years ago

That may be subjective, but i don't reject adding CLI flags to tune hinting if anyone interested.

It sounds good to allow people to fine-tune the hinting if needed.

It would be nice to get "C" help with rest of tasks in #23, but those are not critical for release.

I think I can't do them better than you. :)

If the hinting flags are added, I agree that the new version can be released.

I'll update v6.1 with the new fonts and add the compressed version of the 28px font too. The online converter also needs to be updated with "Compress" checkbox.

puzrin commented 5 years ago

I think I can't do them better than you. :)

Yeah, my C looks like your JS :)

If the hinting flags are added, I agree that the new version can be released.

Could you describe exactly, which flags needed? Or even better - provide desired combinations of flags for FT_Load_Glyph call?

At first glance, there are this possibilities:

But i'm not sure all those are really needed, and don't like garbage options just for abstract "freedom". IMO option --no-autohinting could be enought, and only if anyone says he really need it.

puzrin commented 5 years ago

After thinking a bit, seems autohinting control should be on font-level, not global.

So, 2 options, per font:

puzrin commented 5 years ago

https://github.com/littlevgl/lv_font_conv/commit/9062e52f8a5d45b8a43c112648495f96758120c8

Added autohinting control option. With low probability may be useful for iconic fonts.

Seems only intensive testing needed for convertor release.

embeddedt commented 5 years ago

It would be very nice is someone more experienced could help with emscripten. FreeType build issue does not depend on JS at all.

@puzrin It sounds like you've made some changes since you wrote that comment. What still needs to be done?

puzrin commented 5 years ago

@embeddedt

puzrin commented 5 years ago

Any news? Should we keep this issue open? Can i merge dev into master for more intensive use?

embeddedt commented 5 years ago

Any news?

I've begun working on it locally but I haven't pushed anything yet.

Should we keep this issue open?

I think it can be closed. We can use #23 for tracking improvements to the Docker image.

Can i merge dev into master for more intensive use?

Since it builds properly now and works I think it should be safe to merge it into master, provided that compression is disabled by default (since LittlevGL 6.0 doesn't support it).

puzrin commented 5 years ago

provided that compression is disabled by default (since LittlevGL 6.0 doesn't support it).

It was always enabled by default (in previous version too)

puzrin commented 5 years ago

merged dev to master