✅ fix: resolve font alignment issue

- correcting `xAvgCharWidth` using `ttx` from `fonttools` - build hdmx table for odd and hinted ppems
jonz94 · Nov 25, 2021 · 145000b · 145000b · jonz94 · Nov 26, 2021
1 parent 81626c5
commit 145000b
Show file tree

Hide file tree

Showing 2 changed files with 97 additions and 4 deletions.
diff --git a/.github/workflows/generate-fonts.yml b/.github/workflows/generate-fonts.yml
@@ -48,6 +48,8 @@ jobs:
             "extralight",
             "extralightitalic",
           ]
+    env:
+      FILENAME: "sarasa-${{ matrix.styles }}-${{ matrix.orthographies }}-${{ matrix.variants }}"
     steps:
       - uses: actions/checkout@v2
       - name: Download latest version of Sarasa Gothic from GitHub release page
@@ -65,15 +67,35 @@ jobs:
         with:
           name: font patcher and source glyphs
       - run: tree .
+      - uses: actions/setup-python@v2
+        with:
+          python-version: "3.x"
       - name: Install configparser
         run: pip install configparser
       - run: ls -l
       - name: Patch font
-        run: fontforge -script font-patcher --careful --complete --no-progressbars --quiet sarasa-${{ matrix.styles }}-${{ matrix.orthographies }}-${{ matrix.variants }}.ttf
+        run: fontforge -script font-patcher --careful --complete --no-progressbars --quiet "${FILENAME}.ttf"
       - run: ls -l
       - name: Rename patched font files
-        run: mv *Complete.ttf sarasa-${{ matrix.styles }}-${{ matrix.orthographies }}-${{ matrix.variants }}-nerd-font.ttf
+        run: mv *Complete.ttf "${FILENAME}-nerd-font.ttf"
       - run: ls -l
+      - name: Install fonttools
+        run: pip install fonttools
+      - name: correcting xAvgCharWidth to fix alignment issue
+        run: |
+          ttx -t "OS/2" "${FILENAME}.ttf"
+          ttx -t "OS/2" "${FILENAME}-nerd-font.ttf"
+          ls -l *.ttx
+          cat "${FILENAME}.ttx"
+          cat "${FILENAME}-nerd-font.ttx"
+          origin_x_avg_char_width="$(grep xAvgCharWidth "${FILENAME}.ttx" | cut -d '"' -f 2)"
+          echo origin xAvgCharWidth is $origin_x_avg_char_width
+          sed -i "s/xAvgCharWidth\ value=\"[0-9]\+\"/xAvgCharWidth\ value=\"${origin_x_avg_char_width}\"/g" "${FILENAME}-nerd-font.ttx"
+          cat "${FILENAME}-nerd-font.ttx"
+          mv "${FILENAME}-nerd-font.ttf" "${FILENAME}-nerd-font.origin.ttf"
+          ttx -o "${FILENAME}-nerd-font.ttf" -m "${FILENAME}-nerd-font.origin.ttf" "${FILENAME}-nerd-font.ttx"
+      - name: build hdmx table to fix alignment issue
+        run: python build-hdmx-for-sarasa.py "${FILENAME}-nerd-font.ttf"
       - name: Upload patched font
         uses: actions/upload-artifact@master
         with:
@@ -100,6 +122,8 @@ jobs:
             "extralight",
             "extralightitalic",
           ]
+    env:
+      FILENAME: "sarasa-${{ matrix.styles }}-${{ matrix.orthographies }}-${{ matrix.variants }}"
     steps:
       - uses: actions/checkout@v2
       - name: Download latest version of Sarasa Gothic from GitHub release page
@@ -117,15 +141,35 @@ jobs:
         with:
           name: font patcher and source glyphs
       - run: tree .
+      - uses: actions/setup-python@v2
+        with:
+          python-version: "3.x"
       - name: Install configparser
         run: pip install configparser
       - run: ls -l
       - name: Patch font
-        run: fontforge -script font-patcher --careful --complete --no-progressbars --quiet sarasa-${{ matrix.styles }}-${{ matrix.orthographies }}-${{ matrix.variants }}.ttf
+        run: fontforge -script font-patcher --careful --complete --no-progressbars --quiet "${FILENAME}.ttf"
       - run: ls -l
       - name: Rename patched font files
-        run: mv *Complete.ttf sarasa-${{ matrix.styles }}-${{ matrix.orthographies }}-${{ matrix.variants }}-nerd-font.ttf
+        run: mv *Complete.ttf "${FILENAME}-nerd-font.ttf"
       - run: ls -l
+      - name: Install fonttools
+        run: pip install fonttools
+      - name: correcting xAvgCharWidth to fix alignment issue
+        run: |
+          ttx -t "OS/2" "${FILENAME}.ttf"
+          ttx -t "OS/2" "${FILENAME}-nerd-font.ttf"
+          ls -l *.ttx
+          cat "${FILENAME}.ttx"
+          cat "${FILENAME}-nerd-font.ttx"
+          origin_x_avg_char_width="$(grep xAvgCharWidth "${FILENAME}.ttx" | cut -d '"' -f 2)"
+          echo origin xAvgCharWidth is $origin_x_avg_char_width
+          sed -i "s/xAvgCharWidth\ value=\"[0-9]\+\"/xAvgCharWidth\ value=\"${origin_x_avg_char_width}\"/g" "${FILENAME}-nerd-font.ttx"
+          cat "${FILENAME}-nerd-font.ttx"
+          mv "${FILENAME}-nerd-font.ttf" "${FILENAME}-nerd-font.origin.ttf"
+          ttx -o "${FILENAME}-nerd-font.ttf" -m "${FILENAME}-nerd-font.origin.ttf" "${FILENAME}-nerd-font.ttx"
+      - name: build hdmx table to fix alignment issue
+        run: python build-hdmx-for-sarasa.py "${FILENAME}-nerd-font.ttf"
       - name: Upload patched font
         uses: actions/upload-artifact@master
         with:

diff --git a/build-hdmx-for-sarasa.py b/build-hdmx-for-sarasa.py
@@ -0,0 +1,49 @@
+#! /usr/bin/python
+
+# credit: https://github.com/be5invis/Sarasa-Gothic/issues/108#issuecomment-517240248
+
+# usage:
+#   python build-hdmx-for-sarasa.py your-sarasa-font.ttf
+
+import sys
+import math
+
+from fontTools.ttLib import TTFont, newTable
+
+
+def main():
+    headFlagInstructionsMayAlterAdvanceWidth = 0x0010
+    sarasaHintPpemMin = 11
+    sarasaHintPpemMax = 48
+
+    filename = sys.argv[1]
+
+    font = TTFont(filename, recalcBBoxes=False)
+
+    originFontHead = font["head"]
+    originFontHmtx = font["hmtx"]
+
+    originFontHead.flags |= headFlagInstructionsMayAlterAdvanceWidth
+
+    hdmxTable = newTable("hdmx")
+    hdmxTable.hdmx = {}
+
+    # build hdmx table for odd and hinted ppems only.
+    for ppem in range(
+        math.floor(sarasaHintPpemMin / 2) * 2 + 1, sarasaHintPpemMax + 1, 2
+    ):
+        halfUpm = originFontHead.unitsPerEm / 2
+        halfPpem = math.ceil(ppem / 2)
+        hdmxTable.hdmx[ppem] = {
+            name: math.ceil(width / halfUpm) * halfPpem
+            for name, (width, _) in originFontHmtx.metrics.items()
+        }
+
+    font["hdmx"] = hdmxTable
+
+    font.save(filename)
+    font.close()
+
+
+if __name__ == "__main__":
+    main()