font-baseline - npm Package Compare versions

Comparing version 0.1.0 to 1.0.0

index.js

@@ -8,3 +8,3 @@ ;(function(define){define(function(require,exports,module){
 			strut = document.createElement('span'),
-			height;
+			computedStyle, baselineHeight, strutHeight, fontSize;
 
@@ -14,3 +14,3 @@ container = container || document.body;
 		strut.innerText = 'T';
-		style.innerText = ".font-baseline{visibility:hidden;height:100px;}.font-baseline span{line-height:0;}.font-baseline span:after{content:'';height:100%;display:inline-block;}";
+		style.innerText = ".font-baseline{visibility:hidden;height:100px;}.font-baseline span:after{content:'';height:100%;display:inline-block;}";
 
@@ -20,8 +20,25 @@ div.appendChild(strut);
 		div.classList.add('font-baseline');
+		container.appendChild(div);
 
-		container.appendChild(div);
-		height = strut.offsetTop + strut.offsetHeight - div.offsetHeight - div.offsetTop;
+		computedStyle  = window.getComputedStyle(strut);
+		fontSize       = parseInt(computedStyle.fontSize, 10);
+		lineHeight     = parseInt(computedStyle.lineHeight, 10);
+
+		strut.style.lineHeight = 0;
+
+		strutHeight    = strut.offsetHeight;
+		baselineHeight = strut.offsetTop + strutHeight - div.offsetHeight - div.offsetTop;
+
+		lineHeight     = lineHeight || strutHeight;
+
 		div.parentNode.removeChild(div);
 
-		return height;
+		return {
+			baseline:   baselineHeight,
+			content:    strutHeight,
+			font:       fontSize,
+			line:       lineHeight,
+			multiplier: fontSize / strutHeight,
+			offset:     ((lineHeight - strutHeight) / 2) + baselineHeight
+		};
 	}
@@ -28,0 +45,0 @@

package.json

 {
   "name": "font-baseline",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "description": "Get the baseline height of a font",
@@ -10,3 +10,3 @@ "main": "index.js",
     "lintspaces": "./node_modules/.bin/lintspaces -i js-comments -e .editorconfig `npm run -s files`",
-    "test": "./node_modules/mocha-phantomjs/bin/mocha-phantomjs -R dot ./test/index.html && npm run jshint && npm run lintspaces"
+    "test": "./node_modules/mocha-phantomjs/bin/mocha-phantomjs -R spec ./test/index.html && npm run jshint && npm run lintspaces"
   },
@@ -13,0 +13,0 @@ "repository": {

README.md

@@ -12,2 +12,4 @@ # font-baseline
 
-https://mudcu.be/journal/2011/01/html5-typographic-metrics/#baselineCSS
+https://mudcu.be/journal/2011/01/html5-typographic-metrics/#baselineCSS
+
+http://dev.labs.ft.com/george/baseline/

test/test.js

 var fontBaseline = window['font-baseline'];
 
+var openSansEl, pacificoEl;
+
 function takeScreenshot() {
@@ -12,21 +14,70 @@ if (window.callPhantom) {
 
-afterEach(function () {
-	if (this.currentTest.state == 'failed') {
-		takeScreenshot();
-	}
-});
-
 describe('Font Baseline', function() {
 
-	it('should measure the baseline of OpenSans as 5px at 16px font-size', function() {
-		assert.equal(fontBaseline(document.querySelector('.measure .open-sans')), 5);
+	beforeEach(function() {
+		openSansEl = document.querySelector('.measure .open-sans');
+		pacificoEl = document.querySelector('.measure .pacifico');
+
+		openSansEl.style.fontSize = '12px';
+		openSansEl.style.lineHeight = '20px';
+		pacificoEl.style.fontSize = '12px';
+		pacificoEl.style.lineHeight = '20px';
 	});
 
-	it('should measure the baseline of Pacifico as 7px at 16px font-size', function() {
-		assert.equal(fontBaseline(document.querySelector('.measure .pacifico')), 7);
+	afterEach(function () {
+		if (this.currentTest.state == 'failed') {
+			takeScreenshot();
+		}
+
+		openSansEl.style.fontSize = '';
+		openSansEl.style.lineHeight = '';
+		pacificoEl.style.fontSize = '';
+		pacificoEl.style.lineHeight = '';
 	});
 
+	it('should measure the baseline of OpenSans as 4px at 12px font-size', function() {
+		var metrics = fontBaseline(openSansEl);
+		assert.equal(metrics.baseline, 4);
+	});
+
+	it('should measure the baseline of Pacifico as 5px at 12px font-size', function() {
+		var metrics = fontBaseline(pacificoEl);
+		assert.equal(metrics.baseline, 5);
+	});
+
+	it('should measure the font size', function() {
+		var metrics = fontBaseline(openSansEl);
+		assert.equal(metrics.font, 12);
+	});
+
+	it('should measure the line height', function() {
+		var metrics = fontBaseline(openSansEl);
+		assert.equal(metrics.line, 20);
+	});
+
+	it('should measure the content height', function() {
+		var metrics = fontBaseline(openSansEl);
+		assert.equal(metrics.content, 17);
+	});
+
+	it('should report the content height multiplier', function() {
+		var metrics = fontBaseline(openSansEl);
+		assert.equal(metrics.multiplier, 12 / 17);
+	});
+
+	it('should report the baseline offset', function() {
+		var metrics = fontBaseline(openSansEl);
+		assert.equal(metrics.offset, ((20 - 17) / 2) + 4);
+	});
+
 	it('should measure in the body by default, inheriting OpenSans font', function() {
-		assert.equal(fontBaseline(document.querySelector('.measure .open-sans')), 5);
+		var metrics = fontBaseline();
+		assert.equal(metrics.baseline, 5);
+		assert.equal(metrics.content, 22);
+		assert.equal(metrics.font, 16);
+		assert.equal(metrics.line, 22);
+		assert.equal(metrics.offset, 5);
+		assert.equal(metrics.multiplier, 16 / 22);
 	});
+
 });

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

76707

increased by5.82%

Lines of code

101

increased by114.89%

Number of low quality alerts

0

decreased by-100%

Number of lines in readme file

14

increased by16.67%

No dependency changes