@turntrout/subfont 1.0.0

package/lib/subsetGeneration.js

@@ -0,0 +1,347 @@
+const fs = require('fs');
+const pathModule = require('path');
+const crypto = require('crypto');
+const subsetFont = require('subset-font');
+const { getVariationAxisBounds } = require('./variationAxes');
+const collectFeatureGlyphIds = require('./collectFeatureGlyphIds');
+const subsetFontWithGlyphs = require('./subsetFontWithGlyphs');
+
+// Simple disk cache for subset results.
+// Cache key: hash(fontBuffer + text + format + variationAxes)
+// Cache value: the subset font buffer
+
+function subsetCacheKey(
+  fontBuffer,
+  text,
+  targetFormat,
+  variationAxes,
+  featureGlyphIds
+) {
+  const hash = crypto.createHash('sha256');
+  hash.update(fontBuffer);
+  hash.update(text);
+  hash.update(targetFormat);
+  if (variationAxes) hash.update(JSON.stringify(variationAxes));
+  if (featureGlyphIds) hash.update(JSON.stringify(featureGlyphIds));
+  return hash.digest('hex');
+}
+
+class SubsetDiskCache {
+  constructor(cacheDir) {
+    this._cacheDir = cacheDir;
+    this._ensured = false;
+  }
+
+  _ensureDir() {
+    if (!this._ensured) {
+      try {
+        fs.mkdirSync(this._cacheDir, { recursive: true });
+      } catch {
+        // Ignore errors (path is a file, read-only FS, etc.)
+      }
+      this._ensured = true;
+    }
+  }
+
+  get(key) {
+    const filePath = pathModule.join(this._cacheDir, key);
+    try {
+      return fs.readFileSync(filePath);
+    } catch {
+      return undefined;
+    }
+  }
+
+  set(key, buffer) {
+    this._ensureDir();
+    const filePath = pathModule.join(this._cacheDir, key);
+    try {
+      fs.writeFileSync(filePath, buffer);
+    } catch {
+      // Ignore write errors (read-only FS, etc.)
+    }
+  }
+}
+
+function getSubsetPromiseId(fontUsage, format, variationAxes = null) {
+  return [
+    fontUsage.text,
+    fontUsage.fontUrl,
+    format,
+    JSON.stringify(variationAxes),
+  ].join('\x1d');
+}
+
+function collectCanonicalFontUsages(htmlOrSvgAssetTextsWithProps) {
+  const canonicalFontUsageByUrl = new Map();
+
+  for (const item of htmlOrSvgAssetTextsWithProps) {
+    for (const fontUsage of item.fontUsages) {
+      if (!fontUsage.fontUrl) continue;
+      if (!canonicalFontUsageByUrl.has(fontUsage.fontUrl)) {
+        canonicalFontUsageByUrl.set(fontUsage.fontUrl, fontUsage);
+      }
+    }
+  }
+
+  return canonicalFontUsageByUrl;
+}
+
+async function loadFontAssets(assetGraph, allFonts) {
+  await assetGraph.populate({
+    followRelations: {
+      to: { url: { $or: allFonts } },
+    },
+  });
+
+  const fontAssetsByUrl = new Map();
+  const originalFontBuffers = new Map();
+  for (const fontUrl of allFonts) {
+    const fontAsset = assetGraph.findAssets({
+      url: fontUrl,
+      isLoaded: true,
+    })[0];
+    if (fontAsset) {
+      fontAssetsByUrl.set(fontUrl, fontAsset);
+      originalFontBuffers.set(fontUrl, fontAsset.rawSrc);
+    }
+  }
+
+  return { fontAssetsByUrl, originalFontBuffers };
+}
+
+async function computeVariationAxisBounds(
+  canonicalFontUsageByUrl,
+  fontAssetsByUrl,
+  seenAxisValuesByFontUrlAndAxisName
+) {
+  const cache = new Map();
+  const fontUrls = [...canonicalFontUsageByUrl.keys()].filter((url) =>
+    fontAssetsByUrl.has(url)
+  );
+  const boundsResults = await Promise.all(
+    fontUrls.map((fontUrl) =>
+      getVariationAxisBounds(
+        fontAssetsByUrl,
+        fontUrl,
+        seenAxisValuesByFontUrlAndAxisName
+      )
+    )
+  );
+  for (let i = 0; i < fontUrls.length; i++) {
+    cache.set(fontUrls[i], boundsResults[i]);
+  }
+  return cache;
+}
+
+function getSubsetInfoForFont(fontUrl, variationAxisBoundsCache) {
+  const res = variationAxisBoundsCache.get(fontUrl);
+  if (res) {
+    return {
+      variationAxes: res.variationAxes,
+      fullyInstanced: res.fullyInstanced,
+      numAxesPinned: res.numAxesPinned,
+      numAxesReduced: res.numAxesReduced,
+    };
+  }
+  return {
+    variationAxes: undefined,
+    fullyInstanced: false,
+    numAxesPinned: 0,
+    numAxesReduced: 0,
+  };
+}
+
+function applySubsetInfo(fontUsage, info) {
+  fontUsage.variationAxes = info.variationAxes;
+  fontUsage.fullyInstanced = info.fullyInstanced;
+  fontUsage.numAxesPinned = info.numAxesPinned;
+  fontUsage.numAxesReduced = info.numAxesReduced;
+}
+
+function assignSubsetResults(
+  canonicalFontUsageByUrl,
+  subsetResultsByFontUrl,
+  resolvedSubsets,
+  formats
+) {
+  for (const [, fontUsage] of canonicalFontUsageByUrl) {
+    const info = subsetResultsByFontUrl.get(fontUsage.fontUrl);
+    for (const targetFormat of formats) {
+      const promiseId = getSubsetPromiseId(
+        fontUsage,
+        targetFormat,
+        info.variationAxes
+      );
+      const subsetBuffer = resolvedSubsets.get(promiseId);
+      if (subsetBuffer) {
+        if (!fontUsage.subsets) {
+          fontUsage.subsets = {};
+        }
+        fontUsage.subsets[targetFormat] = subsetBuffer;
+        const size = subsetBuffer.length;
+        if (
+          !fontUsage.smallestSubsetSize ||
+          size < fontUsage.smallestSubsetSize
+        ) {
+          fontUsage.smallestSubsetSize = size;
+          fontUsage.smallestSubsetFormat = targetFormat;
+          applySubsetInfo(fontUsage, info);
+        }
+      }
+    }
+  }
+}
+
+function propagateSubsets(
+  htmlOrSvgAssetTextsWithProps,
+  canonicalFontUsageByUrl,
+  subsetResultsByFontUrl
+) {
+  for (const item of htmlOrSvgAssetTextsWithProps) {
+    for (const fontUsage of item.fontUsages) {
+      if (!fontUsage.fontUrl) continue;
+      const canonical = canonicalFontUsageByUrl.get(fontUsage.fontUrl);
+      if (canonical && canonical !== fontUsage && canonical.subsets) {
+        fontUsage.subsets = canonical.subsets;
+        fontUsage.smallestSubsetSize = canonical.smallestSubsetSize;
+        fontUsage.smallestSubsetFormat = canonical.smallestSubsetFormat;
+        applySubsetInfo(
+          fontUsage,
+          subsetResultsByFontUrl.get(fontUsage.fontUrl)
+        );
+      }
+    }
+  }
+}
+
+async function getSubsetsForFontUsage(
+  assetGraph,
+  htmlOrSvgAssetTextsWithProps,
+  formats,
+  seenAxisValuesByFontUrlAndAxisName,
+  cacheDir = null
+) {
+  const diskCache = cacheDir ? new SubsetDiskCache(cacheDir) : null;
+  const canonicalFontUsageByUrl = collectCanonicalFontUsages(
+    htmlOrSvgAssetTextsWithProps
+  );
+  const allFontUrls = [...canonicalFontUsageByUrl.keys()];
+
+  const { fontAssetsByUrl, originalFontBuffers } = await loadFontAssets(
+    assetGraph,
+    allFontUrls
+  );
+
+  const subsetPromiseMap = new Map();
+  const subsetResultsByFontUrl = new Map();
+
+  const variationAxisBoundsCache = await computeVariationAxisBounds(
+    canonicalFontUsageByUrl,
+    fontAssetsByUrl,
+    seenAxisValuesByFontUrlAndAxisName
+  );
+
+  for (const [fontUrl, fontUsage] of canonicalFontUsageByUrl) {
+    const fontBuffer = originalFontBuffers.get(fontUrl);
+    if (!fontBuffer) continue;
+    const text = fontUsage.text;
+    const subsetInfo = getSubsetInfoForFont(fontUrl, variationAxisBoundsCache);
+    subsetResultsByFontUrl.set(fontUrl, subsetInfo);
+
+    // When font-feature-settings or font-variant-* CSS properties are used,
+    // collect the alternate glyph IDs that GSUB features produce for the
+    // page text. These are passed directly to HarfBuzz's subset glyph set,
+    // preserving the alternate glyphs without including all codepoints.
+    let featureGlyphIds;
+    if (fontUsage.hasFontFeatureSettings && fontBuffer) {
+      featureGlyphIds = await collectFeatureGlyphIds(fontBuffer, text);
+    }
+
+    for (const targetFormat of formats) {
+      const promiseId = getSubsetPromiseId(
+        fontUsage,
+        targetFormat,
+        subsetInfo.variationAxes
+      );
+
+      if (!subsetPromiseMap.has(promiseId)) {
+        // Check disk cache first if available
+        const cacheKey = diskCache
+          ? subsetCacheKey(
+              fontBuffer,
+              text,
+              targetFormat,
+              subsetInfo.variationAxes,
+              featureGlyphIds
+            )
+          : null;
+        const cachedResult = diskCache && diskCache.get(cacheKey);
+
+        if (cachedResult) {
+          subsetPromiseMap.set(promiseId, Promise.resolve(cachedResult));
+        } else {
+          const subsetCall =
+            featureGlyphIds && featureGlyphIds.length > 0
+              ? subsetFontWithGlyphs(fontBuffer, text, {
+                  targetFormat,
+                  glyphIds: featureGlyphIds,
+                  variationAxes: subsetInfo.variationAxes,
+                })
+              : subsetFont(fontBuffer, text, {
+                  targetFormat,
+                  variationAxes: subsetInfo.variationAxes,
+                });
+
+          subsetPromiseMap.set(
+            promiseId,
+            subsetCall
+              .then((result) => {
+                if (diskCache && result) {
+                  diskCache.set(cacheKey, result);
+                }
+                return result;
+              })
+              .catch((err) => {
+                const error = new Error(err.message);
+                error.asset = fontAssetsByUrl.get(fontUrl);
+                assetGraph.warn(error);
+              })
+          );
+        }
+      }
+    }
+  }
+
+  // Await all subset promises, then assign results synchronously to avoid
+  // race conditions when multiple formats resolve concurrently.
+  const promiseKeys = [...subsetPromiseMap.keys()];
+  const promiseResults = await Promise.all(subsetPromiseMap.values());
+  const resolvedSubsets = new Map();
+  for (let i = 0; i < promiseKeys.length; i++) {
+    resolvedSubsets.set(promiseKeys[i], promiseResults[i]);
+  }
+
+  assignSubsetResults(
+    canonicalFontUsageByUrl,
+    subsetResultsByFontUrl,
+    resolvedSubsets,
+    formats
+  );
+
+  propagateSubsets(
+    htmlOrSvgAssetTextsWithProps,
+    canonicalFontUsageByUrl,
+    subsetResultsByFontUrl
+  );
+
+  return fontAssetsByUrl;
+}
+
+module.exports = {
+  getSubsetPromiseId,
+  getSubsetsForFontUsage,
+  // Exported for testing
+  _subsetCacheKey: subsetCacheKey,
+  _SubsetDiskCache: SubsetDiskCache,
+};

package/lib/unicodeRange.js

@@ -0,0 +1,38 @@
+// A much, much smarter person than me solved this problem, and their code represents the bulk of the work here:
+// http://stackoverflow.com/questions/2270910/how-to-convert-sequence-of-numbers-in-an-array-to-range-of-numbers
+
+function getHexValue(num) {
+  return num.toString(16).toUpperCase();
+}
+
+/**
+ * Generates a unicode-range string from an array of unicode codepoints
+ * @param  {Number[]} codePoints The code points
+ * @return {String}              The resulting [unicode-range](https://developer.mozilla.org/en-US/docs/Web/CSS/%40font-face/unicode-range)
+ */
+const getUnicodeRanges = (codePoints) => {
+  const ranges = [];
+  let start, end;
+
+  codePoints.sort((a, b) => a - b);
+
+  for (let i = 0; i < codePoints.length; i++) {
+    start = codePoints[i];
+    end = start;
+
+    while (codePoints[i + 1] - codePoints[i] === 1) {
+      end = codePoints[i + 1];
+      i++;
+    }
+
+    ranges.push(
+      start === end
+        ? `U+${getHexValue(start)}`
+        : `U+${getHexValue(start)}-${getHexValue(end)}`
+    );
+  }
+
+  return ranges.toString();
+};
+
+module.exports = getUnicodeRanges;

package/lib/unquote.js

@@ -0,0 +1,23 @@
+function unescapeCssString(str) {
+  return str.replace(
+    /\\([0-9a-f]{1,6})(\s?)/gi,
+    ($0, hexChars, followingWhitespace) =>
+      `${String.fromCodePoint(parseInt(hexChars, 16))}${
+        hexChars.length === 6 ? followingWhitespace : ''
+      }`
+  );
+}
+
+module.exports = function unquote(str) {
+  if (typeof str !== 'string') {
+    return str;
+  }
+
+  return str.replace(
+    /^'([^']*)'$|^"([^"]*)"$/,
+    ($0, singleQuoted, doubleQuoted) =>
+      typeof singleQuoted === 'string'
+        ? unescapeCssString(singleQuoted.replace(/\\'/g, "'"))
+        : unescapeCssString(doubleQuoted.replace(/\\"/g, '"'))
+  );
+};

package/lib/variationAxes.js

@@ -0,0 +1,162 @@
+const getFontInfo = require('./getFontInfo');
+const parseFontVariationSettings = require('./parseFontVariationSettings');
+
+const standardVariationAxes = new Set(['wght', 'wdth', 'ital', 'slnt', 'opsz']);
+// It would be very hard to trace statically which values of opsz (font-optical-sizing)
+// are going to be used, so we ignore that one:
+const ignoredVariationAxes = new Set(['opsz']);
+
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+
+function renderNumberRange(min, max) {
+  if (min === max) {
+    return String(min);
+  } else {
+    return `${min}-${max}`;
+  }
+}
+
+function getVariationAxisUsage(
+  htmlOrSvgAssetTextsWithProps,
+  parseFontWeightRange,
+  parseFontStretchRange
+) {
+  const seenAxisValuesByFontUrlAndAxisName = new Map();
+
+  function noteUsedValue(fontUrl, axisName, axisValue) {
+    let seenAxes = seenAxisValuesByFontUrlAndAxisName.get(fontUrl);
+    if (!seenAxes) {
+      seenAxes = new Map();
+      seenAxisValuesByFontUrlAndAxisName.set(fontUrl, seenAxes);
+    }
+    if (seenAxes.has(axisName)) {
+      seenAxes.get(axisName).add(axisValue);
+    } else {
+      seenAxes.set(axisName, new Set([axisValue]));
+    }
+  }
+
+  // Since fontUsages are built from shared templates, all pages produce
+  // the same fontStyles/fontWeights/etc. for a given fontUrl. Process
+  // each unique fontUrl only once to avoid num_pages × redundant iterations.
+  const seenFontUrls = new Set();
+  for (const { fontUsages } of htmlOrSvgAssetTextsWithProps) {
+    for (const {
+      fontUrl,
+      fontStyles,
+      fontWeights,
+      fontStretches,
+      fontVariationSettings,
+      props,
+    } of fontUsages) {
+      if (seenFontUrls.has(fontUrl)) continue;
+      seenFontUrls.add(fontUrl);
+      if (fontStyles.has('italic')) {
+        noteUsedValue(fontUrl, 'ital', 1);
+      }
+      // If any font-style value except italic is seen (including normal or oblique)
+      // we're also utilizing value 0:
+      if (fontStyles.size > (fontStyles.has('italic') ? 1 : 0)) {
+        noteUsedValue(fontUrl, 'ital', 0);
+      }
+      if (fontStyles.has('oblique')) {
+        // https://www.w3.org/TR/css-fonts-4/#font-style-prop
+        // oblique <angle>?
+        //   [...] The lack of an <angle> represents 14deg.
+        // And also:
+        //   Note: the OpenType slnt axis is defined with a positive angle meaning a counter-clockwise slant, the opposite direction to CSS.
+        // The CSS implementation will take this into account when using variations to produce oblique faces.
+        noteUsedValue(fontUrl, 'slnt', -14);
+      }
+      // If any font-style value except oblique is seen (including normal or italic)
+      // we're also utilizing value 0:
+      if (fontStyles.size > (fontStyles.has('oblique') ? 1 : 0)) {
+        noteUsedValue(fontUrl, 'slnt', 0);
+      }
+
+      const minMaxFontWeight = parseFontWeightRange(props['font-weight']);
+      for (const fontWeight of fontWeights) {
+        noteUsedValue(fontUrl, 'wght', clamp(fontWeight, ...minMaxFontWeight));
+      }
+
+      const minMaxFontStretch = parseFontStretchRange(props['font-stretch']);
+      for (const fontStrech of fontStretches) {
+        noteUsedValue(fontUrl, 'wdth', clamp(fontStrech, ...minMaxFontStretch));
+      }
+
+      for (const fontVariationSettingsValue of fontVariationSettings) {
+        for (const [axisName, axisValue] of parseFontVariationSettings(
+          fontVariationSettingsValue
+        )) {
+          noteUsedValue(fontUrl, axisName, axisValue);
+        }
+      }
+    }
+  }
+
+  return { seenAxisValuesByFontUrlAndAxisName };
+}
+
+async function getVariationAxisBounds(
+  fontAssetsByUrl,
+  fontUrl,
+  seenAxisValuesByFontUrlAndAxisName
+) {
+  let fontInfo;
+  try {
+    fontInfo = await getFontInfo(fontAssetsByUrl.get(fontUrl).rawSrc);
+  } catch {
+    // Invalid font -- skip instancing, return safe defaults
+    return {
+      fullyInstanced: false,
+      numAxesPinned: 0,
+      numAxesReduced: 0,
+      variationAxes: {},
+    };
+  }
+
+  const variationAxes = {};
+  let fullyInstanced = true;
+  let numAxesPinned = 0;
+  let numAxesReduced = 0;
+  const fontVariationEntries = Object.entries(fontInfo.variationAxes);
+  const seenAxisValuesByAxisName =
+    seenAxisValuesByFontUrlAndAxisName.get(fontUrl);
+  if (fontVariationEntries.length > 0 && seenAxisValuesByAxisName) {
+    for (const [
+      axisName,
+      { min, max, default: defaultValue },
+    ] of fontVariationEntries) {
+      let seenAxisValues = seenAxisValuesByAxisName.get(axisName);
+      if (!seenAxisValues && !ignoredVariationAxes.has(axisName)) {
+        seenAxisValues = new Set([defaultValue]);
+      }
+      if (seenAxisValues && seenAxisValues.size === 1) {
+        variationAxes[axisName] = clamp([...seenAxisValues][0], min, max);
+        numAxesPinned += 1;
+      } else if (seenAxisValues) {
+        const minSeenValue = Math.min(...seenAxisValues);
+        const maxSeenValue = Math.max(...seenAxisValues);
+        variationAxes[axisName] = {
+          min: Math.max(minSeenValue, min),
+          max: Math.min(maxSeenValue, max),
+        };
+        fullyInstanced = false;
+        if (minSeenValue > min || maxSeenValue < max) {
+          numAxesReduced += 1;
+        }
+      }
+    }
+  }
+  return { fullyInstanced, numAxesPinned, numAxesReduced, variationAxes };
+}
+
+module.exports = {
+  standardVariationAxes,
+  ignoredVariationAxes,
+  renderNumberRange,
+  getVariationAxisUsage,
+  getVariationAxisBounds,
+};