Skip to content

Instantly share code, notes, and snippets.

@swashcap

swashcap/measure-letter-spacing.js

Created March 30, 2018 17:45
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save swashcap/cbcdb744232a372338d69cac3efdf238 to your computer and use it in GitHub Desktop.
Save swashcap/cbcdb744232a372338d69cac3efdf238 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
measure-letter-spacing.js
// Measure letter spacing on
// https://material-components-web.appspot.com/typography.html
Array.from(document.querySelectorAll('.demo-typography--section > *')).forEach((node) => {
const span = document.createElement('span')
const { fontSize, letterSpacing } = getComputedStyle(node)
const parsedFontSize = parseFloat(fontSize, 10) / 16
const parsedLetterSpacing = parseFloat(letterSpacing, 10) / 16
span.innerHTML = `<span style="background:#efefef;border-radius:2px;display:inline-block;font:12px/15px monospace;letter-spacing:normal;margin:0 0 4px 8px;padding:4px 8px;">
font-size: ${Number.isNaN(parsedFontSize) ? fontSize : `${Math.round(parsedFontSize * 1000) / 1000}rem`}<br />
letter-spacing: ${Number.isNaN(parsedLetterSpacing) ? letterSpacing : `${Math.round(parsedLetterSpacing * 1000) / 1000}rem`}</span>`
node.appendChild(span)
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment