CSS/Html - Web via Glyphs

Scripting
1

Hi all,

I try to update an Icon-Font via Glyphs 2.
I also want to create an overview of the Icons via html/css-sheet, also for the programmer.
(before, I just made a screenshot of the glyphs-overview but, could be more comfortable to get the Hex-Values)

now:

a)
Is there a possibility to show the Unicode/Css AND the Hex/Html ›names‹ in the Glyphs overview? (uniE60 | /E600 and &#58881 etc.)
Now there are just the unicode names, which i have to »decode« to html …).

b)
An improvement (for web an icons fonts) would be an export-function to build a »glyph-table« automaticly (f.e. like ico-moon does)?
I would try to make a script to do this automaticly, but i have just a few skills, so it takes a long time :slight_smile:

thx

2

a) if you make the grid view big enough, you should see the unicode values in the font view, or switch to the list mode.
b) a script would be the best option. That gives the best flexibility.

3
If you can take care of the HTML/CSS, I can do the Python scripting. Send me an e-mail: res (at) this website without www.
4

I made a little Fontviewer Utility some time ago for similar reasons. Drop your iconfont on the app and it displays some Info about the font including a complete glyphlist. If you hover a glyph in the glyphlist, it shows you the html code in decimal and hex as a tooltip.
If you need a html file, turn on Debugmode in the app defaults, so you can save the html output to disc and modify it as you wish.

http://www.artcs.de/public/Fontviewer.dmg

5

ok, thank you.

@art: I will try it

@mekka: I have send a mail

6

Hi all,

(I dig this post out again because he fits the theme)

I try to script this ‘HTML-Glyph-Table’. So far everything works fine and I am on the last steps…

Now the question:

It would be very comfortable if I could export the ‘web-font-packages’ via script (and not do this via cmd-e, looking for the folder etc…).

Is there a code method to do this in a ‘simpel’ py-script command? (I mean not in a ‘plugin-way’). I was looking for the right scripting-method, but don’t find - or understand - something like: exportWebFont(MyPath) …

I fear this could be a bit more complicated?!

This would be a great last step to finish the script in the next few days …

Thanks
nevu

7

This is currently not possible. But I will try to fix that.

8

Thank you,

would be great to keep a nice workflow.

9

Why not save it in Glyphs.defaults[“WebfontPluginExportPath”]?

10

mmmh,

this will set ‘myPath’ as the directory, right?
still I have to export the font in glyph, or?

11

I would let the user export the font, and whenever he wants, he can have the HTML/CSS written to the same output folder.

12

@mekka:
This was also my first method.

But now I ‘link’ the export to the font.glyphs,
and build this structure (especially for programmer):

(main-folder + font.glyphs)
table-folder + html
styles-folder + styles.css + fonts.css
fonts-folder + webfont-packages

@mekka: In your method I had to build the folder ‘fonts’ ‘around’ the web-fonts.

Maybe I just set the webexport-path to the actual fonts folder and let the user do the rest, for now …

13

Hi all,

I finished working on this problem,
maybe this could help somebody now:

https://github.com/Nevu/IconFont

any suggestions welcome :slight_smile:

14

Hi nevu,

great script! This is what i was looking for. I got it working some days ago somehow, but now i get this error:

http://pbrd.co/1qFFEas

Somehow i can’t let the script write files or create folders (I encounter the same problem with other scripts). Is there an other threat about this already? Couldn’t find.

I also encountered a little problem with the css. Since I have an Icon im my font called “box”, the font class clashed with the glyph table layout class “.icon_box”. Maybe the layout classes could be named “.icon-box”, “.icon-panel” etc.

Thank you, would be great to use this in my workflow!

15

You most likely have the App Store version. The sandboxing blocks the scripts.

The easies workaround is to use a path inside: ~/Library/Containers/com.schriftgestaltung.Glyphs

Or use a NSOpenDialog to define the output path.