Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
// 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
You can’t perform that action at this time.