docs: add evaluation for variable fonts (#11)

.gitignore

@@ -105,3 +105,4 @@ dist
 
 # Setting files for IntelliJ / WebStorm
 .idea/
+/variable-fonts/fonts

variable-fonts/README.md

@@ -0,0 +1,46 @@
+# Variable fonts
+
+This is a repo with information how variable fonts are structured and how to build/use/manipulate them.
+
+Spoiler: At the moment (2024-08-21) there aren't much information about the technical approach. Furthermore, the capabilities of creating it via open source tool is kind of hard.
+
+## The basics
+
+> Variable fonts are an evolution of the OpenType font specification that enables many different variations of a typeface to be incorporated into a single file.
+
+- It is fully supported in all browsers. See [here](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_fonts/Variable_fonts_guide).
+- In general the font file (.otf/.ttf) contains an additional [table](https://learn.microsoft.com/en-us/typography/opentype/spec/fvar) to enable the variable font.
+
+## The idea
+
+In a naive way I thought: "We have already an icon font, it should be easy to convert it to a variable font" - I was wrong.
+
+First of all if we use for example this [tool](https://github.com/db-ui/gif) we can generate different file types. And it may contain different icon sizes (e.g. 16,24,32) which might look different, with different weights etc.
+
+But the biggest problem is that a variable font has a restriction: To interpolate a font glyph, it needs the same amount of points and lines and in the same order. Otherwise, it won't be able to interpolate properly.
+
+## The tools
+
+A great place to start is [opentype.js](https://opentype.js.org/). You can check already created variable fonts here. And there is a good JS library behind it. Currently, they don't support writing variable fonts, but there is a [PR](https://github.com/opentypejs/opentype.js/pull/701) for this.
+
+## Create own variable font with open source tools
+
+Based on this [video](https://www.youtube.com/watch?v=xoQuWARCUWI) you can create your own variable font with some open source tools. You need those tools:
+
+- [FontForge](https://fontforge.org/)
+- Python Libraries: [fontmake](https://github.com/googlefonts/fontmake)
+
+## Example
+
+> You need to go into this directory: `cd variable-fonts`
+
+1. We use a simple `test.svg` with two rectangles as a testing icon.
+2. We run `npx @db-ui/gif --src . --fontName test`
+3. This will create some font files. For this example we need `fonts/all/test.woff2`
+4. We use [FontForge](https://fontforge.org/) to open the `test.woff2`
+5. We will save the current font as `.sfd` format like `test.sfd`. Then we change the font name via FontForge settings to something like `test_bold` and save another file as `test_bold.sfd`.
+6. Next we scroll to the bottom of the `test_bold` font inside FontForge and change the positions of the points inside the glyph. In this case we use the empty space between the rectangles to widen them.
+7. After this we will create a font from both the `test.sfd` and `test_bold.sfd` as `.ufo` file. **Warning** the svg might get redrawn by `@db-ui/gif` you may need to fix issues (like the direction) in FontForge by using the "Element/Validation" setting.
+8. Next we need to create a `.designspace` file. This is a representation (XML) for how the axis works. Check the `test.designspace` for more information.
+9. Now we need to run `fontmake -m test.designspace -o variable --production-names --output-path test.ttf`
+10. Goto [this](https://opentype.js.org/glyph-inspector.html) website and open the `test.ttf`. You should change the `weight` of the icon with the slider provided. You may also see `index.html` and `index.css` to check how you use an axis inside HTML/CSS.

variable-fonts/index.css

@@ -0,0 +1,19 @@
+@font-face {
+  font-family: "test";
+  src: url("test.ttf") format("truetype-variations");
+}
+
+.test {
+  font-family: "test" !important;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.semi {
+  font-variation-settings: "wght" 750;
+}
+
+.max {
+  font-variation-settings: "wght" 1000;
+}

variable-fonts/index.html

@@ -0,0 +1,27 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>test</title>
+    <link rel="stylesheet" href="index.css" />
+  </head>
+
+  <body>
+    <div class="icons">
+      <ul>
+        <li class="class-icon">
+          <i class="test">test</i>
+          <span class="name">test default</span>
+        </li>
+        <li class="class-icon">
+          <i class="test semi">test</i>
+          <span class="name">test weight semi</span>
+        </li>
+        <li class="class-icon">
+          <i class="test max">test</i>
+          <span class="name">test weight max</span>
+        </li>
+      </ul>
+    </div>
+  </body>
+</html>

variable-fonts/test.designspace

@@ -0,0 +1,22 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<designspace format="4.0">
+  <axes>
+    <axis tag="wght" name="weight" minimum="0" maximum="1000" default="0"/>
+  </axes>
+  <sources>
+    <source filename="test.ufo" name="master.test.bold.0" familyname="test" stylename="light">
+      <lib copy="1"/>
+      <groups copy="1"/>
+      <features copy="1"/>
+      <info copy="1"/>
+      <location>
+        <dimension name="weight" xvalue="0"/>
+      </location>
+    </source>
+    <source filename="test_bold.ufo" familyname="test" stylename="bold">
+      <location>
+        <dimension name="weight" xvalue="1000"/>
+      </location>
+    </source>
+  </sources>
+</designspace>

variable-fonts/test.sfd

@@ -0,0 +1,157 @@
+SplineFontDB: 3.2
+FontName: test
+FullName: test
+FamilyName: test
+Weight: Book
+Version: 1.0
+ItalicAngle: 0
+UnderlinePosition: 10
+UnderlineWidth: 0
+Ascent: 1000
+Descent: 0
+InvalidEm: 0
+sfntRevision: 0x00010000
+LayerCount: 2
+Layer: 0 1 "Hinten" 1
+Layer: 1 1 "Vorne" 0
+XUID: [1021 432 367290026 18882]
+StyleMap: 0x0040
+FSType: 0
+OS2Version: 4
+OS2_WeightWidthSlopeOnly: 0
+OS2_UseTypoMetrics: 1
+CreationTime: 1724240026
+ModificationTime: 1724241070
+PfmFamily: 17
+TTFWeight: 400
+TTFWidth: 5
+LineGap: 0
+VLineGap: 0
+Panose: 2 0 5 3 0 0 0 0 0 0
+OS2TypoAscent: 1000
+OS2TypoAOffset: 0
+OS2TypoDescent: 0
+OS2TypoDOffset: 0
+OS2TypoLinegap: 90
+OS2WinAscent: 1090
+OS2WinAOffset: 0
+OS2WinDescent: 0
+OS2WinDOffset: 0
+HheadAscent: 1000
+HheadAOffset: 0
+HheadDescent: 0
+HheadDOffset: 0
+OS2SubXSize: 634
+OS2SubYSize: 700
+OS2SubXOff: 0
+OS2SubYOff: 140
+OS2SupXSize: 634
+OS2SupYSize: 700
+OS2SupXOff: 0
+OS2SupYOff: 480
+OS2StrikeYSize: 49
+OS2StrikeYPos: 258
+OS2Vendor: 'PfEd'
+OS2CodePages: 00000001.00000000
+OS2UnicodeRanges: 00000000.00000000.00000000.00000000
+Lookup: 4 0 1 "'liga' Standard-Ligaturen in Lateinisch Nachschlagetabelle 0" { "'liga' Standard-Ligaturen in Lateinisch Nachschlagetabelle 0 Subtabelle"  } [' RQD' ('DFLT' <'dflt' > 'latn' <'dflt' > ) 'liga' ('DFLT' <'dflt' > 'latn' <'dflt' > ) ]
+DEI: 91125
+ShortTable: maxp 16
+  1
+  0
+  5
+  10
+  2
+  0
+  0
+  2
+  0
+  10
+  10
+  0
+  255
+  0
+  0
+  0
+EndShort
+LangName: 1033 "" "" "Regular" "test" "" "Version 1.0" "" "" "" "" "Generated by svg2ttf from Fontello project." "http://fontello.com"
+Encoding: UnicodeFull
+UnicodeInterp: none
+NameList: AGL For New Fonts
+DisplaySize: -48
+AntiAlias: 1
+FitToEm: 0
+WinInfo: 1113628 38 13
+BeginChars: 1114114 5
+
+StartChar: .notdef
+Encoding: 1114112 -1 0
+GlifName: _notdef
+Width: 0
+GlyphClass: 1
+Flags: W
+LayerCount: 2
+Fore
+Validated: 1
+EndChar
+
+StartChar: test
+Encoding: 1114113 -1 1
+GlifName: test
+Width: 1000
+GlyphClass: 1
+Flags: WO
+LayerCount: 2
+Fore
+SplineSet
+250 500 m 1,0,-1
+ 250 750 l 1,1,-1
+ 375 750 l 1,2,-1
+ 375 250 l 1,3,-1
+ 250 250 l 1,4,-1
+ 250 500 l 1,0,-1
+625 500 m 1,5,-1
+ 625 750 l 1,6,-1
+ 750 750 l 1,7,-1
+ 750 250 l 1,8,-1
+ 625 250 l 1,9,-1
+ 625 500 l 1,5,-1
+EndSplineSet
+LCarets2: 3 0 0 0
+Ligature2: "'liga' Standard-Ligaturen in Lateinisch Nachschlagetabelle 0 Subtabelle" t e s t
+EndChar
+
+StartChar: t
+Encoding: 116 116 2
+GlifName: t
+Width: 0
+GlyphClass: 1
+Flags: W
+LayerCount: 2
+Fore
+Validated: 1
+EndChar
+
+StartChar: e
+Encoding: 101 101 3
+GlifName: e
+Width: 0
+GlyphClass: 1
+Flags: W
+LayerCount: 2
+Fore
+Validated: 1
+EndChar
+
+StartChar: s
+Encoding: 115 115 4
+GlifName: s
+Width: 0
+GlyphClass: 1
+Flags: W
+LayerCount: 2
+Fore
+Validated: 1
+EndChar
+EndChars
+EndSplineFont

variable-fonts/test.ufo/features.fea

@@ -0,0 +1,33 @@
+languagesystem DFLT dflt;
+languagesystem latn dflt;
+
+
+# GSUB 
+
+
+lookup ligaStandardLigatureninLateinischNachschlagetabelle0 {
+  lookupflag 0;
+    sub \t \e \s \t  by \test;
+} ligaStandardLigatureninLateinischNachschlagetabelle0;
+
+feature  RQD {
+
+ script DFLT;
+     language dflt ;
+      lookup ligaStandardLigatureninLateinischNachschlagetabelle0;
+
+ script latn;
+     language dflt ;
+      lookup ligaStandardLigatureninLateinischNachschlagetabelle0;
+}  RQD;
+
+feature liga {
+
+ script DFLT;
+     language dflt ;
+      lookup ligaStandardLigatureninLateinischNachschlagetabelle0;
+
+ script latn;
+     language dflt ;
+      lookup ligaStandardLigatureninLateinischNachschlagetabelle0;
+} liga;