Correct CSS styles for variable fonts

src/diffenator2/__init__.py

@@ -39,7 +39,9 @@ def proof_fonts(self):
         self.w = Writer(self.ninja_file)
         self.w.rule("proofing", '_diffbrowsers "$args"')
         self.w.newline()
-        self.w.build(self.cli_args["out"], "proofing", variables={"args": repr(self.cli_args)})
+        self.w.build(
+            self.cli_args["out"], "proofing", variables={"args": repr(self.cli_args)}
+        )
         self.run()
         self.w.close()
         self.ninja_file.close()
@@ -49,7 +51,11 @@ def diff_fonts(self, fonts_before, fonts_after):
         self.w = Writer(self.ninja_file)
         if self.cli_args["diffbrowsers"]:
             self.w.rule("diffbrowsers", '_diffbrowsers "$args"')
-            self.w.build(self.cli_args["out"], "diffbrowsers", variables={"args": repr(self.cli_args)})
+            self.w.build(
+                self.cli_args["out"],
+                "diffbrowsers",
+                variables={"args": repr(self.cli_args)},
+            )
         self.w.newline()
 
         if self.cli_args["diffenator"]:
@@ -61,14 +67,23 @@ def diff_fonts(self, fonts_before, fonts_after):
                 coords = new_style.coords
                 style = new_style.name.replace(" ", "-")
                 o = os.path.join(self.cli_args["out"], style.replace(" ", "-"))
-                self.w.build(o, "diffenator", variables={"args": repr(
-                    {**self.cli_args, **{
-                        "coords": dict_coords_to_string(coords),
-                        "old_font": old_style.font.ttFont.reader.file.name,
-                        "new_font": new_style.font.ttFont.reader.file.name,
-                        "out": self.cli_args["out"],
-                    }}
-                )})
+                self.w.build(
+                    o,
+                    "diffenator",
+                    variables={
+                        "args": repr(
+                            {
+                                **self.cli_args,
+                                **{
+                                    "coords": dict_coords_to_string(coords),
+                                    "old_font": old_style.font.ttFont.reader.file.name,
+                                    "new_font": new_style.font.ttFont.reader.file.name,
+                                    "out": self.cli_args["out"],
+                                },
+                            }
+                        )
+                    },
+                )
         self.run()
         self.w.close()
         self.ninja_file.close()
@@ -95,16 +110,12 @@ def ninja_proof(
     command="proof",
     user_wordlist: str = "",
     diffbrowsers_templates=[],
-    **kwargs
+    **kwargs,
 ):
     if not os.path.exists(out):
         os.mkdir(out)
 
-    args = {
-        **locals(),
-        **locals().pop("kwargs"),
-        **{"fonts": [f.path for f in fonts]}
-    }
+    args = {**locals(), **locals().pop("kwargs"), **{"fonts": [f.path for f in fonts]}}
     with NinjaBuilder(cli_args=args) as builder:
         if filter_styles:
             builder.proof_fonts()
@@ -136,19 +147,19 @@ def ninja_diff(
     precision: int = FONT_SIZE,
     no_words: bool = False,
     no_tables: bool = False,
-    diffenator_template = resource_filename(
+    diffenator_template=resource_filename(
         "diffenator2", os.path.join("templates", "diffenator.html")
     ),
     command="diff",
     diffbrowsers_templates=[],
     debug_gifs: bool = False,
-    **kwargs
+    **kwargs,
 ):
     args = {
         **locals(),
         **locals().pop("kwargs"),
         **{"fonts_before": [f.path for f in fonts_before]},
-        **{"fonts_after": [f.path for f in fonts_after]}
+        **{"fonts_after": [f.path for f in fonts_after]},
     }
     if not os.path.exists(out):
         os.mkdir(out)

src/diffenator2/__main__.py

@@ -57,7 +57,9 @@ def main(**kwargs):
             "--fonts-after", "-fa", nargs="+", required=True, type=DFont
         )
         diff_parser.add_argument("--no-diffenator", default=False, action="store_true")
-        diff_parser.add_argument("--no-diffbrowsers", default=False, action="store_true")
+        diff_parser.add_argument(
+            "--no-diffbrowsers", default=False, action="store_true"
+        )
         diff_parser.add_argument("--threshold", "-t", type=float, default=THRESHOLD)
         diff_parser.add_argument("--precision", default=FONT_SIZE, type=int)
         # TODO this can just be precision
@@ -82,8 +84,8 @@ def main(**kwargs):
     if args.command == "proof":
         ninja_proof(**vars(args))
     elif args.command == "diff":
-        args.diffbrowsers=False if args.no_diffbrowsers else True
-        args.diffenator=False if args.no_diffenator else True
+        args.diffbrowsers = False if args.no_diffbrowsers else True
+        args.diffenator = False if args.no_diffenator else True
         ninja_diff(**vars(args))
     else:
         raise NotImplementedError(f"{args.command} not supported")

src/diffenator2/_diffenator.py

@@ -22,7 +22,15 @@
 
 
 class DiffFonts:
-    def __init__(self, matcher, threshold=0.01, font_size=28, words=True, tables=True, debug_gifs=False):
+    def __init__(
+        self,
+        matcher,
+        threshold=0.01,
+        font_size=28,
+        words=True,
+        tables=True,
+        debug_gifs=False,
+    ):
         self.old_font = matcher.old_fonts[0]
         self.new_font = matcher.new_fonts[0]
 

src/diffenator2/font.py

@@ -31,6 +31,7 @@ def __init__(self, font, coords, name=None):
             self.name,
             self.coords,
             self.font.suffix,
+            self.font.is_variable(),
         )
 
     def _make_name(self):
@@ -46,7 +47,7 @@ def get_font_styles(fonts, method, filter_styles=None):
     for font in fonts:
         for style in getattr(font, method)():
             if filter_styles and not re.match(filter_styles, style.name):
-                    continue
+                continue
             results.append(style)
     return results
 
@@ -94,9 +95,11 @@ def set_variations(self, coords: dict[str, float]):
         self.ftFont.set_var_design_coords(ft_coords)
         self.variations = coords
         self.hbFont.set_variations(coords)
-    
+
     def closest_style(self, coords):
-        fvar_axes = {a.axisTag: (a.minValue, a.maxValue) for a in self.ttFont["fvar"].axes}
+        fvar_axes = {
+            a.axisTag: (a.minValue, a.maxValue) for a in self.ttFont["fvar"].axes
+        }
         found_coords = {}
         for axis, value in coords.items():
             if axis not in fvar_axes:
@@ -139,24 +142,21 @@ def instances(self):
                 )
             )
         return results
-    
+
     def masters(self):
         assert self.is_variable(), "Needs to be a variable font"
         results = []
         master_coords = find_masters(self.ttFont)
         for coords in master_coords:
             results.append(Style(self, coords))
         return results
-    
+
     def cross_product(self):
         assert self.is_variable(), "Needs to be a variable font"
         results = []
         axis_values = [
-            (
-                a.minValue,
-                (a.minValue+a.maxValue)/2,
-                a.maxValue
-            ) for a in self.ttFont["fvar"].axes
+            (a.minValue, (a.minValue + a.maxValue) / 2, a.maxValue)
+            for a in self.ttFont["fvar"].axes
         ]
         axis_tags = [a.axisTag for a in self.ttFont["fvar"].axes]
 

src/diffenator2/html.py

@@ -1,5 +1,5 @@
-"""
-"""
+""" """
+
 from __future__ import annotations
 from jinja2 import Environment, FileSystemLoader
 from fontTools.ttLib import TTFont
@@ -26,7 +26,6 @@
 }
 
 
-
 def get_font_styles(ttfonts, suffix="", filters=None):
     res = []
     for ttfont in ttfonts:
@@ -40,7 +39,7 @@ def get_font_styles(ttfonts, suffix="", filters=None):
                 coords = inst.coordinates
                 if filters and not re.match(filters, style_name):
                     continue
-                res.append(CSSFontStyle(family_name, style_name, coords, suffix))
+                res.append(CSSFontStyle(family_name, style_name, coords, suffix, True))
         else:
             if filters and not any(re.match(f, style_name) for f in filters):
                 continue
@@ -59,6 +58,7 @@ def static_font_style(ttfont, suffix=""):
             "wdth": WIDTH_CLASS_TO_CSS[ttfont["OS/2"].usWidthClass],
         },
         suffix,
+        False,
     )
 
 
@@ -76,12 +76,7 @@ def diffenator_font_style(dfont, suffix=""):
     else:
         style_name = ttfont["name"].getBestSubFamilyName()
         coords = {"wght": ttfont["OS/2"].usWeightClass}
-    return CSSFontStyle(
-        "font",
-        "style",
-        coords,
-        suffix,
-    )
+    return CSSFontStyle("font", style_name, coords, suffix, dfont.is_variable())
 
 
 def filtered_font_sample_text(ttFont, characters):
@@ -90,7 +85,15 @@ def filtered_font_sample_text(ttFont, characters):
     return " ".join(sample_text)
 
 
-def proof_rendering(styles, templates, dst="out", filter_styles=None, characters=set(), pt_size=20, user_wordlist=None):
+def proof_rendering(
+    styles,
+    templates,
+    dst="out",
+    filter_styles=None,
+    characters=set(),
+    pt_size=20,
+    user_wordlist=None,
+):
     ttFont = styles[0].font.ttFont
     font_faces = set(style.font.css_font_face for style in styles)
     font_styles = [style.css_font_style for style in styles]
@@ -109,21 +112,28 @@ def proof_rendering(styles, templates, dst="out", filter_styles=None, characters
         test_strings=test_strings,
         pt_size=pt_size,
         user_strings=user_words,
-        filter_styles=filter_styles.replace("|", "-")
+        filter_styles=filter_styles.replace("|", "-"),
     )
 
 
-
-def diff_rendering(matcher, templates, dst="out", filter_styles=None, characters=set(), pt_size=20, user_wordlist=None):
+def diff_rendering(
+    matcher,
+    templates,
+    dst="out",
+    filter_styles=None,
+    characters=set(),
+    pt_size=20,
+    user_wordlist=None,
+):
     dFont = matcher.old_styles[0].font
     ttFont = matcher.old_styles[0].font.ttFont
     font_faces_old = set(style.font.css_font_face for style in matcher.old_styles)
     font_styles_old = [style.css_font_style for style in matcher.old_styles]
-    
+
     font_faces_new = set(style.font.css_font_face for style in matcher.new_styles)
     font_styles_new = [style.css_font_style for style in matcher.new_styles]
 
-    sample_text=filtered_font_sample_text(ttFont, characters)
+    sample_text = filtered_font_sample_text(ttFont, characters)
     test_strings = GFTestData.test_strings_in_font(ttFont, 0.1)
     characters = characters or [chr(c) for c in ttFont.getBestCmap()]
     characters = list(sorted(characters))
@@ -141,7 +151,7 @@ def diff_rendering(matcher, templates, dst="out", filter_styles=None, characters
         test_strings=test_strings,
         pt_size=pt_size,
         user_strings=user_words,
-        filter_styles=filter_styles.replace("|", "-")
+        filter_styles=filter_styles.replace("|", "-"),
     )
 
 
@@ -205,10 +215,15 @@ def _package(templates, dst, **kwargs):
         if "filter_styles" in kwargs:
             fp_prefix = kwargs.get("filter_styles")
         elif "diff" in kwargs:
-            filename = kwargs.get("font_faces_new")[0].filename.replace("new-", "").strip().replace(" ", "_")[:-4]
+            filename = (
+                kwargs.get("font_faces_new")[0]
+                .filename.replace("new-", "")
+                .strip()
+                .replace(" ", "_")[:-4]
+            )
             style = kwargs.get("font_styles_new")[0].stylename
             fp_prefix = f"{filename}-{style}"
-        dst_doc = os.path.join(dst, f'{fp_prefix}-{os.path.basename(template_fp)}')
+        dst_doc = os.path.join(dst, f"{fp_prefix}-{os.path.basename(template_fp)}")
         with open(dst_doc, "w", encoding="utf8") as out_file:
             out_file.write(doc)
 
@@ -218,4 +233,4 @@ def _package(templates, dst, **kwargs):
         if k in kwargs:
             for font in kwargs[k]:
                 out_fp = os.path.join(dst, font.filename)
-                shutil.copy(font.ttfont.reader.file.name, out_fp)
+                shutil.copy(font.ttfont.reader.file.name, out_fp)