GithubHelp home page GithubHelp logo

Comments (8)

humanjpg avatar humanjpg commented on July 20, 2024 1

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

from cap-height.

humanjpg avatar humanjpg commented on July 20, 2024

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

from cap-height.

sebdesign avatar sebdesign commented on July 20, 2024

Hello,

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

from cap-height.

humanjpg avatar humanjpg commented on July 20, 2024

Thanks, Sebastién! Much appreciated.

from cap-height.

sebdesign avatar sebdesign commented on July 20, 2024

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.

from cap-height.

humanjpg avatar humanjpg commented on July 20, 2024

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!

from cap-height.

sebdesign avatar sebdesign commented on July 20, 2024

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!

from cap-height.

skjnldsv avatar skjnldsv commented on July 20, 2024

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

from cap-height.

Related Issues (2)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.