Calculating path length of test

Question

I am trying to solve a problem where i need to know the length of the path of the text typed by the user. Example a user Types "Hello World" i need to check what will be the length of the path of Hello world when typed in a certain font with a certain font size(in pt).

The length that i will get i need to convert it into meters to i can use it in real world to build the Neon.

How should i approach the problem are there any libraries that can help me do this?

Thanks

Answer 1

I don't have any specific libraries to recommend, but here is a snippet of how you might go about doing what you want. The conversion from pixels to centimeters is approximate here, it's just a demo after all.

const getRuler = element => {
  const ctx = document.createElement('canvas').getContext('2d');
  const style = window.getComputedStyle(element);
  const fontSize = style.getPropertyValue('font-size');
  const fontFamily = style.getPropertyValue('font-family');
  ctx.font = `${fontSize} ${fontFamily}`;
  return ctx;
}

const element = document.querySelector('#my-element-with-text');

function updateLength(e) {
  const element = e.target
  const text = element.innerText;
  const ruler = getRuler(element);
  const length = ruler.measureText(text).width;

  const result = document.querySelector('#length');

  result.innerText = (length * 0.026458).toFixed(4) + ' centimeters';
}

element.addEventListener('keyup', updateLength);

body {
  height: 100%;
  width: 100%;
  margin: 0;
}

main {
  margin-top: 15vh;
  margin-left: 10vw;
  width: 85%;
}

#my-element-with-text {
  border: 1px solid black;
  border-radius: 3px;
  height: 2em;
  font-size: 5vw;
  width: fit-content;
  min-width: 200px;
  line-height: 2em;
  padding: 0 12px;
  font-family: 'Helvetica Neue', sans-serif;
}

<main>
  <div>Enter text here</div>
  <div id='my-element-with-text' contenteditable='true'></div>
  <div id='length'></div>
</main>

Answer 2

This is a multistep process, and for now I don't have all the answers.

1. Load the font to use as a webfont. Normally, this means you go to a provider like Google fonts and get a link to a stylesheet that will do the work for you, including deciding which font format your browser will understand. But in this case, you need the full address of the final font file. If you provide the font file on your own server, this would be trivial.

2. Since you ultimately need the file content itself, the best strategy is probably to load the font file via an AJAX request and then both insert it into the document font resources and to load it also into a special parser that gives access to the font outline data. This could be opentype.js - note it is a major piece of software with 162kB minified. As soon as the font is loaded, you can start to look for the text you want to measure:

    window.fetch(fontUrl).then(response => {
        // read response into an ArrayBuffer
        return response.arrayBuffer();
    }).then(buffer => {
        // load into parser
        const parsedFont = opentype.parse(buffer);
        // load into browser resources, family is the name for CSS reference
        const fontFace = new FontFace(family, buffer);
        document.fonts.add(fontFace);
        // add an event listener to your text input
        document.querySelector('#textToMeasure').addEventListener('change', event => {
            textToOutline(parsedFont, event.target.value);
        });
    });
   

3. Each time the text input changes, you now render that text to an SVG path. For that, you need to have an (invisible) SVG snippet in your page:

    <svg width="0px" height="0px"><path id="outlinePath" d="" /></svg>
   

   You get the path data by providing the text and the font size to the font object and then set them for your SVG <path>:

    function textToOutline (font, text) {
        // size means font size in pixels
        const pathData = font.getPath(text, 0, 0, size).toPathData(4);
        // write to path
        const path = document.querySelector('#outlinePath');
        path.setAttribute('d', pathData);
   
        measureOutline(path);
    }
   

4. Now the text outline is in a format that the browser can measure with its own API.

    function measureOutline (path) {
        // length in pixels
        const pathLength = path.getTotalLength();
        // factor would be the conversion factor to your intended unit,
        // and unit the unit name
        document.querySelector('#lengthResult').innerText = (pathLength * factor) + unit;
    }