cap-height
cap-height copied to clipboard
sebdesign
Uncaught RangeError: Cannot calculate the height of whitespace.
Hello,
I'm getting the following error in the console:
| g | @ | cap-height.js:1
-- | -- | -- | --
| apply | @ | lodash.js:496
| wrapper | @ | lodash.js:5356
| thru | @ | lodash.js:8812
| (anonymous) | @ | lodash.js:4379
| arrayReduce | @ | lodash.js:704
| baseWrapperValue | @ | lodash.js:4378
| wrapperValue | @ | lodash.js:9067
| h | @ | cap-height.js:1
| (anonymous) | @ | (index):550
I've included cap-height.js manually right at the bottom of my project:
<script src="https://unpkg.com/[email protected]"></script>
<script src="src/scripts/uncompiled/cap-height.js"></script>
<script>
capHeight.calculate({});
</script>
And using TypeKit in the <head>. Any ideas?
Many thanks!
Update: Still having problems
I'm using a TypeKit typeface — Acumin Pro
Also having the same issue with:
capHeight.calculate({
"font-style": "normal",
"font-weight": 400,
"font-size": "100px",
"font-family": "acumin-pro"
}, "HI");
I've also tried the following (which feels wrong), to no avail:
WebFont.load({
typekit: {
families: ["acumin-pro: 400"]
},
loading: () => {
capHeight.setContainer(document.body);
},
fontactive: capHeight.fontActive(properties => {
console.log(properties);
})
});
and
WebFontConfig = {
typekit: {
id: 'xxxxx' // with my TypeKit ID
}
}
WebFont.load({
typekit: {
families: ["acumin-pro: 400"]
},
loading: () => {
capHeight.setContainer(document.body);
},
fontactive: capHeight.fontActive(properties => {
console.log(properties);
})
});
I'm using the Advanced Embed Code in the <head>.
I'm not able to reproduce the error you have, but I see that you have this script src/scripts/uncompiled/cap-height.js. I'm not sure where you found it, but in my index.html I'm using the dist/cap-height.js script. I think it's the correct one to use in a browser environment.
Also, you don't need the advanced embed code from typekit in your <head>.
You need to add your kit ID in the WebFontConfig, without the families array:
WebFontConfig = {
typekit: { id: 'xxxxxx' },
loading: // this is fine,
fontactive: // this is fine,
}
Also, in the <style> tag, use this:
p {
font-family: 'acumin-pro';
font-size: 100px;
font-weight: 400;
}
I tried with a kit that has Futura PT and it worked fine! Let me know if that works for you.
Hi @sebdesign,
Thanks for getting back to me.
To be clear, the exact code I'm using is below (without the Typekit embed code in the head) and a <p> tag on the page. However, I'm not seeing the --cap-height property in inspector or in the console.
So, I guess I have 2 questions:
- Should I be looking for it as a css property in inspector, or should it be logged to the console?
- What is the exact code I should include?
<script>
WebFontConfig = {
typekit: { id: 'xyzxyz' } // Obviously with my Typekit ID in here
}
WebFont.load({
loading: () => {
capHeight.setContainer(document.body);
},
fontactive: capHeight.fontActive(properties => {
console.log(properties);
})
});
</script>
<style>
p {
font-family: 'acumin-pro';
font-size: 100px;
font-weight: 400;
}
</style>
Cheers!
Hi @humanjpg,
Normally you should see an object with the font properties in the console, not in the inspector.
This is the minimal code your page should have:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<script src="https://unpkg.com/[email protected]"></script>
<script src="https://unpkg.com/[email protected]"></script>
<script>
WebFontConfig = {
typekit: { id: 'xyxyxy' },
fontactive: capHeight.fontActive(function (properties) {
console.log(properties);
})
};
(function(d) {
var wf = d.createElement('script'), s = d.scripts[0];
wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js';
s.parentNode.insertBefore(wf, s);
})(document);
</script>
</body>
</html>
The WebFontConfig object is automatically used by the script below it, which loads the WebFontLoader. So you don't have to do WebFont.load(...).
The embedded style and the setContainer method are not required, but are used to display a canvas with the rendered font from WebFontLoader, or to inspect an element in your page with the given style and return its cap height, but they are not necessary.
With this exact code you should not see anything on the page, but you should see the font properties of all the fonts (and styles/weights) included in your kit in the console.
Let me know if that works for you or if you see any error.
Cheers!
Ah, makes sense.
That worked — thanks so much!
I reckon it would be well worth adding that to the main readme. Super quick and easy :)
@sebdesign though this raise an issue on the lib itself :) See https://codepen.io/skjnldsv/pen/PydLBK/
Using the args (text,properties) does work but your example on the readme state the other way around: (properties,text)
Does not work
capHeight.calculate({
"font-style": "normal",
"font-weight": 400,
"font-size": "100px",
"font-family": "serif"
}, "HI");
Work
capHeight.calculate('Hi', {
"font-style": "normal",
"font-weight": 400,
"font-size": "100px",
"font-family": "serif"
};
