Uncaught RangeError: Cannot calculate the height of whitespace. #2

humanjpg · 2018-08-14T14:51:46Z

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!

The text was updated successfully, but these errors were encountered:

humanjpg · 2018-08-16T08:27:26Z

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 · 2018-08-16T08:30:54Z

Hello,

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

humanjpg · 2018-08-16T08:39:10Z

Thanks, Sebastién! Much appreciated.

sebdesign · 2018-08-16T18:30:58Z

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 · 2018-08-19T09:38:33Z

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!

sebdesign · 2018-08-19T20:29:30Z

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 · 2018-08-20T13:43:30Z

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

skjnldsv · 2018-10-23T12:14:58Z

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uncaught RangeError: Cannot calculate the height of whitespace. #2

Uncaught RangeError: Cannot calculate the height of whitespace. #2

humanjpg commented Aug 14, 2018

humanjpg commented Aug 16, 2018 •

edited

Loading

sebdesign commented Aug 16, 2018

humanjpg commented Aug 16, 2018

sebdesign commented Aug 16, 2018

humanjpg commented Aug 19, 2018

sebdesign commented Aug 19, 2018

humanjpg commented Aug 20, 2018

skjnldsv commented Oct 23, 2018

Uncaught RangeError: Cannot calculate the height of whitespace. #2

Uncaught RangeError: Cannot calculate the height of whitespace. #2

Comments

humanjpg commented Aug 14, 2018

humanjpg commented Aug 16, 2018 • edited Loading

sebdesign commented Aug 16, 2018

humanjpg commented Aug 16, 2018

sebdesign commented Aug 16, 2018

humanjpg commented Aug 19, 2018

sebdesign commented Aug 19, 2018

humanjpg commented Aug 20, 2018

skjnldsv commented Oct 23, 2018

humanjpg commented Aug 16, 2018 •

edited

Loading