capsize - npm Package Compare versions

Comparing version 1.0.1 to 1.1.0

CHANGELOG.md

 # capsize
 
+## 1.1.0
+
+### Minor Changes
+
+- [`943bbc4`](https://github.com/seek-oss/capsize/commit/943bbc437406ea7448ed86f441a64a5ec584c212) [#19](https://github.com/seek-oss/capsize/pull/19) Thanks [@michaeltaranto](https://github.com/michaeltaranto)! - Add getCapHeight utility and round decimal precision to 4 places
+
+  **Add `getCapHeight({ fontSize: number, fontMetrics: FontMetrics }): number`**
+  Utility to get the actual rendered cap height for a specific font size given the provided font metrics.
+
+  **CSS property precision**
+  Based on discovering that browser implementations of layout units fall between 1/60th and 1/64th of a pixel, rounding all property values to 4 decimal precision.
+
+  Reference: https://trac.webkit.org/wiki/LayoutUnit
+  (also mentions Mozilla - https://trac.webkit.org/wiki/LayoutUnit#Notes)
+
 ## 1.0.1
@@ -4,0 +19,0 @@

dist/capsize.cjs.dev.js

@@ -5,2 +5,6 @@ 'use strict';
 
+function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
+
+var roundTo = _interopDefault(require('round-to'));
+
 const preventCollapse = 0.05;
@@ -49,2 +53,11 @@
 
+/*
+   Rounding all values to a precision of `4` based on discovering that browser
+   implementations of layout units fall between 1/60th and 1/64th of a pixel.
+
+   Reference: https://trac.webkit.org/wiki/LayoutUnit
+   (above wiki also mentions Mozilla - https://trac.webkit.org/wiki/LayoutUnit#Notes)
+*/
+const PRECISION = 4;
+
 function createCss({
@@ -70,8 +83,8 @@ lineHeight,
   return {
-    fontSize: `${fontSize}px`,
-    lineHeight: lineHeight ? `${lineHeight}px` : 'normal',
+    fontSize: `${roundTo(fontSize, PRECISION)}px`,
+    lineHeight: lineHeight ? `${roundTo(lineHeight, PRECISION)}px` : 'normal',
     padding: `${preventCollapse}px 0`,
     '::before': {
       content: "''",
-      marginTop: `${leadingTrim(ascentScale - capHeightScale + lineGapScale / 2) * -1}em`,
+      marginTop: `${roundTo(leadingTrim(ascentScale - capHeightScale + lineGapScale / 2) * -1, PRECISION)}em`,
       display: 'block',
@@ -82,3 +95,3 @@ height: 0
       content: "''",
-      marginBottom: `${leadingTrim(descentScale + lineGapScale / 2) * -1}em`,
+      marginBottom: `${roundTo(leadingTrim(descentScale + lineGapScale / 2) * -1, PRECISION)}em`,
       display: 'block',
@@ -89,3 +102,8 @@ height: 0
 }
+const getCapHeight = ({
+  fontSize,
+  fontMetrics
+}) => roundTo(fontSize * fontMetrics.capHeight / fontMetrics.unitsPerEm, PRECISION);
 
 exports.default = capsize;
+exports.getCapHeight = getCapHeight;

dist/capsize.cjs.prod.js

 "use strict";
 
+function _interopDefault(ex) {
+  return ex && "object" == typeof ex && "default" in ex ? ex.default : ex;
+}
+
 Object.defineProperty(exports, "__esModule", {
@@ -7,2 +11,4 @@ value: !0
 
+var roundTo = _interopDefault(require("round-to"));
+
 const preventCollapse = .05;
@@ -28,11 +34,13 @@
 
+const PRECISION = 4;
+
 function createCss({lineHeight: lineHeight, fontSize: fontSize, fontMetrics: fontMetrics}) {
   const toScale = value => value / fontSize, absoluteDescent = Math.abs(fontMetrics.descent), capHeightScale = fontMetrics.capHeight / fontMetrics.unitsPerEm, descentScale = absoluteDescent / fontMetrics.unitsPerEm, ascentScale = fontMetrics.ascent / fontMetrics.unitsPerEm, lineGapScale = fontMetrics.lineGap / fontMetrics.unitsPerEm, lineHeightScale = (fontMetrics.ascent + fontMetrics.lineGap + absoluteDescent) / fontMetrics.unitsPerEm, specifiedLineHeightOffset = lineHeight ? (lineHeightScale * fontSize - lineHeight) / 2 : 0, leadingTrim = value => value - toScale(specifiedLineHeightOffset) + toScale(.05);
   return {
-    fontSize: fontSize + "px",
-    lineHeight: lineHeight ? lineHeight + "px" : "normal",
+    fontSize: roundTo(fontSize, 4) + "px",
+    lineHeight: lineHeight ? roundTo(lineHeight, 4) + "px" : "normal",
     padding: "0.05px 0",
     "::before": {
       content: "''",
-      marginTop: -1 * leadingTrim(ascentScale - capHeightScale + lineGapScale / 2) + "em",
+      marginTop: roundTo(-1 * leadingTrim(ascentScale - capHeightScale + lineGapScale / 2), 4) + "em",
       display: "block",
@@ -43,3 +51,3 @@ height: 0
       content: "''",
-      marginBottom: -1 * leadingTrim(descentScale + lineGapScale / 2) + "em",
+      marginBottom: roundTo(-1 * leadingTrim(descentScale + lineGapScale / 2), 4) + "em",
       display: "block",
@@ -51,2 +59,4 @@ height: 0
 
-exports.default = capsize;
+const getCapHeight = ({fontSize: fontSize, fontMetrics: fontMetrics}) => roundTo(fontSize * fontMetrics.capHeight / fontMetrics.unitsPerEm, 4);
+
+exports.default = capsize, exports.getCapHeight = getCapHeight;

dist/capsize.esm.js

@@ -0,1 +1,3 @@
+import roundTo from 'round-to';
+
 const preventCollapse = 0.05;
@@ -44,2 +46,11 @@
 
+/*
+   Rounding all values to a precision of `4` based on discovering that browser
+   implementations of layout units fall between 1/60th and 1/64th of a pixel.
+
+   Reference: https://trac.webkit.org/wiki/LayoutUnit
+   (above wiki also mentions Mozilla - https://trac.webkit.org/wiki/LayoutUnit#Notes)
+*/
+const PRECISION = 4;
+
 function createCss({
@@ -65,8 +76,8 @@ lineHeight,
   return {
-    fontSize: `${fontSize}px`,
-    lineHeight: lineHeight ? `${lineHeight}px` : 'normal',
+    fontSize: `${roundTo(fontSize, PRECISION)}px`,
+    lineHeight: lineHeight ? `${roundTo(lineHeight, PRECISION)}px` : 'normal',
     padding: `${preventCollapse}px 0`,
     '::before': {
       content: "''",
-      marginTop: `${leadingTrim(ascentScale - capHeightScale + lineGapScale / 2) * -1}em`,
+      marginTop: `${roundTo(leadingTrim(ascentScale - capHeightScale + lineGapScale / 2) * -1, PRECISION)}em`,
       display: 'block',
@@ -77,3 +88,3 @@ height: 0
       content: "''",
-      marginBottom: `${leadingTrim(descentScale + lineGapScale / 2) * -1}em`,
+      marginBottom: `${roundTo(leadingTrim(descentScale + lineGapScale / 2) * -1, PRECISION)}em`,
       display: 'block',
@@ -84,3 +95,8 @@ height: 0
 }
+const getCapHeight = ({
+  fontSize,
+  fontMetrics
+}) => roundTo(fontSize * fontMetrics.capHeight / fontMetrics.unitsPerEm, PRECISION);
 
 export default capsize;
+export { getCapHeight };

dist/declarations/src/index.d.ts

@@ -51,1 +51,5 @@ export interface FontMetrics {
 export default capsize;
+export declare const getCapHeight: ({ fontSize, fontMetrics, }: {
+    fontSize: number;
+    fontMetrics: FontMetrics;
+}) => any;

package.json

 {
   "name": "capsize",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "Flipping how we define typography in CSS.",
@@ -32,3 +32,5 @@ "main": "dist/capsize.cjs.js",
   "license": "MIT",
-  "dependencies": {},
+  "dependencies": {
+    "round-to": "^4.1.0"
+  },
   "devDependencies": {
@@ -35,0 +37,0 @@ "@types/blob-to-buffer": "^1.2.0",

README.md

@@ -80,3 +80,22 @@ [![npm](https://img.shields.io/npm/v/capsize.svg?style=for-the-badge)](https://www.npmjs.com/package/capsize)
 <br />
+
+# Utilities
+
+### getCapHeight
+
+Returns the actual rendered cap height for a specific font size given the provided font metrics.
+
+```ts
+import { getCapHeight } from 'capsize';
+
+const actualCapHeight = getCapHeight({
+  fontSize: 24,
+  fontMetrics: {
+    ...
+  }
+})
+```
+
 <br />
+<br />
 
@@ -83,0 +102,0 @@ # License

src/index.ts

@@ -0,1 +1,3 @@
+import roundTo from 'round-to';
+
 export interface FontMetrics {
@@ -111,2 +113,12 @@ ascent: number;
 }
+
+/*
+   Rounding all values to a precision of `4` based on discovering that browser
+   implementations of layout units fall between 1/60th and 1/64th of a pixel.
+
+   Reference: https://trac.webkit.org/wiki/LayoutUnit
+   (above wiki also mentions Mozilla - https://trac.webkit.org/wiki/LayoutUnit#Notes)
+*/
+const PRECISION = 4;
+
 function createCss({
@@ -138,10 +150,11 @@ lineHeight,
   return {
-    fontSize: `${fontSize}px`,
-    lineHeight: lineHeight ? `${lineHeight}px` : 'normal',
+    fontSize: `${roundTo(fontSize, PRECISION)}px`,
+    lineHeight: lineHeight ? `${roundTo(lineHeight, PRECISION)}px` : 'normal',
     padding: `${preventCollapse}px 0`,
     '::before': {
       content: "''",
-      marginTop: `${
-        leadingTrim(ascentScale - capHeightScale + lineGapScale / 2) * -1
-      }em`,
+      marginTop: `${roundTo(
+        leadingTrim(ascentScale - capHeightScale + lineGapScale / 2) * -1,
+        PRECISION,
+      )}em`,
       display: 'block',
@@ -152,3 +165,6 @@ height: 0,
       content: "''",
-      marginBottom: `${leadingTrim(descentScale + lineGapScale / 2) * -1}em`,
+      marginBottom: `${roundTo(
+        leadingTrim(descentScale + lineGapScale / 2) * -1,
+        PRECISION,
+      )}em`,
       display: 'block',
@@ -161,1 +177,13 @@ height: 0,
 export default capsize;
+
+export const getCapHeight = ({
+  fontSize,
+  fontMetrics,
+}: {
+  fontSize: number;
+  fontMetrics: FontMetrics;
+}) =>
+  roundTo(
+    (fontSize * fontMetrics.capHeight) / fontMetrics.unitsPerEm,
+    PRECISION,
+  );

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

Improved metrics

Total package byte prevSize

23716

increased by18.5%

Lines of code

535

increased by12.63%

Number of lines in readme file

104

increased by22.35%

Worsened metrics

Dependency count

1

increased byInfinity%

Dependency changes

• + Addedround-to@^4.1.0

• + Addedround-to@4.1.0(transitive)