add feature code to download page

Author: eigilnikolajsen

index.html

@@ -551,8 +551,9 @@ <h2>Choose download alternate characters</h2>
                                     <br />
                                     <p>
                                         Download all 34 cuts with your custom settings + source variable fonts (.tff &
-                                        .woff2) for design. Variable fonts don’t contain custom settings. Use OpenType
-                                        features to expose, see exact features in docs.
+                                        .woff2) for design. Variable fonts don’t contain custom settings. Use these
+                                        OpenType features for current custom settings:
+                                        <span id="custom_feature_code" tabindex="0" data-edit="true"></span>
                                     </p>
                                     <br />
                                     <br />

src/js/code_section.js

@@ -53,8 +53,18 @@ async function updateCodeFont() {
             updateCode(null, codeForm)
         })
         .catch((err) => console.log(err))
+
+    // opentype
+    //     .load("src/fonts/CommitMonoV133-500Regular.ttf")
+    //     .then((font) => {
+    //         console.log(font)
+    //         console.log(font.toTables())
+    //         // font.download()
+    //     })
+    //     .catch((err) => console.log(err))
+
     // opentype
-    //     .load("src/fonts/CommitMonoV133-700Regular.otf")
+    //     .load("src/fonts/CommitMonoV133-500Regular.otf")
     //     .then((font) => {
     //         console.log(font)
     //         console.log(font.toTables())

src/js/download_wizard.js

@@ -228,9 +228,13 @@ function makeCustomFont(settings) {
             font.tables.cff.topDict.fullName = font.names.fullName.en
             font.tables.cff.topDict.weight = settings.weight == 700 ? "Bold" : "Regular"
 
+            // set correct mac style
             const macStyles = ["Regular", "Italic", "Bold", "Bold Italic"]
             font.tables.head.macStyle = macStyles.indexOf(settings.style)
 
+            // set correct numberOfHMetrics (3 is monospace)
+            font.tables.hhea.numberOfHMetrics = 3
+
             // make the font.tables.name equal to that of font.names
             font.tables.name = font.names
 

src/js/example_section.js

@@ -214,9 +214,17 @@ function updateExampleSettings(event, form, isDefault) {
         const label = document.querySelector(`#alt_${entry[0]}`)
         if (label) label.style.fontFeatureSettings = entry[1]
     }
+    output = output.slice(0, -2)
     // console.log(downloadSettingsCustom)
     const codeExample = document.querySelector("#code_example")
-    codeExample.style.fontFeatureSettings = output.slice(0, -2)
+    codeExample.style.fontFeatureSettings = output
+
+    const customFeatureCode = document.querySelector("#custom_feature_code")
+    const shortFeatureCode = output
+        .split(", ")
+        .filter((f) => f.includes("on"))
+        .join(", ")
+    customFeatureCode.textContent = `"${shortFeatureCode}"`
 
     if (event) event.preventDefault()
 }