sebdesign/cap-height

Uncaught RangeError: Cannot calculate the height of whitespace.

humanjpg opened this issue · 8 comments

humanjpg commented

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/lodash@4.17.4"></script>
<script src="src/scripts/uncompiled/cap-height.js"></script>
<script>
    capHeight.calculate({});
</script>

And using TypeKit in the <head>. Any ideas?

Many thanks!

humanjpg commented

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>.

sebdesign commented

Hello,

I will look into this issue today. Thanks for reporting!

humanjpg commented

Thanks, Sebastién! Much appreciated.

sebdesign commented

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.

humanjpg commented

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:

  1. Should I be looking for it as a css property in inspector, or should it be logged to the console?
  2. 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!

sebdesign commented

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/lodash@4.17.4"></script>
    <script src="https://unpkg.com/cap-height@2.0.0"></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!

humanjpg commented

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 :)

  • 🎉1
skjnldsv commented

@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"
};