2e:null 2f:["$","title",null,{"children":"Font Centering Tool | Jakub Hampl | Observable"}] 34:[{"id":"5884ac7be939c4ed74b4ce11c6216d93417df7377694ffc9102d5cd4e8ae66c0e1e14cde5e491ace38d8c9a1d9072bf778b509f9c7abbc048e9e63f92205d060","href":"https://static.observableusercontent.com/files/5884ac7be939c4ed74b4ce11c6216d93417df7377694ffc9102d5cd4e8ae66c0e1e14cde5e491ace38d8c9a1d9072bf778b509f9c7abbc048e9e63f92205d060","name":"Segoe UI.ttf","type":"font/ttf","lastModified":1713439086928.088,"size":34164}] 32:{"id":"855f18d5a4f046eb","slug":"font-centering-tool","title":"Font Centering Tool","thumbnail":"2bd567c20924e5bd1608c5cc8c4759c90afb263cb1abd3bec0d2e2396af6946f","access_level":"public","create_time":"$D2024-04-18T10:23:26.496Z","update_time":"$D2024-04-19T18:36:53.878Z","view_time":null,"first_public_time":"$D2024-04-18T11:21:18.381Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"a2f700b6ce27b844","login":"gampleman","name":"Jakub Hampl","avatar_url":"https://avatars-next.observableusercontent.com/6ee048ed02abfd79e76f2f9dd7c7e8658c47b116d846f2f9ca8814ecdde18ffc","tier":"starter_2024"},"version":169,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"34d15c3b1cc754ed","login":"gampleman","name":"Jakub Hampl","avatar_url":"https://avatars-next.observableusercontent.com/6ee048ed02abfd79e76f2f9dd7c7e8658c47b116d846f2f9ca8814ecdde18ffc","tier":null}],"members":[{"type":"individual","id":"34d15c3b1cc754ed","login":"gampleman","name":"Jakub Hampl","avatar_url":"https://avatars-next.observableusercontent.com/6ee048ed02abfd79e76f2f9dd7c7e8658c47b116d846f2f9ca8814ecdde18ffc","tier":null,"role":"editor"},{"type":"team","id":"a2f700b6ce27b844","login":"gampleman","name":"Jakub Hampl","avatar_url":"https://avatars-next.observableusercontent.com/6ee048ed02abfd79e76f2f9dd7c7e8658c47b116d846f2f9ca8814ecdde18ffc","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"7a8725a396b6ad22","slug":"utilities","title":"Utilities","owner":{"id":"a2f700b6ce27b844","login":"gampleman","name":"Jakub Hampl"}},"type":"notebook","body":{"title":"Font Centering Tool","cells":[{"id":0,"value":"# Font Centering Tool\n\nBased on [this article](https://tonsky.me/blog/centering/), where the author argues that most centered text online can be off because font metrics don't adequately balance the ascender and descender. So this tool computes extra padding to apply to text to correct for the imbalance.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"viewof fontFileInput = Inputs.file({ label: \"Upload your font\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"Or look at the default Segoe UI font.","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":19,"value":"### Font metrics\n\n\n \nMetric | Value | Value @ 30px Font Size\n-------|------:|----------------:\nAscender | ${font.ascender} | ${(font.ascender / font.unitsPerEm * 30).toFixed(2)}px\nDescender | ${font.descender} | ${(font.descender / font.unitsPerEm * 30).toFixed(2)}px\nsCapHeight | ${font.tables.os2.sCapHeight} | ${(font.tables.os2.sCapHeight / font.unitsPerEm * 30).toFixed(2)}px\nUnits Per Em | ${font.unitsPerEm} | 30px\nTop Extra | ${font.ascender - font.tables.os2.sCapHeight} | ${((font.ascender - font.tables.os2.sCapHeight) / font.unitsPerEm * 30).toFixed(2)}px\nBottom Extra | ${-font.descender} | ${(-font.descender / font.unitsPerEm * 30).toFixed(2)}px\nPadding | ${padding.toFixed(3)}em | ${(padding * 30).toFixed(2)}px\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":35,"value":"

820 ? 'display: flex; gap: 2rem; padding-bottom: 1rem' : ''}\">\n

Without correction

\n ${icon()}\nHello world!\n

With correction

\n ${icon()}\n 0 ? `padding-bottom: ${padding}em` : `padding-top: ${-padding}em`}; font-size: 30px; font-family: '${fontLoader.family}', Papyrus;\">Hello world!\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":111,"value":"You will see the above in Papyrus if something goes wrong in this notebook.\n\nThe code you will need to apply the correction looks like this:\n\n```css \n.centered-text {\n ${padding > 0 ? `padding-bottom: ${padding.toFixed(3)}em` : `padding-top: ${-padding.toFixed(3)}em`};\n}\n```\n\n----\n\n#### Appendix\n\nYou can see some of the stuff needed to make this notebook:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":150,"value":"This is the object OpenType.js gives back:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"font = opentype.parse(await fontFile.arrayBuffer())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"And this is what using `CanvasContext2d.measureText` gives back (the units here are different, these are CSS logical Pixels):","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":138,"value":"fontMetrics = {\n const ctx = DOM.context2d();\n\n ctx.font = \"30px \" + fontLoader.family;\n const metrics = ctx.measureText(\"Hello world!\");\n const val = [];\n for (const key in metrics) {\n val.push([key, metrics[key]]);\n }\n return Object.fromEntries(val);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"padding = ((font.ascender - font.tables.os2.sCapHeight) + font.descender) / font.unitsPerEm","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"icon = () => svg``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"fontLoader = {\n const fontFace = new FontFace(\n font.tables.name.fontFamily.en,\n await fontFile.arrayBuffer()\n );\n document.fonts.add(fontFace);\n return fontFace;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"opentype = require(\"opentype.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"fontFile = fontFileInput || FileAttachment(\"Segoe UI.ttf\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 33:"$32:body"