gkh-fontcustom 1.3.7

data/lib/fontcustom/scripts/generate.py

@@ -0,0 +1,128 @@
+import fontforge
+import os
+import subprocess
+import tempfile
+import json
+
+#
+# Manifest / Options
+# Older Pythons don't have argparse, so we use optparse instead
+#
+
+try:
+    import argparse
+    parser = argparse.ArgumentParser()
+    parser.add_argument('manifest', help='Path to .fontcustom-manifest.json')
+    args = parser.parse_args()
+    manifestfile = open(args.manifest, 'r+')
+except ImportError:
+    import optparse
+    parser = optparse.OptionParser()
+    (nothing, args) = parser.parse_args()
+    manifestfile = open(args[0], 'r+')
+
+manifest = json.load(manifestfile)
+options = manifest['options']
+
+#
+# Font
+#
+
+design_px = options['font_em'] / options['font_design_size']
+
+font = fontforge.font()
+font.encoding = 'UnicodeFull'
+font.design_size = options['font_design_size']
+font.em = options['font_em']
+font.ascent = options['font_ascent']
+font.descent = options['font_descent']
+font.fontname = options['font_name']
+font.familyname = options['font_name']
+font.fullname = options['font_name']
+if options['autowidth']:
+    font.autoWidth(0, 0, options['font_em'])
+
+#
+# Glyphs
+#
+
+def removeSwitchFromSvg( file ):
+    svgfile = open(file, 'r')
+    svgtext = svgfile.read()
+    svgfile.close()
+    tmpsvgfile = tempfile.NamedTemporaryFile(suffix=".svg", delete=False)
+    svgtext = svgtext.replace('<switch>', '')
+    svgtext = svgtext.replace('</switch>', '')
+    tmpsvgfile.file.write(svgtext)
+    tmpsvgfile.file.close()
+
+    return tmpsvgfile.name
+
+def createGlyph( name, source, code ):
+    frag, ext = os.path.splitext(source)
+
+    if ext == '.svg':
+        temp = removeSwitchFromSvg(source)
+        glyph = font.createChar(code)
+        glyph.importOutlines(temp)
+        os.unlink(temp)
+
+        if options['autowidth']:
+            glyph.left_side_bearing = glyph.right_side_bearing = 0
+            glyph.round()
+        else:
+            glyph.width = options['font_em']
+            width = glyph.width - glyph.left_side_bearing - glyph.right_side_bearing
+            aligned_to_pixel_grid = (width % design_px == 0)
+            if (aligned_to_pixel_grid):
+                shift = glyph.left_side_bearing % design_px
+                glyph.left_side_bearing = glyph.left_side_bearing - shift
+                glyph.right_side_bearing = glyph.right_side_bearing + shift
+
+for glyph, data in manifest['glyphs'].iteritems():
+    name = createGlyph(glyph, data['source'], data['codepoint'])
+
+#
+# Generate Files
+#
+
+try:
+    fontfile = options['output']['fonts'] + '/' + options['font_name']
+    if not options['no_hash']:
+        fontfile += '_' + manifest['checksum']['current'][:32]
+
+    # Generate TTF and SVG
+    font.generate(fontfile + '.ttf')
+    font.generate(fontfile + '.svg')
+    manifest['fonts'].append(fontfile + '.ttf')
+    manifest['fonts'].append(fontfile + '.svg')
+
+    # Fix SVG header for webkit
+    # from: https://github.com/fontello/font-builder/blob/master/bin/fontconvert.py
+    svgfile = open(fontfile + '.svg', 'r+')
+    svgtext = svgfile.read()
+    svgfile.seek(0)
+    svgfile.write(svgtext.replace('''<svg>''', '''<svg xmlns="http://www.w3.org/2000/svg">'''))
+    svgfile.close()
+
+    # Convert WOFF
+    scriptPath = os.path.dirname(os.path.realpath(__file__))
+    try:
+        subprocess.Popen([scriptPath + '/sfnt2woff', fontfile + '.ttf'], stdout=subprocess.PIPE)
+    except OSError:
+        # If the local version of sfnt2woff fails (i.e., on Linux), try to use the
+        # global version. This allows us to avoid forcing OS X users to compile
+        # sfnt2woff from source, simplifying install.
+        subprocess.call(['sfnt2woff', fontfile + '.ttf'])
+    manifest['fonts'].append(fontfile + '.woff')
+
+    # Convert EOT for IE7
+    subprocess.call('python ' + scriptPath + '/eotlitetool.py ' + fontfile + '.ttf -o ' + fontfile + '.eot', shell=True)
+    subprocess.call('mv ' + fontfile + '.eotlite ' + fontfile + '.eot', shell=True)
+    manifest['fonts'].append(fontfile + '.eot')
+
+finally:
+    manifestfile.seek(0)
+    manifestfile.write(json.dumps(manifest, indent=2, sort_keys=True))
+    manifestfile.truncate()
+    manifestfile.close()

data/lib/fontcustom/templates/_fontcustom-rails.scss

@@ -0,0 +1,14 @@
+//
+// Icon Font: <%= font_name %>
+//
+
+<%= font_face(url: "font-url", path: @font_path_alt) %>
+
+[data-icon]:before { content: attr(data-icon); }
+
+[data-icon]:before,
+<%= glyph_selectors %> {
+<%= glyph_properties %>
+}
+
+<%= glyphs %>

data/lib/fontcustom/templates/_fontcustom.scss

@@ -0,0 +1,16 @@
+//
+// Icon Font: <%= font_name %>
+//
+
+<%= font_face(path: @font_path_alt) %>
+
+[data-icon]:before { content: attr(data-icon); }
+
+[data-icon]:before,
+<%= glyph_selectors %> {
+<%= glyph_properties %>
+}
+
+<%= glyphs %>
+<% @glyphs.each do |name, value| %>
+$font-<%= font_name.gsub(/[^\w\d_]/, '-') %>-<%= name.to_s %>: "\<%= value[:codepoint].to_s(16) %>";<% end %>

data/lib/fontcustom/templates/fontcustom-preview.html

@@ -0,0 +1,174 @@
+<% scale = %w|12 14 16 18 21 24 36 48 60 72| %><!DOCTYPE html>
+<html>
+  <head>
+    <title><%= font_name %> glyphs preview</title>
+
+    <style>
+      /* Page Styles */
+
+      * {
+        -moz-box-sizing: border-box;
+        -webkit-box-sizing: border-box;
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+      }
+
+      body {
+        background: #fff;
+        color: #444;
+        font: 16px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
+      }
+
+      a,
+      a:visited {
+        color: #888;
+        text-decoration: underline;
+      }
+      a:hover,
+      a:focus { color: #000; }
+
+      header {
+        border-bottom: 2px solid #ddd;
+        margin-bottom: 20px;
+        overflow: hidden;
+        padding: 20px 0;
+      }
+
+      header h1 {
+        color: #888;
+        float: left;
+        font-size: 36px;
+        font-weight: 300;
+      }
+
+      header a {
+        float: right;
+        font-size: 14px;
+      }
+
+      .container {
+        margin: 0 auto;
+        max-width: 1200px;
+        min-width: 960px;
+        padding: 0 40px;
+        width: 90%;
+      }
+
+      .glyph {
+        border-bottom: 1px dotted #ccc;
+        padding: 10px 0 20px;
+        margin-bottom: 20px;
+      }
+
+      .preview-glyphs { vertical-align: bottom; }
+
+      .preview-scale {
+        color: #888;
+        font-size: 12px;
+        margin-top: 5px;
+      }
+
+      .step {
+        display: inline-block;
+        line-height: 1;
+        position: relative;
+        width: 10%;
+      }
+
+      .step .letters,
+      .step i {
+        -webkit-transition: opacity .3s;
+        -moz-transition: opacity .3s;
+        -ms-transition: opacity .3s;
+        -o-transition: opacity .3s;
+        transition: opacity .3s;
+      }
+
+      .step:hover .letters { opacity: 1; }
+      .step:hover i { opacity: .3; }
+
+      .letters {
+        opacity: .3;
+        position: absolute;
+      }
+
+      .characters-off .letters { display: none; }
+      .characters-off .step:hover i { opacity: 1; }
+
+      <% scale.each do |n| %>
+      .size-<%= n %> { font-size: <%= n %>px; }
+      <% end %>
+
+      .usage { margin-top: 10px; }
+
+      .usage input {
+        font-family: monospace;
+        margin-right: 3px;
+        padding: 2px 5px;
+        text-align: center;
+      }
+
+      .usage .point { width: 150px; }
+
+      .usage .class { width: 250px; }
+
+      footer {
+        color: #888;
+        font-size: 12px;
+        padding: 20px 0;
+      }
+
+      /* Icon Font: <%= font_name %> */
+
+      <%= font_face(path: @font_path_preview) %>
+
+      [data-icon]:before { content: attr(data-icon); }
+
+      [data-icon]:before,
+      <%= glyph_selectors %> {
+      <%= glyph_properties %>
+      }
+
+      <%= glyphs %>
+    </style>
+
+    <!--[if lte IE 8]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
+
+    <script>
+      function toggleCharacters() {
+        var body = document.getElementsByTagName('body')[0];
+        body.className = body.className === 'characters-off' ? '' : 'characters-off';
+      }
+    </script>
+  </head>
+
+  <body class="characters-off">
+    <div id="page" class="container">
+      <header>
+        <h1><%= font_name %> contains <%= @glyphs.length %> glyphs:</h1>
+        <a onclick="toggleCharacters(); return false;" href="#">Toggle Preview Characters</a>
+      </header>
+
+      <% @glyphs.each do |name, value|
+        selector = @options[:css_selector].sub('{{glyph}}', name.to_s) %>
+      <div class="glyph">
+        <div class="preview-glyphs">
+          <% scale.each do |n| %><span class="step size-<%= n %>"><span class="letters">Pp</span><i id="<%= selector[1..-1] %>" class="<%= selector[1..-1].gsub('.', ' ') %>"></i></span><% end %>
+        </div>
+        <div class="preview-scale">
+          <% scale.each do |n| %><span class="step"><%= n %></span><% end %>
+        </div>
+        <div class="usage">
+          <input class="class" type="text" readonly="readonly" onClick="this.select();" value="<%= selector %>" />
+          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#x<%= value[:codepoint].to_s(16) %>;" />
+        </div>
+      </div>
+      <% end %>
+
+      <footer>
+        Made with love using <a href="http://fontcustom.com">Font Custom</a>.
+      </footer>
+    </div>
+  </body>
+</html>

data/lib/fontcustom/templates/fontcustom.css

@@ -0,0 +1,14 @@
+/*
+  Icon Font: <%= font_name %>
+*/
+
+<%= font_face %>
+
+[data-icon]:before { content: attr(data-icon); }
+
+[data-icon]:before,
+<%= glyph_selectors %> {
+<%= glyph_properties %>
+}
+
+<%= glyphs %>

data/lib/fontcustom/templates/fontcustom.yml

@@ -0,0 +1,96 @@
+# =============================================================================
+# Font Custom Configuration
+#   This file should live in the directory where you run `fontcustom compile`.
+#   For more info, visit <https://github.com/FontCustom/fontcustom>.
+# =============================================================================
+
+
+# -----------------------------------------------------------------------------
+# Project Info
+# -----------------------------------------------------------------------------
+
+# The font's name. Also determines the file names of generated templates.
+#font_name: icons
+
+# Format of CSS selectors. {{glyph}} is substituted for the glyph name.
+#css_selector: .i-{{glyph}}
+
+# Generate fonts without asset-busting hashes.
+#no_hash: true
+
+# Encode WOFF fonts into the generated CSS.
+#base64: true
+
+# Forces compilation, even if inputs have not changed
+#force: true
+
+# Display (possibly useful) debugging messages.
+#debug: true
+
+# Hide status messages.
+#quiet: true
+
+
+# -----------------------------------------------------------------------------
+# Input / Output Locations
+#   You can save generated fonts, CSS, and other files to different locations
+#   here. Font Custom can also read input vectors and templates from different
+#   places.
+#
+#   NOTE:
+#   - Be sure to preserve the whitespace in these YAML hashes.
+#   - INPUT[:vectors] and OUTPUT[:fonts] are required. Everything else is
+#     optional.
+#   - Specify output locations for custom templates by including their file
+#     names as the key.
+# -----------------------------------------------------------------------------
+
+#input:
+#  vectors: my/vectors
+#  templates: my/templates
+
+#output:
+#  fonts: app/assets/fonts
+#  css: app/assets/stylesheets
+#  preview: app/views/styleguide
+#  my-custom-template.yml: path/to/template/output
+
+
+# -----------------------------------------------------------------------------
+# Templates
+#   A YAML array of templates and files to generate alongside fonts. Custom
+#   templates should be saved in the INPUT[:templates] directory and referenced
+#   by their base file name.
+#
+#   For Rails and Compass templates, set `preprocessor_path` as the relative
+#   path from OUTPUT[:css] to OUTPUT[:fonts]. By default, these are the same
+#   directory.
+#
+#   Included in Font Custom: preview, css, scss, scss-rails
+#   Default: css, preview
+# -----------------------------------------------------------------------------
+
+#templates:
+#- scss-rails
+#- preview
+#- my-custom-template.yml
+
+#preprocessor_path: ../fonts/
+
+
+# -----------------------------------------------------------------------------
+# Font Settings (defaults shown)
+# -----------------------------------------------------------------------------
+
+# Size (in pica points) for which your font is designed.
+#font_design_size: 16
+
+# The em size. Setting this will scale the entire font to the given size.
+#font_em: 512
+
+# The font's descent and descent. Used to calculate the baseline.
+#font_ascent: 448
+#font_descent: 64
+
+# Horizontally fit glyphs to their individual vector widths.
+#autowidth: false