add Greek support in font, fix charset

Author: eigilnikolajsen

index.html

@@ -943,7 +943,10 @@ <h2>Activate Commit Mono in your editor.</h2>
                                     </div>
                                     <div class="docs_container" id="charset_container_docs">
                                         <h2 tabindex="0" data-edit="true">Full characterset without alternates</h2>
-                                        <p tabindex="0" data-edit="true">Support for Greek and Cyrillic coming soon.</p>
+                                        <p tabindex="0" data-edit="true" class="new_label">
+                                            Added support for Greek. Καλώς ήρθες, απόλαυσε!
+                                        </p>
+                                        <p tabindex="0" data-edit="true">Support for Cyrillic coming soon.</p>
                                         <br />
                                         <div id="charset" tabindex="0" data-edit="true"></div>
                                         <p tabindex="0" data-edit="true">End of transmission.</p>
@@ -1181,7 +1184,7 @@ <h2>Programs used</h2>
             <div tabindex="0" id="block_tab_end"></div>
         </div>
         <script>
-            const versionOfCommitMono = "V134"
+            const versionOfCommitMono = "V135"
             let fontsLoaded = false
             const commitMono = new FontFace("CommitMono", `url(/src/fonts/CommitMono${versionOfCommitMono}-VF.woff2)`, {
                 style: "normal",

src/css/section_9.css

@@ -37,10 +37,34 @@ h2:focus .active_feature {
 
 #charset {
     width: var(--max-width);
+    width: 32ch;
     font-variant-ligatures: none;
     white-space: pre-wrap;
-    font-size: 3rem;
-    line-height: 4rem;
+    font-size: 5rem;
+    line-height: 5rem;
+    display: grid;
+    grid-template-columns: repeat(10, 1ch);
+    gap: 1ch;
+}
+
+#charset .charset_letter {
+    /* background-color: blue; */
+    font-size: inherit;
+    width: fit-content;
+    line-height: inherit;
+}
+
+.new_label {
+    position: relative;
+}
+
+.new_label::before {
+    content: "NEW";
+    font-size: 0.66rem;
+    background: var(--text);
+    color: var(--bg);
+    position: relative;
+    padding: 0 0.5ch;
 }
 
 #language_support {

src/features/ss01_less_equal.fea

@@ -12,6 +12,8 @@ feature ss01 {
 
     sub @space_actor less' equal @space_actor by less_equal.liga;
     sub @space_actor less_equal.liga equal' @space_actor by space;
+    sub @space_actor [less.arrow_start_equal less.arrow_start_equal.case]' [equal.arrow equal.arrow.case] @space_actor by less_equal.liga;
+    sub @space_actor less_equal.liga [equal.arrow equal.arrow.case]' @space_actor by space;
 
     sub @space_actor greater' equal @space_actor by greater_equal.liga;
     sub @space_actor greater_equal.liga equal' @space_actor by space;

src/fonts/CommitMonoV134-300Italic.otf

@@ -54,7 +54,7 @@ async function updateCodeFont() {
         })
         .catch((err) => console.log(err))
     // opentype
-    //     .load("src/fonts/CommitMonoV134-500Regular.otf")
+    //     .load("src/fonts/CommitMonoV135-500Regular.otf")
     //     .then((font) => {
     //         console.log(font)
     //         console.log(font.toTables())

src/fonts/CommitMonoV134-300Regular.otf

@@ -63,7 +63,13 @@ function buildDocs() {
     })
     const charset = document.querySelector("#charset")
     const tunedCharset = docsContent.charset.split("").join(" ")
-    charset.textContent = tunedCharset
+    docsContent.charset.split("").forEach((char) => {
+        const span = document.createElement("p")
+        span.classList.add("charset_letter")
+        span.textContent = char
+        charset.append(span)
+    })
+    // charset.textContent = tunedCharset
 
     const languageSupport = document.querySelector("#language_support")
     docsContent.supportedLanguages.forEach((language) => {

src/fonts/CommitMonoV134-325Italic.otf

@@ -127,47 +127,49 @@ function makeCustomFont(settings) {
             // #1 change alternates by switching their paths
             // the below loop does this
             // loop through the alternate settings
-            Object.entries(settings.alternates).forEach(([alternate, active]) => {
-                //
-                // filter for only the active ones
-                if (!active) return
-                // // console.log("alternate", alternate, "active", active)
-
-                // look at all the fonts features
-                font.tables.gsub.features.forEach((feature) => {
+            Object.entries(settings.alternates)
+                .toReversed() // to make the alt g override the italic g
+                .forEach(([alternate, active]) => {
                     //
-                    // if the feature matches the alternate we're currently on
-                    if (feature.tag == alternate) {
-                        // // console.log("feature", feature)
+                    // filter for only the active ones
+                    if (!active) return
+                    // // console.log("alternate", alternate, "active", active)
 
-                        // then loop through the list of lookup indexes of that feature
-                        feature.feature.lookupListIndexes.forEach((lookupIndex) => {
-                            // // console.log("lookupIndex", lookupIndex)
-
-                            // loop through the subtable of each lookup at the lookup index
-                            font.tables.gsub.lookups[lookupIndex].subtables.forEach((subtable) => {
-                                // // console.log("subtable", subtable)
-
-                                // loop through the glyphs of the subtable
-                                subtable.coverage.glyphs.forEach((glyphIndexOriginal, index) => {
-                                    //
-                                    // glyphIndexOriginal is the index of the original glyph
-                                    // glyphIndexSubstitute is the index of the glyph to substitute the original with
-                                    const glyphIndexSubstitute = subtable.substitute[index]
-
-                                    // get the paths for the original and the substitute glyph
-                                    const glyphPathOriginal = font.glyphs.glyphs[glyphIndexOriginal].path
-                                    const glyphPathSubstitute = font.glyphs.glyphs[glyphIndexSubstitute].path
-
-                                    // swap the paths, so the original glyph gets the path of the substitute and vice versa
-                                    font.glyphs.glyphs[glyphIndexOriginal].path = glyphPathSubstitute
-                                    font.glyphs.glyphs[glyphIndexSubstitute].path = glyphPathOriginal
+                    // look at all the fonts features
+                    font.tables.gsub.features.forEach((feature) => {
+                        //
+                        // if the feature matches the alternate we're currently on
+                        if (feature.tag == alternate) {
+                            // // console.log("feature", feature)
+
+                            // then loop through the list of lookup indexes of that feature
+                            feature.feature.lookupListIndexes.forEach((lookupIndex) => {
+                                // // console.log("lookupIndex", lookupIndex)
+
+                                // loop through the subtable of each lookup at the lookup index
+                                font.tables.gsub.lookups[lookupIndex].subtables.forEach((subtable) => {
+                                    // // console.log("subtable", subtable)
+
+                                    // loop through the glyphs of the subtable
+                                    subtable.coverage.glyphs.forEach((glyphIndexOriginal, index) => {
+                                        //
+                                        // glyphIndexOriginal is the index of the original glyph
+                                        // glyphIndexSubstitute is the index of the glyph to substitute the original with
+                                        const glyphIndexSubstitute = subtable.substitute[index]
+
+                                        // get the paths for the original and the substitute glyph
+                                        const glyphPathOriginal = font.glyphs.glyphs[glyphIndexOriginal].path
+                                        const glyphPathSubstitute = font.glyphs.glyphs[glyphIndexSubstitute].path
+
+                                        // swap the paths, so the original glyph gets the path of the substitute and vice versa
+                                        font.glyphs.glyphs[glyphIndexOriginal].path = glyphPathSubstitute
+                                        font.glyphs.glyphs[glyphIndexSubstitute].path = glyphPathOriginal
+                                    })
                                 })
                             })
-                        })
-                    }
+                        }
+                    })
                 })
-            })
 
             // change width
             const defaultWidth = 600

src/fonts/CommitMonoV134-325Regular.otf

@@ -472,8 +472,8 @@ function checkTutorialKeys(e) {
             tutorialFinished = true
             const tutorialContainer = document.querySelector("#tutorial_complete")
             tutorialContainer.innerHTML = `<p>Tutorial complete! Your present is the variable version of Commit Mono:</p>
-<p><a href="/src/fonts/CommitMonoV134-VF.ttf" tabindex="0">Download CommitMono-VF.ttf</a></p>
-<p><a href="/src/fonts/CommitMonoV134-VF.woff2" tabindex="0">Download CommitMono-VF.woff2</a></p>
+<p><a href="/src/fonts/CommitMonoV135-VF.ttf" tabindex="0">Download CommitMono-VF.ttf</a></p>
+<p><a href="/src/fonts/CommitMonoV135-VF.woff2" tabindex="0">Download CommitMono-VF.woff2</a></p>
 <br />`
         }
     }

src/fonts/CommitMonoV134-350Italic.otf

@@ -1,3 +1,3 @@
 #1 Place file in Downloads
 #2 Navigate to /Developer/woff2
-#3 ./woff2_compress ~/Downloads/CommitMonoV134-VF.otf
+#3 ./woff2_compress ~/Downloads/CommitMonoV135-VF.ttf