31:[] 2f:{"title":"Highlight line-height padding calculator","cells":[{"id":0,"value":"md`# Highlight line-height padding calculator\n\nThis is broken out from [this longer notebook](https://beta.observablehq.com/@grantcuster/covering-the-entire-line-height-of-a-span-element-with-a-back). You can use it to calculate how much padding you'll need to add to cover the entire line-height of a font with a background color. The number varies for different fonts.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"viewof font_family = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"viewof line_height = DOM.range(1,2,0.05)","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"md`line_height: ${line_height}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"normal = html`${createBlock(font_size, 'normal', short_text)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"with_line_height = html`${createBlock(font_size, line_height, short_text)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"font_size = 20","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"mutable lh_normal_height = normal.getBoundingClientRect().height","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"mutable lh_height = with_line_height.getBoundingClientRect().height","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"md`__padding: ${(lh_height - lh_normal_height)/2/font_size}em 0;__`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"function createBlock(font_size, line_height, text, padding) {\n return `

${text}

`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"short_text = \"Lorem ipsum\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}