update fonts + small changes

404.html

@@ -19,17 +19,17 @@
       <style>
          @font-face {
             font-family: "CommitMono";
-            src: url("/src/fonts/CommitMonoV117-VF.woff2");
+            src: url("/src/fonts/CommitMonoV118-VF.woff2");
             font-style: normal;
             font-weight: 450;
             font-display: swap;
          }
          body {
             background-color: #aaa;
+            position: fixed;
+            inset: 0;
             display: grid;
             place-content: center;
-            height: 96vh;
-            overflow: hidden;
          }
          p,
          a {
@@ -38,7 +38,6 @@
             color: #111;
             line-height: 1rem;
             margin: 0;
-            padding: 0;
             width: fit-content;
             text-decoration: none;
          }

features/ss02_less_equal.fea

@@ -1,21 +1,25 @@
 feature ss02 {
 	# less_equal, exclam_equal substitution
 
-    # classes
-	@equal = [equal equal.case];
-
 	# feature
-	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 equal' equal @space_actor by equal_equal.liga;
+	sub @space_actor equal_equal.liga equal' @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;
+	sub @space_actor equal' equal equal @space_actor by equal_equal_equal.liga;
+	sub @space_actor equal_equal_equal.liga equal' equal @space_actor by space;
+	sub @space_actor equal_equal_equal.liga space equal' @space_actor by space;
 
-	sub @space_actor exclam' @equal @space_actor by exclam_equal.liga;
-	sub @space_actor exclam_equal.liga @equal' @space_actor by space;
+	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 exclam' @equal @equal @space_actor by exclam_equal_equal.liga;
-	sub @space_actor exclam_equal_equal.liga @equal' @equal @space_actor by space;
-	sub @space_actor exclam_equal_equal.liga space @equal'  @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;
+
+	sub @space_actor exclam' equal @space_actor by exclam_equal.liga;
+	sub @space_actor exclam_equal.liga equal' @space_actor by space;
+
+	sub @space_actor exclam' equal equal @space_actor by exclam_equal_equal.liga;
+	sub @space_actor exclam_equal_equal.liga equal' equal @space_actor by space;
+	sub @space_actor exclam_equal_equal.liga space equal' @space_actor by space;
 	
 } ss02;

features/ss05_smartkerning.fea

@@ -1,18 +1,13 @@
 feature ss05 {
     # Coding Ligature 001—999
     # Smart kerning
-
-    # classes
-    @width_narr = [f f.leftL f.leftM f.leftS f.rightL f.rightM f.rightS i i.leftL i.leftM i.leftS i.rightL i.rightM i.rightS j j.leftL j.leftM j.leftS j.rightL j.rightM j.rightS l l.leftL l.leftM l.leftS l.rightL l.rightM l.rightS r r.leftL r.leftM r.leftS r.rightL r.rightM r.rightS t t.leftL t.leftM t.leftS t.rightL t.rightM t.rightS i.square i.square.leftL i.square.leftM i.square.leftS i.square.rightL i.square.rightM i.square.rightS j.square j.square.leftL j.square.leftM j.square.leftS j.square.rightL j.square.rightM j.square.rightS];
-    @width_regu = [A A.leftL A.leftM A.leftS A.rightL A.rightM A.rightS B B.leftL B.leftM B.leftS B.rightL B.rightM B.rightS C C.leftL C.leftM C.leftS C.rightL C.rightM C.rightS D D.leftL D.leftM D.leftS D.rightL D.rightM D.rightS E E.leftL E.leftM E.leftS E.rightL E.rightM E.rightS F F.leftL F.leftM F.leftS F.rightL F.rightM F.rightS G G.leftL G.leftM G.leftS G.rightL G.rightM G.rightS H H.leftL H.leftM H.leftS H.rightL H.rightM H.rightS I I.leftL I.leftM I.leftS I.rightL I.rightM I.rightS J J.leftL J.leftM J.leftS J.rightL J.rightM J.rightS K K.leftL K.leftM K.leftS K.rightL K.rightM K.rightS L L.leftL L.leftM L.leftS L.rightL L.rightM L.rightS O O.leftL O.leftM O.leftS O.rightL O.rightM O.rightS P P.leftL P.leftM P.leftS P.rightL P.rightM P.rightS Q Q.leftL Q.leftM Q.leftS Q.rightL Q.rightM Q.rightS R R.leftL R.leftM R.leftS R.rightL R.rightM R.rightS S S.leftL S.leftM S.leftS S.rightL S.rightM S.rightS T T.leftL T.leftM T.leftS T.rightL T.rightM T.rightS U U.leftL U.leftM U.leftS U.rightL U.rightM U.rightS V V.leftL V.leftM V.leftS V.rightL V.rightM V.rightS X X.leftL X.leftM X.leftS X.rightL X.rightM X.rightS Y Y.leftL Y.leftM Y.leftS Y.rightL Y.rightM Y.rightS Z Z.leftL Z.leftM Z.leftS Z.rightL Z.rightM Z.rightS a a.leftL a.leftM a.leftS a.rightL a.rightM a.rightS a.cv01 a.cv01.leftL a.cv01.leftM a.cv01.leftS a.cv01.rightL a.cv01.rightM a.cv01.rightS b b.leftL b.leftM b.leftS b.rightL b.rightM b.rightS c c.leftL c.leftM c.leftS c.rightL c.rightM c.rightS d d.leftL d.leftM d.leftS d.rightL d.rightM d.rightS e e.leftL e.leftM e.leftS e.rightL e.rightM e.rightS g g.leftL g.leftM g.leftS g.rightL g.rightM g.rightS g.cv02 g.cv02.leftL g.cv02.leftM g.cv02.leftS g.cv02.rightL g.cv02.rightM g.cv02.rightS h h.leftL h.leftM h.leftS h.rightL h.rightM h.rightS k k.leftL k.leftM k.leftS k.rightL k.rightM k.rightS n n.leftL n.leftM n.leftS n.rightL n.rightM n.rightS o o.leftL o.leftM o.leftS o.rightL o.rightM o.rightS p p.leftL p.leftM p.leftS p.rightL p.rightM p.rightS q q.leftL q.leftM q.leftS q.rightL q.rightM q.rightS s s.leftL s.leftM s.leftS s.rightL s.rightM s.rightS u u.leftL u.leftM u.leftS u.rightL u.rightM u.rightS v v.leftL v.leftM v.leftS v.rightL v.rightM v.rightS x x.leftL x.leftM x.leftS x.rightL x.rightM x.rightS y y.leftL y.leftM y.leftS y.rightL y.rightM y.rightS z z.leftL z.leftM z.leftS z.rightL z.rightM z.rightS];
-    @width_wide = [M M.leftL M.leftM M.leftS M.rightL M.rightM M.rightS N N.leftL N.leftM N.leftS N.rightL N.rightM N.rightS W W.leftL W.leftM W.leftS W.rightL W.rightM W.rightS m m.leftL m.leftM m.leftS m.rightL m.rightM m.rightS w w.leftL w.leftM w.leftS w.rightL w.rightM w.rightS];
-
+    
     # feature
-    sub @width_narr @center' @width_wide by @leftL;
-    sub @width_wide @center' @width_narr by @rightL;
-    sub @width_regu @center' @width_wide by @leftM;
-    sub @width_wide @center' @width_regu by @rightM;
-    sub @width_narr @center' @width_regu by @leftS;
-    sub @width_regu @center' @width_narr by @rightS;
+    sub @w_narr @center' @w_wide by @leftL;
+    sub @w_wide @center' @w_narr by @rightL;
+    sub @w_regu @center' @w_wide by @leftM;
+    sub @w_wide @center' @w_regu by @rightM;
+    sub @w_narr @center' @w_regu by @leftS;
+    sub @w_regu @center' @w_narr by @rightS;
     
 } ss05;

index.html

@@ -57,8 +57,8 @@
                   <div id="keyboard_container">
                      <div class="key_group" id="tab">
                         <div class="keys">
-                           <p data-key-code="Tab" data-key="Tab" class="key" data-noclick="true">Tab</p>
-                           <p data-key-code="ShiftTab" data-key="ShiftTab" class="key" data-noclick="true">⇧Tab</p>
+                           <p data-key-code="Tab" data-key="Tab" class="key" data-noclick="true">TAB</p>
+                           <p data-key-code="ShiftTab" data-key="ShiftTab" class="key" data-noclick="true">⇧TAB</p>
                         </div>
                         <p>Navigate ↓↑</p>
                      </div>
@@ -95,8 +95,8 @@
                      </div>
                      <div class="key_group" id="escape_textfield">
                         <div class="keys">
-                           <p data-key-code="KeyE" data-key="e" class="key">E</p>
-                           <p data-key-code="Escape" data-key="Escape" class="key">Esc</p>
+                           <p data-key-code="Enter" data-key="Enter" class="key">ENTER</p>
+                           <p data-key-code="Escape" data-key="Escape" class="key">ESC</p>
                         </div>
                         <p>Edit text</p>
                      </div>
@@ -147,10 +147,10 @@
                            <button id="focus_check" title="FocusCheckButton"></button>
                            <ul id="tutorial" tabindex="0" data-edit="true">
                               <li>
-                                 <span class="span_key key_code_Tab tutorial_key">Tab</span> &
-                                 <span class="span_key key_code_ShiftTab1 tutorial_key">Shift</span>+<span
+                                 <span class="span_key key_code_Tab tutorial_key">TAB</span> &
+                                 <span class="span_key key_code_ShiftTab1 tutorial_key">SHIFT</span>+<span
                                     class="span_key key_code_ShiftTab2 tutorial_key"
-                                    >Tab</span
+                                    >TAB</span
                                  >
                                  navigate up/down
                               </li>
@@ -175,7 +175,7 @@
                               </li>
                               <!-- <li><span class="span_key key_code_KeyR tutorial_key">R</span> reset scroll & zoom</li> -->
                               <li>
-                                 <span class="span_key key_code_KeyE tutorial_key">E</span>
+                                 <span class="span_key key_code_Enter tutorial_key">ENTER</span>
                                  <span class="span_key key_code_Escape tutorial_key">Esc</span> edit text and cancel
                                  edit
                               </li>
@@ -461,8 +461,8 @@
                               <legend><h2>Language</h2></legend>
                               <fieldset></fieldset>
                            </form>
+                           <br />
                            <div id="examples_container">
-                              <br />
                               <p tabindex="0" data-edit="true" id="code_example"></p>
                            </div>
                            <form id="weight_form" onchange="updateWeight(event, this)">
@@ -656,7 +656,7 @@
          <div tabindex="0" id="block_tab_end"></div>
       </div>
       <script>
-         const versionOfCommitMono = "V117"
+         const versionOfCommitMono = "V118"
          let fontsLoaded = false
          const commitMono = new FontFace("CommitMono", `url(/src/fonts/CommitMono${versionOfCommitMono}-VF.woff2)`, {
             style: "normal",

src/css/non_essential.css

@@ -14,7 +14,7 @@ button {
 }
 
 button:active {
-   background: repeating-conic-gradient(transparent 0% 25%, var(--text) 0% 50%, var(--text) 0% 100%) 50% / 2px 2px;
+   background: var(--bg75);
 }
 
 #app_root.no_focus {
@@ -138,21 +138,13 @@ a:focus {
    visibility: hidden;
 }
 
-input:checked + label::before {
-   background: repeating-conic-gradient(var(--text) 0% 25%, transparent 0% 50%, transparent 0% 100%) 50% / 2px 2px;
-}
-
-input:checked + label {
-   color: var(--text);
-}
-
 .span_key.pressed_key {
    position: relative;
-   background: repeating-conic-gradient(var(--text) 0% 25%, transparent 0% 50%, transparent 0% 100%) 50% / 2px 2px;
+   background: var(--bg25);
 }
 
 ul:focus .span_key.pressed_key {
-   background: repeating-conic-gradient(var(--bg) 0% 25%, transparent 0% 50%, transparent 0% 100%) 50% / 2px 2px;
+   background: var(--bg25-i);
 }
 
 .span_key.pressed_key::after {

src/css/section_1.css

@@ -42,15 +42,6 @@
    margin-top: 0.1rem;
 }
 
-#select_element .key:nth-child(1) {
-   width: 5rem;
-}
-
-#escape_textfield .key:nth-child(2) {
-   letter-spacing: -0.1rem;
-   text-indent: -0.1rem;
-}
-
 #safari p,
 #safari ul {
    background-color: var(--bg);

src/css/section_2.css

@@ -75,6 +75,5 @@ td > div > input + label {
 
 #section_2 input:checked + label:hover::before {
    display: block;
-   background: repeating-conic-gradient(transparent 0% 25%, var(--text) 0% 50%, transparent 0% 75%, var(--text) 0% 100%)
-      50% / 2px 2px;
+   background: var(--bg50);
 }

src/css/section_4.css

@@ -118,7 +118,7 @@
 }
 
 #intelligent_form input:checked + label::before {
-   background: repeating-conic-gradient(var(--text) 0% 25%, transparent 0% 50%, transparent 0% 100%) 50% / 2px 2px;
+   background: var(--bg25);
 }
 
 #intelligent_form input:checked + label {

src/css/section_5.css

@@ -62,7 +62,8 @@ form input:focus:checked + label {
 }
 
 form input:checked + label::before {
-   background: repeating-conic-gradient(var(--text) 0% 25%, transparent 0% 50%, transparent 0% 100%) 50% / 2px 2px;
+   background: var(--bg25);
+   background-position: 1px 0.5px;
 }
 
 #canvas {

src/css/section_6.css

@@ -85,8 +85,7 @@
    color: var(--text);
 }
 .question_button:hover {
-   background: repeating-conic-gradient(transparent 0% 25%, var(--text) 0% 50%, transparent 0% 75%, var(--text) 0% 100%)
-      50% / 2px 2px;
+   background: var(--bg50);
    color: var(--bg);
 }
 .question_button.right_button::before {
@@ -104,11 +103,11 @@
 }
 
 .question_button.button_choice {
-   background: repeating-conic-gradient(var(--text) 0% 25%, transparent 0% 50%, transparent 0% 100%) 50% / 2px 2px;
+   background: var(--bg25);
    color: var(--text);
 }
 .question_button.button_choice:focus {
-   background: repeating-conic-gradient(transparent 0% 25%, var(--text) 0% 50%, var(--text) 0% 100%) 50% / 2px 2px;
+   background: var(--bg75);
    color: var(--bg);
 }
 

src/css/section_7.css

@@ -59,8 +59,7 @@ button:focus a {
    position: relative;
 }
 .download_button:hover {
-   background: repeating-conic-gradient(transparent 0% 25%, var(--text) 0% 50%, transparent 0% 75%, var(--text) 0% 100%)
-      50% / 2px 2px;
+   background: var(--bg50);
    color: var(--bg);
    text-decoration: none;
 }

src/css/section_9.css

@@ -12,11 +12,13 @@
 
 .active_feature {
    cursor: pointer;
-   background: repeating-conic-gradient(var(--text) 0% 25%, transparent 0% 50%, transparent 0% 100%) 50% / 2px 2px;
+   background: var(--bg25);
+   height: 100%;
+   display: inline-block;
 }
 
 h2:focus .active_feature {
-   background: repeating-conic-gradient(var(--bg) 0% 25%, transparent 0% 50%, transparent 0% 100%) 50% / 2px 2px;
+   background: var(--bg25-i);
 }
 
 #features_docu h2 {

src/css/style.css

@@ -1,3 +1,14 @@
+:root {
+   --bg25: repeating-conic-gradient(var(--text) 0% 25%, transparent 0% 100%) 1px 0.5px / 2px 2px;
+   --bg50: repeating-conic-gradient(var(--text) 0% 25%, transparent 0% 50%, var(--text) 0% 75%, transparent 0% 100%) 1px
+      0.5px / 2px 2px;
+   --bg75: repeating-conic-gradient(transparent 0% 25%, var(--text) 0% 100%) 1px 0.5px / 2px 2px;
+   --bg25-i: repeating-conic-gradient(var(--bg) 0% 25%, transparent 0% 100%) 1px 0.5px / 2px 2px;
+   --bg50-i: repeating-conic-gradient(var(--bg) 0% 25%, transparent 0% 50%, var(--bg) 0% 75%, transparent 0% 100%) 1px
+      0.5px / 2px 2px;
+   --bg75-i: repeating-conic-gradient(transparent 0% 25%, var(--bg) 0% 100%) 1px 0.5px / 2px 2px;
+}
+
 ::selection {
    color: var(--text);
    background-color: var(--middle);
@@ -160,12 +171,11 @@ form input:hover + label {
 }
 
 form input:hover + label::before {
-   background: repeating-conic-gradient(transparent 0% 25%, var(--text) 0% 50%, transparent 0% 75%, var(--text) 0% 100%)
-      50% / 2px 2px;
+   background: var(--bg50);
 }
 
 form input:checked:hover + label::before {
-   background: repeating-conic-gradient(transparent 0% 25%, var(--text) 0% 50%, var(--text) 0% 100%) 50% / 2px 2px;
+   background: var(--bg75);
 }
 
 ul li,

src/js/example_section.js

@@ -155,7 +155,6 @@ function updateWeight(event, form) {
    if (event) event.preventDefault()
 }
 
-let fontDownloadSettings = { weight: 450, italic: false, alternates: {}, features: {} }
 function updateExampleSettings(event, form) {
    console.log("updateExampleSettings")
    const data = new FormData(form)
@@ -175,7 +174,7 @@ function updateExampleSettings(event, form) {
       const label = document.querySelector(`#alt_${entry[0]}`)
       if (label) label.style.fontFeatureSettings = entry[1]
    }
-
+   console.log(fontDownloadSettings)
    const codeExample = document.querySelector("#code_example")
    codeExample.style.fontFeatureSettings = output.slice(0, -2)
 

src/js/nav.js

@@ -44,28 +44,6 @@ function updateNav(event, form) {
    }
    sectionNavigation(output.split("section_")[1] - 1)
 
-   // pageAnimation()
-
-   // websiteData.sections.forEach((section, index) => {
-   //    const sectionContainer = document.querySelector(`#section_${index + 1}`)
-   //    if (sectionContainer.id == output) {
-   //       sectionContainer.style.display = "block"
-   //       sectionNavigation(section.name, `Digit${index + 1}`)
-   //    } else {
-   //       sectionContainer.style.display = "none"
-   //    }
-   // })
-   // main.style.transform = `translate(0)`
-   // navForm.style.transform = `translate(0)`
-   // keySection.style.transform = `translate(0)`
-   // websiteData.pushPage.coordinates.x = 0
-   // websiteData.pushPage.coordinates.y = 0
-   // websiteData.pushPage.scale = 1
-
-   // const sectionName = websiteData.sections[output.split("section_")[1] - 1]?.name
-   // console.log("sectionNavigation from updateNav")
-   // sectionNavigation(sectionName)
-
    if (event) event.preventDefault()
 }
 
@@ -125,9 +103,9 @@ let changeSettingTimeoutID
 let focusUsingTab = false
 function keyDown(e) {
    focusUsingTab = true
-   if (e.code == "KeyE" && document.activeElement.dataset.edit == "true" && !insideTextField) enterTextField()
+   if (e.code == "Enter" && document.activeElement.dataset.edit == "true" && !insideTextField) enterTextField()
 
-   if (!insideTextField || e.code == "KeyE") {
+   if (!insideTextField || e.code == "Enter") {
       checkTutorialKeys(e)
 
       const activeKey = !e.shiftKey
@@ -400,9 +378,9 @@ function checkTutorialKeys(e) {
                const keyNode = document.querySelector(`.key_code_${key}`)
                keyNode?.classList.add("pressed_key")
             }
-         } else if (e.code == "KeyE") {
+         } else if (e.code == "Enter") {
             if (document.activeElement.dataset.edit == "true") {
-               document.querySelector(".key_code_KeyE")?.classList.add("pressed_key")
+               document.querySelector(".key_code_Enter")?.classList.add("pressed_key")
             }
          } else if (e.code != "Escape") {
             const keyNode = document.querySelector(`.key_code_${key}`)
@@ -420,12 +398,8 @@ function checkTutorialKeys(e) {
    if (numnerOfTutorialKeys === numberOfPressedKeys) console.log("TUTORIAL FINISHED!!")
 }
 
-function sectionNavigation(sectionIndex, fromPopstate) {
-   // console.log(window.history)
+function sectionNavigation(sectionIndex) {
    const sectionName = websiteData.sections[sectionIndex]?.name
-   // if (!fromPopstate) {
-   //    window.history.pushState({ name: sectionName }, `Go to section ${sectionName}`, `?s=${sectionName}`)
-   // }
 
    pageAnimation()
 
@@ -451,21 +425,11 @@ function sectionNavigation(sectionIndex, fromPopstate) {
    websiteData.pushPage.scale = 1
 }
 
-// function onPopState(e) {
-//    if (e.state) {
-//       websiteData.sections.forEach((section, index) => {
-//          if (section.name === e.state.name) sectionNavigation(index, true)
-//       })
-//    }
-// }
-// window.addEventListener("popstate", onPopState)
-
 // when the user has scrolled manually using the keyboard the page is offset
 // so when you use your scroll wheen to scroll back up, you can't see the top
 // this little script combats that
 mainScale.addEventListener("scroll", onScroll)
 function onScroll(e) {
-   console.log(e)
    const { x, y } = websiteData.pushPage.coordinates
    if (x != 0 || y != 0) {
       main.style.transform = `translate(0)`

src/js/opentype_test.js

@@ -9,6 +9,7 @@ const updateOptions = (event, form) => {
 }
 
 let commitMonoFont
+let fontDownloadSettings = { weight: 450, italic: false, alternates: {}, features: {} }
 
 async function updateCodeFont() {
    console.log("updateCodeFont")
@@ -59,18 +60,18 @@ async function downloadFont(button) {
       bolditalicDownloadSettigns.weight = 700
       bolditalicDownloadSettigns.italic = true
 
-      getFontBlob(regularDownloadSettigns, "Regular", button)
+      getFontBlob(regularDownloadSettigns, "Regular")
          .then((resolve) => {
             fontFileBlobs.regular = resolve
-            return getFontBlob(italicDownloadSettigns, "Italic", button)
+            return getFontBlob(italicDownloadSettigns, "Italic")
          })
          .then((resolve) => {
             fontFileBlobs.italic = resolve
-            return getFontBlob(boldDownloadSettigns, "Bold", button)
+            return getFontBlob(boldDownloadSettigns, "Bold")
          })
          .then((resolve) => {
             fontFileBlobs.bold = resolve
-            return getFontBlob(bolditalicDownloadSettigns, "Bold Italic", button)
+            return getFontBlob(bolditalicDownloadSettigns, "Bold Italic")
          })
          .then((resolve) => {
             fontFileBlobs.bolditalic = resolve
@@ -97,7 +98,7 @@ const fontFileBlobs = {
    bold: null,
    bolditalic: null,
 }
-function getFontBlob(settings, style, button) {
+function getFontBlob(settings, style) {
    console.log("getFontBlob")
 
    const fontFilePath = `/src/fonts/CommitMono${versionOfCommitMono}-${settings.weight}${

src/js/website_data.js

@@ -22,7 +22,7 @@ const websiteData = {
       "KeyD",
       "Minus",
       "Slash",
-      "KeyE",
+      "Enter",
       "Escape",
    ],
    enableFeaturesInDocumentation: false,
@@ -35,8 +35,9 @@ const websiteData = {
       },
       {
          name: "concept",
-         description:
-            "The most effective font is the one you don’t notice. No super high x-height, no geometric construction, no eye-catching design and no confusing ligatures. Designed to be neutral and anonymous, Commit Mono is quietly useful.",
+         description: `The most effective font is the one you don’t notice. No super high x-height, no geometric construction, no eye-catching design and no confusing ligatures. Designed to be neutral and anonymous, Commit Mono is quietly useful.
+
+Tip: Press <span class="span_key">I</span> to switch between italic and regular.`,
          content: {},
       },
       {
@@ -381,6 +382,16 @@ Tip: Press <span class="span_key">R</span> to reset to default settings.`,
                   description: "Slashed |OFF| or dotted |ON| zero.",
                   documentationExample: "0",
                },
+               {
+                  type: "alternate",
+                  name: "oblique",
+                  label: "oblique italic 'aefgy'",
+                  feature: "cv08",
+                  on: false,
+                  description:
+                     "Standard italic construction |OFF| or slanted version of uprights |ON| of 'aefgy'. See the difference in italic by pressing I.",
+                  documentationExample: "aefgy",
+               },
                {
                   type: "feature",
                   name: "arrows",
@@ -834,10 +845,10 @@ end program capitalize
                },
                {
                   languageName: "Code Font Test",
-                  codeExample: `Focus, then press e to edit
+                  codeExample: `Focus, then press ENTER to edit
 
-Hello world:          print("Hello, World!)
-Pangram:              The quick brown fox jumps over a lazy dog
+Hello world           print("Hello, World!")
+Pangram               The quick brown fox jumps over a lazy dog
 Confusable chars      ,. ;: |! Il1 2Z 5S 38B 0OQD
 Vertical alignment    H=H x=x += -= <= >= ~= *= ^= |= %= &= ->
 ASCII                  !"#$%&'()*+,-./