2b:null 2c:["$","title",null,{"children":"Highlight line-height padding calculator | Grant Custer | Observable"}] 31:[] 2f:{"id":"aaba12279ff3c332","slug":"highlight-line-height-padding-calculator","title":"Highlight line-height padding calculator","thumbnail":"0d9e0993e564b16ee17f2dc9869c6d2d0fe3ba0343ebe8aca7fe725041fb681f","access_level":"public","create_time":"$D2018-03-19T14:56:30.344Z","update_time":"$D2018-03-19T15:53:29.685Z","view_time":null,"first_public_time":"$D2018-03-19T15:51:15.096Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"bf2c1edd2a33aa1b","login":"grantcuster","name":"Grant Custer","avatar_url":"https://avatars-next.observableusercontent.com/10eebb9a620b6b833738fb495f94fb682bcdc3270b247a9a8aef575ed0702c48","tier":"starter_2024"},"version":60,"publish_version":60,"role":null,"authored":false,"authors":[{"type":"individual","id":"a1f8c368ee3d80be","login":"grantcuster","name":"Grant Custer","avatar_url":"https://avatars-next.observableusercontent.com/10eebb9a620b6b833738fb495f94fb682bcdc3270b247a9a8aef575ed0702c48","tier":null}],"members":[{"type":"individual","id":"a1f8c368ee3d80be","login":"grantcuster","name":"Grant Custer","avatar_url":"https://avatars-next.observableusercontent.com/10eebb9a620b6b833738fb495f94fb682bcdc3270b247a9a8aef575ed0702c48","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"viewof font_family = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"viewof line_height = DOM.range(1,2,0.05)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"md`line_height: ${line_height}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"normal = html`${createBlock(font_size, 'normal', short_text)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"with_line_height = html`${createBlock(font_size, line_height, short_text)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"font_size = 20","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"mutable lh_normal_height = normal.getBoundingClientRect().height","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"mutable lh_height = with_line_height.getBoundingClientRect().height","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"md`__padding: ${(lh_height - lh_normal_height)/2/font_size}em 0;__`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"function createBlock(font_size, line_height, text, padding) {\n return `

${text}

`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"short_text = \"Lorem ipsum\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"