Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Characters with an underscore in their name will get a default IconXXX name #6

Closed
jsroest opened this issue Nov 14, 2019 · 6 comments
Closed

Comments

@jsroest
Copy link

jsroest commented Nov 14, 2019

It looks like individual fonts that have an underscore in their name will get a default name like
IconXXX

See for example this font:
https://github.com/jossef/material-design-icons-iconfont/blob/master/dist/fonts/MaterialIcons-Regular.ttf

It has two characters that I need (print and print_disabled):
https://github.com/jossef/material-design-icons-iconfont/blob/master/dist/material-design-icons.css

  .material-icons.print:before {
    content: "\e8ad"; }
  .material-icons.print_disabled:before {
    content: "\e9cf"; }

The c# code result is:

public const string Print = "\ue8ad";
public const string Icon224 = "\ue9cf";

The expected result would be:

public const string Print = "\ue8ad";
public const string PrintDisabled = "\ue9cf";
@andreinitescu
Copy link
Owner

Using the .ttf and the .css you mentioned, I get this:

image

I do not get public const string Icon224 = "\ue9cf like you mentioned.

Did you select the CSS file using this button on the right:
image

@jsroest
Copy link
Author

jsroest commented Nov 14, 2019

I did not use the css file (maybe should have), just uploaded the ttf and clicked copy to clipboard.

@andreinitescu
Copy link
Owner

Let me know how it works for you, and if it does, please close the issue.

Does the CSS feature makes sense to you? Let me know if you have ideas of how to improve the tool. Thanks.

@jsroest
Copy link
Author

jsroest commented Nov 14, 2019

The tool works great, and also when using the css file, it works as expected. But if you omit the css file then the behavior as I described happens.

You might improve the tool by parsing the names correctly when not using a css file. (And then I assume that the individual glyphs have names in the ttf file, but with underscores in them).

@jsroest jsroest closed this as completed Nov 14, 2019
@andreinitescu
Copy link
Owner

andreinitescu commented Nov 14, 2019

@jsroest

I assume that the individual glyphs have names in the ttf file, but with underscores in them

Actually no, the font doesn't have glyphs with names, you can see it on the left side, there's a blank above the hex value (if the glyph name exists, it's being displayed):

image

It might be confusing that even though the font has no names for any of the glyphs, you could still see that some of the glyphs do get a name in the C# code:
image

This is because of I have a mapping between some known fonts and their CSS/ijmap counterpart, like how I described here.
I basically check in the list here if there's a match based on the font name, and if there is, I try to use the file from 'mappingUrl' field.
The issue is, in the case of your font, that font is a fork of Google's Material Font and it's using the same name! ("Material Icons"), but the font is actually different. So the ijmap is from Google's font, but your font has a CSS...

I could probably think of another way to do the mapping (beside the name, maybe use the version too?) but it can become complicated since versions can change... Ideally the guy who forked from Google's font should had used another font name, because he created a different font.

@jsroest
Copy link
Author

jsroest commented Nov 14, 2019

Great explanation!

You are right, I did assume there were names in the font because the only file I supplied was the font file and nothing else.

The problem with Google's material font is that google does not update it anymore. There are a lot of new icons in the material library, but the font file is not updated, so it is not complete.
google/material-design-icons#786

I think you should not make another way of doing the mapping, don't make it more complicated.

Maybe you could add some counters to the website:

  • nr of glyphs found with a name in ttf (=90%)
  • nr of glyphs found without a name in ttf (10%)
  • nr glyphs with a name resolved from css (0%)
  • nr glyphs with a name not resolved from css (0%)
  • the source of the names that is used: (uploaded / internal)

Thanks, I learned something today!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants