@capsizecss/core - npm Package Compare versions

Comparing version 4.0.0 to 4.1.0

dist/index.d.ts

 import { AtRule } from 'csstype';
 
+declare const _default: {
+    latin: {
+        "0": number;
+        "1": number;
+        "2": number;
+        "3": number;
+        "4": number;
+        "5": number;
+        "6": number;
+        "7": number;
+        "8": number;
+        "9": number;
+        ",": number;
+        " ": number;
+        t: number;
+        h: number;
+        e: number;
+        o: number;
+        f: number;
+        P: number;
+        p: number;
+        l: number;
+        "'": number;
+        s: number;
+        R: number;
+        u: number;
+        b: number;
+        i: number;
+        c: number;
+        C: number;
+        n: number;
+        a: number;
+        d: number;
+        y: number;
+        w: number;
+        B: number;
+        r: number;
+        z: number;
+        G: number;
+        j: number;
+        T: number;
+        ".": number;
+        L: number;
+        k: number;
+        m: number;
+        "]": number;
+        J: number;
+        F: number;
+        v: number;
+        g: number;
+        A: number;
+        N: number;
+        "-": number;
+        H: number;
+        D: number;
+        M: number;
+        I: number;
+        E: number;
+        "\"": number;
+        S: number;
+        "(": number;
+        ")": number;
+        x: number;
+        W: number;
+        Q: number;
+        Y: number;
+        q: number;
+        V: number;
+        á: number;
+        K: number;
+        U: number;
+        "=": number;
+        "[": number;
+        O: number;
+        é: number;
+        $: number;
+        ":": number;
+        "|": number;
+        "/": number;
+        "%": number;
+        Z: number;
+        ";": number;
+        X: number;
+    };
+    thai: {
+        ส: number;
+        ว: number;
+        น: number;
+        บ: number;
+        จ: number;
+        า: number;
+        ก: number;
+        เ: number;
+        ร: number;
+        ม: number;
+        ค: number;
+        ำ: number;
+        ข: number;
+        อ: number;
+        ป: number;
+        ด: number;
+        ใ: number;
+        ภ: number;
+        ท: number;
+        พ: number;
+        ฤ: number;
+        ษ: number;
+        ศ: number;
+        ะ: number;
+        ช: number;
+        แ: number;
+        ล: number;
+        ง: number;
+        ย: number;
+        ห: number;
+        ฝ: number;
+        ต: number;
+        โ: number;
+        ญ: number;
+        ณ: number;
+        ผ: number;
+        ไ: number;
+        ฯ: number;
+        ฟ: number;
+        ธ: number;
+        ถ: number;
+        ฐ: number;
+        ซ: number;
+        ฉ: number;
+        ฑ: number;
+        ฆ: number;
+        ฬ: number;
+        ฏ: number;
+        ฎ: number;
+        ฒ: number;
+        ๆ: number;
+        ฮ: number;
+        "\u0E52": number;
+        "\u0E55": number;
+    };
+};
+
+type SupportedSubset = keyof typeof _default;
 interface FontMetrics {
@@ -24,4 +167,12 @@ /** The font family name as authored by font creator */
     xHeight: number;
-    /** The average width of lowercase characters (currently derived from latin character frequencies in English language) */
+    /**
+     * The average width of character glyphs in the font for the Latin unicode subset.
+     *
+     * Calculated based on character frequencies in written text.
+     * */
     xWidthAvg: number;
+    /** A lookup of the `xWidthAvg` metric by unicode subset */
+    subsets?: Record<SupportedSubset, {
+        xWidthAvg: number;
+    }>;
 }
@@ -84,3 +235,3 @@ type ComputedValues = {
 
-type FontStackMetrics = Pick<FontMetrics, 'familyName' | 'ascent' | 'descent' | 'lineGap' | 'unitsPerEm' | 'xWidthAvg'>;
+type FontStackMetrics = Pick<FontMetrics, 'familyName' | 'ascent' | 'descent' | 'lineGap' | 'unitsPerEm' | 'xWidthAvg' | 'subsets'>;
 type FontFace = {
@@ -100,2 +251,12 @@ '@font-face': Omit<AtRule.FontFace, 'src' | 'fontFamily'> & Required<Pick<AtRule.FontFace, 'src' | 'fontFamily'>>;
     fontFaceProperties?: AdditionalFontFaceProperties;
+    /**
+     * The unicode subset to generate the fallback font for.
+     *
+     * The fallback font is scaled according to the average character width,
+     * calculated from weighted character frequencies in written text that
+     * uses the specified subset, e.g. `latin` from English, `thai` from Thai.
+     *
+     * Default: `latin`
+     */
+    subset?: SupportedSubset;
 };
@@ -102,0 +263,0 @@ type FontFaceFormatString = {

package.json

 {
   "name": "@capsizecss/core",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "description": "Flipping how we define typography",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -312,4 +312,26 @@ <img src="https://raw.githubusercontent.com/seek-oss/capsize/HEAD/images/capsize-header.png#gh-light-mode-only" alt="Capsize" title="Capsize" width="443px" />
 
-Worth noting, passing any of the metric override CSS properties will be ignored as they are calculated by Capsize. However, the `size-adjust` property is accepted to support fine-tuning the override for particular use cases. This can be used to finesse the adjustment for specific text, or to disable the adjustment by setting it to `100%`.
+> [!NOTE]
+> Passing any of the metric override CSS properties will be ignored as they are calculated by Capsize.
+> However, the `size-adjust` property is accepted to support fine-tuning the override for particular use cases.
+> This can be used to finesse the adjustment for specific text, or to disable the adjustment by setting it to `100%`.
 
+#### Scaling for different character subsets
+
+For languages that use different unicode subsets, e.g. Thai, the fallbacks need to be scaled accordingly, as the scaling is [based on character frequency in written language].
+
+A fallback font stack can be generated for a supported subset by specifying `subset` as an option:
+
+```ts
+const { fontFamily, fontFaces } = createFontStack([lobster, arial], {
+  subset: 'thai',
+});
+```
+
+> [!TIP]
+> Need support for a different unicode subset?
+> Either create an issue or follow the steps outlined in the [`generate-weightings` script] and open a PR.
+
+[based on character frequency in written language]: packages/metrics/README.md#how-xwidthavg-is-calculated
+[`generate-weightings` script]: packages/unpack/scripts/generate-weightings.ts
+
 ### precomputeValues
@@ -316,0 +338,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

48379

increased by23.76%

Lines of code

747

increased by37.06%

Number of lines in readme file

409

increased by5.68%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes