website

1 files changed, 70 insertions, 204 deletions

diff --git a/docs/index.html b/docs/index.html
index fb6e376a7..bd559d96d 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -3,11 +3,6 @@ layout: default
 ---
 {%
 
-capture url_root
-  %}{% if site.safe == false %}/{% else %}/inter/{% endif
-%}{%
-endcapture %}{%
-
 for file in site.static_files %}{%
   assign _path = file.path | remove_first: "/inter" %}{%
   if _path == "/index.css" %}{%
@@ -69,10 +64,10 @@ html { font-family: 'Inter', sans-serif; }
 
   <p>&nbsp;</p>
 
-  <h2 id="dynamic-metrics"><a href="{{url_root}}dynmetrics/">Dynamic Metrics</a></h2>
+  <h2 id="dynamic-metrics"><a href="dynmetrics/">Dynamic Metrics</a></h2>
   <p class="dynmet-calc">
     Size
-    <input id="dynmet-font-size" type="number" value="12"
+    <input id="dynmet-font-size" type="number" value="16"
     ><span title='Display points — "px" in CSS, "pt" on iOS, "sp" on Android, and "pt" (1/72 of an inch) in print'>dp</span>
     <span class="arrow">=</span>
     <span title='letter-spacing in CSS; also called "tracking" in some software.'>spacing
@@ -83,7 +78,7 @@ html { font-family: 'Inter', sans-serif; }
     There's of course no absolute right or wrong when it comes to expressing yourself with typography, but Inter <em>Dynamic Metrics</em> provides guidelines for good typography. You simply provide the optical font size, and the tracking and leading is calculated for you to produce the best results.
   </p>
   <p>
-    <a href="{{url_root}}dynmetrics/">Learn more…</a>
+    <a href="dynmetrics/">Learn more…</a>
   </p>
 
   <p>&nbsp;</p>
@@ -175,7 +170,7 @@ html { font-family: 'Inter', sans-serif; }
 
 
 
-<div class="row"><div>
+<div class="row features"><div>
   <h2><a id="features" href="#features">Features</a></h2>
   <p>
     Inter comes with many OpenType features that can be used to
@@ -184,211 +179,82 @@ html { font-family: 'Inter', sans-serif; }
     alternative variations.
   </p>
   <boxes class="features">
+    {% for f in site.data.feature_samples %}
     <box>
-      <h3>Contextual alternates <q title='OpenType feature ID'>calt</q></h3>
-      <p>
-        This feature is enabled by default and causes certain characters to
-        adjust themselves or be replaced depending on the surrounding context.
-      </p>
-      <tablex><t>
-        <h><in>Disabled</in><to></to><out>Enabled</out></h>
-        <r><in>12<em>:</em>34,  FE<em>—</em>X</in><to></to><out>12:34,  FE—X</out></r>
-        <r><in>4<em>.</em>2</in><to></to><out>4.2</out></r>
-        <r><in><em>(</em>SEMI<em>)</em>PERMANENT</in><to></to><out>(SEMI)PERMANENT</out></r>
-        <r><in>SFO <em>-></em> STO</in><to></to><out>SFO -> STO</out></r>
-        <r><in>IIA <em>—></em> OGG</in><to></to><out>IIA —> OGG</out></r>
-        <r><in>ARN <em><--></em> OGG</in><to></to><out>ARN <--> OGG</out></r>
-        <r><in>M<em>@</em>N m@n</in><to></to><out>M@N m@n</out></r>
-        <r><in>Smile <em>:-)</em></in><to></to><out>Smile :-)</out></r>
-      </t></tablex>
-      <p>
-        There are many more contextual alternates.
-      </p>
-    </box>
-
-    <box>
-      <h3>Tabular numbers <q title='OpenType feature ID'>tnum</q></h3>
-      <p>
-        Fixed-width numbers are useful for tabular data, where comparing
-        columns across rows is desired.
-      </p>
-      <tablex><t>
-        <h><in>Disabled</in><to></to><out>Enabled</out></h>
-        <r><in>1234567890</in><to></to><out class="tnum">1234567890</out></r>
-        <r><in>1131711<em>&nbsp;</em></in><to></to><out class="tnum">1131711<em>&nbsp;</em></out></r>
-        <r><in>0040900<em>&nbsp;</em></in><to></to><out class="tnum">0040900<em>&nbsp;</em></out></r>
-        <r><in>11:31,711<em>&nbsp;</em></in><to></to><out class="tnum">11:31,711<em>&nbsp;</em></out></r>
-        <r><in>00:40.900<em>&nbsp;</em></in><to></to><out class="tnum">00:40.900<em>&nbsp;</em></out></r>
-        <r><in>0.45, 0.91, +0.08<em>&nbsp;</em></in><to></to><out class="tnum">0.45, 0.91, +0.08<em>&nbsp;</em></out></r>
-        <r><in>1.00, 9.44, −0.13<em>&nbsp;</em></in><to></to><out class="tnum">1.00, 9.44, −0.13<em>&nbsp;</em></out></r>
-        <r><in>0.00, 1.13, ~7.12<em>&nbsp;</em></in><to></to><out class="tnum">0.00, 1.13, ~7.12<em>&nbsp;</em></out></r>
-      </t></tablex>
-    </box>
-
-    <box>
-      <h3>Numerators <q title='OpenType feature ID'>numr</q></h3>
-      <tablex><t>
-        <h><in>Disabled</in><to></to><out>Enabled</out></h>
-        <r><in>Hello <em>0123</em></in><to></to><out class="numr">Hello 0123</out></r>
-      </t></tablex>
-    </box>
-
-    <box>
-      <h3>Denominators <q title='OpenType feature ID'>dnom</q></h3>
-      <tablex><t>
-        <h><in>Disabled</in><to></to><out>Enabled</out></h>
-        <r><in>Hello <em>0123</em></in><to></to><out class="dnom">Hello 0123</out></r>
-      </t></tablex>
-    </box>
-
-    <box>
-      <h3>Superscript <q title='OpenType feature ID'>sups</q></h3>
-      <tablex><t>
-        <h><in>Disabled</in><to></to><out>Enabled</out></h>
-        <r><in>H<em>ello 0123</em></in><to></to><out class="sups">Hello 0123</out></r>
-        <r><in><em>abcdefghijklm</em></in><to></to><out class="sups">abcdefghijklm</out></r>
-        <r><in><em>nopqrstuvwxyz</em></in><to></to><out class="sups">nopqrstuvwxyz</out></r>
-      </t></tablex>
-    </box>
-
-    <box>
-      <h3>Subscript <q title='OpenType feature ID'>subs</q></h3>
-      <tablex><t>
-        <h><in>Disabled</in><to></to><out>Enabled</out></h>
-        <r><in>H<em>ello 0123</em></in><to></to><out class="subs">Hello 0123</out></r>
-        <r><in><em>abcdefghijklm</em></in><to></to><out class="subs">abcdefghijklm</out></r>
-        <r><in><em>nopqrstuvwxyz</em></in><to></to><out class="subs">nopqrstuvwxyz</out></r>
-      </t></tablex>
-    </box>
-
-    <box>
-      <h3>Fractions <q title='OpenType feature ID'>frac</q></h3>
-      <p>
-        This feature is contextually sensitive and will convert "words" of
-        numbers separated by forward slash into proper fractions.
-        This feature is dynamic and allows for any fractions.
-        Note that the digits used for fractions are custom-made for their
-        small size, and are even made separately from the slightly larger
-        Superscript and Subscript numbers.
-      </p>
-      <tablex><t>
-        <h><in>Disabled</in><to></to><out>Enabled</out></h>
-        <r>
-          <in><em>1/3</em>  <em>3/4</em>  <em>1/5</em>  <em>1337/5910</em></in>
-          <to></to><out class="frac">1/3  3/4  1/5  1337/5910</out>
-        </r>
-      </t></tablex>
-    </box>
-
-    <box>
-      <h3>Case alternates <q title='OpenType feature ID'>case</q></h3>
-      <p>
-        Switches out some glyphs to work better with capital letters and numbers.
-      </p>
-      <tablex><t>
-        <h><in>Disabled</in><to></to><out>Enabled</out></h>
-        <r>
-          <in><em>(</em>Hello<em>)</em> <em>[</em>World<em>]</em> <em>{</em>9000<em>}</em></in>
-          <to></to><out class="case">(Hello) [World] {9000}</out>
-        </r>
-        <r><in>SCHOOL <em>@</em> RUN</in><to></to><out class="case">SCHOOL @ RUN</out></r>
-        <r><in>3 <em>+</em> 9 <em>=</em> 12 <em>*</em> 1</in><to></to><out class="case">3 + 9 = 12 * 1</out></r>
-        <r><in><em>*+÷±×=≠≈•~&lt;&gt;≤≥</em></in><to></to><out class="case">*+÷±×=≠≈•~&lt;&gt;≤≥</out></r>
-        <r><in><em>→</em> <em>←</em> <em>⟶</em> <em>⟵</em> <em>−</em> <em>-</em> <em>–</em> <em>—</em> <em>:</em></in><to></to><out class="case">→ ← ⟶ ⟵ − - – — :</out></r>
-      </t></tablex>
-    </box>
-
-    <box>
-      <h3>Stylistic set 1: Alternate digits <q title='OpenType feature ID'>ss01</q></h3>
-      <p>
-        An alternate style of digits.
-        Note that individual digit styles can be cherry-picked using the cvXX
-        features.
-      </p>
-      <tablex><t>
-        <h><in>Disabled</in><to></to><out>Enabled</out></h>
-        <r>
-          <in><em>1</em>2<em>34</em>5<em>6</em>78<em>9</em>0</in>
-          <to></to><out class="ss01">1234567890</out>
-        </r>
-        <r><in><em>13469</em></in><to></to><out class="ss01">13469</out></r>
-      </t></tablex>
-    </box>
-
-    <box>
-      <h3>Stylistic set 2: Disambiguation <q title='OpenType feature ID'>ss02</q></h3>
-      <p>
-        Alternate glyph set that increases visual difference between similar-looking characters.
-      </p>
-      <tablex><t>
-        <h><in>Disabled</in><to></to><out>Enabled</out></h>
-        <r><in>WP<em>0</em>AC2A9XS<em>I</em>1<em>0</em>12O9</in><to></to><out class="ss02">WP0AC2A9XSI1012O9</out></r>
-        <r><in><em>Ill</em>ega<em>l</em></in><to></to><out class="ss02">Illegal</out></r>
-        <r><in>βeta <em>ß</em>eta Busine<em>ß</em></in><to></to><out class="ss02">βeta ßeta Busineß</out></r>
-      </t></tablex>
-    </box>
-
-    <box>
-      <h3>Discretionary ligatures <q title='OpenType feature ID'>dlig</q></h3>
-      <tablex><t>
-        <h><in>Disabled</in><to></to><out>Enabled</out></h>
-        <r><in><em>¡¿</em>What<em>?!</em></in><to></to><out class="dlig">¡¿What?!</out></r>
-        <r><in><em>¿¡</em>What<em>!?</em></in><to></to><out class="dlig">¿¡What!?</out></r>
-      </t></tablex>
-    </box>
-
-    <box>
-      <h3>Slashed zero <q title='OpenType feature ID'>zero</q></h3>
-      <tablex><t>
-        <h><in>Disabled</in><to></to><out>Enabled</out></h>
-        <r><in><em>0</em>123</in><to></to><out class="zero">0123</out></r>
-      </t></tablex>
-    </box>
-
-    <box>
-      <h3>Character variants <q title='OpenType feature ID'>cvXX</q></h3>
-      <p>
-        Allows cherry-picking alternate characters.
+      <h3>{{f.title}} <q title='OpenType feature ID'>{{f.tag}}</q></h3>
+      {%
+
+      if f.description %}
+        <p>{{f.description}}</p>
+      {% endif %}{%
+
+      assign feat_tag = f.tag %}{%
+      assign has_feature_col = false %}{%
+      for s in f.samples %}{%
+        if s.feat %}{%
+          assign has_feature_col = true %}{%
+          break %}{%
+        endif %}{%
+      endfor
+
+      %}
+      {% if has_feature_col %}
+      <grid class="c8">
+        <c span="1" class="low-contrast ">Feature</c>
+        <c span="3" class="low-contrast">Disabled</c>
+        <c span="1" class="low-contrast center-text">→</c>
+        <c span="3" class="low-contrast">Enabled</c>
+      {% else %}
+      <grid class="c9">
+        <c span="4" class="low-contrast">Disabled</c>
+        <c span="1" class="low-contrast center-text">→</c>
+        <c span="4" class="low-contrast">Enabled</c>
+      {% endif %}
+      {% for s in f.samples %}
+        {%
+
+        if has_feature_col %}{%
+          assign sample = s.sample %}{%
+          assign feat_tag = s.feat %}{%
+        else %}{%
+          assign sample = s %}{%
+        endif %}{%
+
+        assign sample_in = sample | replace: "›", "<em>" | replace: "‹", "</em>" %}{%
+        assign sample_out = sample | remove: "›" | remove: "‹"
+
+        %} {% if has_feature_col %}
+        <c span="1" class="">{{feat_tag}}</c>
+        <c span="3" class="sample ff-none">{{sample_in}}</c>
+        <c span="1" class="low-contrast center-text">→</c>
+        <c span="3" class="sample ff-{{feat_tag}}">{{sample_out}}</c>
+        {% else %}
+        <c span="4" class="sample ff-none">{{sample_in}}</c>
+        <c span="1" class="low-contrast center-text">→</c>
+        <c span="4" class="sample ff-{{feat_tag}}">{{sample_out}}</c>
+        {% endif %}
+      {% endfor %}
+      </grid>
+      <p class="example" title="CSS code">
+        <tt>font-feature-settings: '{{feat_tag}}' 1</tt>
       </p>
-      <tablex><t>
-        <h><name>Feature&nbsp;&nbsp;</name><in>Disabled</in><to></to><out>Enabled</out></h>
-        <r title="Alternate one"><name>cv01</name><in>1</in><to></to><out class="cv01">1</out></r>
-        <r title="Open four"><name>cv02</name><in>4</in><to></to><out class="cv02">4</out></r>
-        <r title="Open six"><name>cv03</name><in>6</in><to></to><out class="cv03">6</out></r>
-        <r title="Open nine"><name>cv04</name><in>9</in><to></to><out class="cv04">9</out></r>
-        <r title="Lower case L with tail"><name>cv05</name><in>l ł ƚ ɫ ɬ ŀ ĺ ļ ľ ḷ ḹ ḻ ḽ</in><to></to><out class="cv05">l ł ƚ ɫ ɬ ŀ ĺ ļ ľ ḷ ḹ ḻ ḽ</out></r>
-        <r title="Lower case R with straight tail"><name>cv06</name><in>r ɽ ɍ ɼ ŕ ŗ ř ȑ ȓ ṙ ṛ ṝ ṟ</in><to></to><out class="cv06">r ɽ ɍ ɼ ŕ ŗ ř ȑ ȓ ṙ ṛ ṝ ṟ</out></r>
-        <r title="Alternate German double-s"><name>cv07</name><in>ß</in><to></to><out class="cv07">ß</out></r>
-        <r title="Upper-case i with serif"><name>cv08</name><in>I Ï Ḯ Ɨ Ḭ Ì Í Î Ĩ Ī Ĭ<br>Į İ Ǐ Ȉ Ȋ Ỉ Ị Ι Ί Ϊ Ἰ Ἱ Ἲ<br>Ἳ Ἴ Ἵ Ἶ Ἷ Ῐ Ῑ Ὶ Ί І Ї</in><to></to><out class="cv08">I Ï Ḯ Ɨ Ḭ Ì Í Î Ĩ Ī Ĭ<br>Į İ Ǐ Ȉ Ȋ Ỉ Ị Ι Ί Ϊ Ἰ Ἱ Ἲ<br>Ἳ Ἴ Ἵ Ἶ Ἷ Ῐ Ῑ Ὶ Ί І Ї</out></r>
-        <r title="Flat top three"><name>cv09</name><in>3</in><to></to><out class="cv09">3</out></r>
-        <r title="Capital G with spur"><name>cv10</name><in>G Ǥ Ɠ Ĝ Ğ Ġ Ģ Ǧ Ǵ Ḡ</in><to></to><out class="cv09">G Ǥ Ɠ Ĝ Ğ Ġ Ģ Ǧ Ǵ Ḡ</out></r>
-      </t></tablex>
+      {% if f.footer %}
+        <p>{{f.footer}}</p>
+      {% endif %}
     </box>
-
-    <box>
-      <h3>Capital Spacing <q title='OpenType feature ID'>cpsp</q></h3>
-      <p>
-        Slightly increases letter spacing for increased legibility of
-        capital letters. Note: It's usually better to set letter-spacing
-        (aka tracking) manually instead of using this feature. It's here
-        mainly for completeness.
-      </p>
-      <tablex><t>
-        <h><in>Disabled</in><to></to><out>Enabled</out></h>
-        <r><in>FOREVER IMMATERIAL</in><to></to><out class="cpsp">FOREVER IMMATERIAL</out></r>
-        <r><in>TORSCHLUẞPANIK</in><to></to><out class="cpsp">TORSCHLUẞPANIK</out></r>
-      </t></tablex>
-    </box>
-
+    {% endfor %}
   </boxes>
 
   <p>
     Additional features, not highlighted above:
     <q title='OpenType feature ID'>locl</q>,
+    <q title='OpenType feature ID'>salt</q>,
     <q title='OpenType feature ID'>aalt</q>,
     <q title='OpenType feature ID'>ccmp</q>,
-    <q title='OpenType feature ID'>ordn</q> and
-    <q title='OpenType feature ID'>salt</q>,
+    <q title='OpenType feature ID'>cpsp</q> and
+    <q title='OpenType feature ID'>ordn</q>.
+    <br>
+    You can explore features in the <a href="lab/">interactive lab</a>.
   </p>
 
   <p>&nbsp;</p>