31:[] 2f:{"title":"Character Width Estimations","cells":[{"id":0,"value":"# Character Width Estimations\n\nThis notebook contains utility methods allowing to estimate text width in pixels.\nThere are two types of estimation: the first one is based on a span element measuring text characters, another one uses canvas elements and the \"measureText\" method defined on 2D canvas contexts.\n","pinned":false,"hidden":false,"mode":"md"},{"id":368,"value":"The next cell shows text div blocks with the gray background. This gray box visualizes the real space occupated by the text in DOM. The red border visualizes the calculated size for the same text.","pinned":false,"hidden":false,"mode":"md"},{"id":359,"value":"htl.html`

Span-based Size Estimation

${spanBasedSize.join(\" : \")}

\n ${renderText({\n text: testText,\n ...estimatorsConfig,\n fontSize,\n width: spanBasedSize[0],\n height: spanBasedSize[1]\n })}\n

\n Canvas-based Size Estimation\n

${canvasBasedSize.join(\" : \")}

\n ${renderText({\n text: testText,\n ...estimatorsConfig,\n fontSize,\n width: canvasBasedSize[0],\n height: canvasBasedSize[1]\n })}\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"viewof estimatorsConfig = Inputs.form({\n fontFamily: Inputs.select(\n [\"Arial\", \"Times New Roman\", ...getFontParams().fontFamily.split(\",\")],\n {\n value: \"Arial\",\n label: \"Font Family\"\n }\n ),\n fontWeight: Inputs.radio([\"normal\", \"bold\"], {\n label: \"Font Weight\",\n value: \"normal\"\n })\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":285,"value":"viewof fontSize = Inputs.range([5, 52], {\n label: \"Text Size (px)\",\n step: 1,\n value: 22\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":296,"value":"viewof testText = Inputs.text({\n value: \"Hello, world\",\n label: \"Text to measure\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":304,"value":"function renderText({ text, fontWeight, fontSize, fontFamily, width, height }) {\n return htl.html`

${text}

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"value":"spanBasedSize = spanBasedEstimator(testText, fontSize)","pinned":true,"hidden":false,"mode":"ojs"},{"id":87,"value":"canvasBasedEstimator = newTextSizeEstimator(\n buildCanvasBasedCharSizeEstimator(estimatorsConfig)\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":80,"value":"spanBasedEstimator = newTextSizeEstimator(\n await buildSpanBasedCharSizeEstimator(estimatorsConfig)\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":29,"value":"canvasBasedSize = canvasBasedEstimator(testText, fontSize)","pinned":true,"hidden":false,"mode":"ojs"},{"id":154,"value":"## Text Size Estimators","pinned":false,"hidden":false,"mode":"md"},{"id":164,"value":"function newTextSizeEstimator(measureCharWidth, baseTextSize) {\n baseTextSize = baseTextSize || measureCharWidth.size;\n const table = buildTextWidthEstimatorTable(measureCharWidth);\n const estimate = newTableBasedCharWidthEstimator(table);\n return _newTextSizeEstimator(estimate, baseTextSize);\n\n function _newTextSizeEstimator(measureCharWidth, baseTextSize) {\n const index = {};\n return (str, size = baseTextSize) => {\n let width = str.split(\"\").reduce((w, ch) => {\n let width = index[ch];\n if (!width) {\n width = index[ch] = measureCharWidth(ch);\n }\n return width + w;\n }, 0);\n if (size !== baseTextSize) {\n width *= size / baseTextSize;\n }\n return [width, size];\n };\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":224,"value":"function newTableBasedCharWidthEstimator(table) {\n let count = 0;\n let sum = 0;\n for( let i =0; i < table.length; i++) {\n if (table[i] > 0) {\n sum += table[i];\n count++;\n }\n }\n const avg = count > 0 ? sum / count : 0;\n return (ch) => {\n const code = ch.charCodeAt(0);\n return (code < table.length) ? table[code] : avg;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":180,"value":"// See https://jrgraphix.net/r/Unicode/\nfunction buildTextWidthEstimatorTable(measureCharWidth, count = 0x20cf) {\n const table = new Float32Array(count);\n for (let i = 0; i < table.length; i++) {\n const ch = String.fromCharCode(i);\n table[i] = measureCharWidth(ch);\n }\n return table;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":26,"value":"function buildCanvasBasedCharSizeEstimator({\n fontSize = \"16px\",\n fontFamily = \"Arial\",\n fontWeight = \"normal\"\n}) {\n const canvas = document.createElement(\"canvas\");\n const size = parseFontSize(fontSize);\n canvas.width = size * 10;\n canvas.height = size * 2;\n const fontSpec = [fontWeight, fontSize, fontFamily];\n const ctx = canvas.getContext(\"2d\");\n ctx.font = fontSpec.join(\" \");\n\n const fontHeight = parseFontSize(fontSize);\n const index = {};\n function measureCharWidth(ch) {\n return (index[ch] = index[ch] || ctx.measureText(ch).width);\n }\n return Object.assign(measureCharWidth, {\n size,\n // Do nothing. This method is added to be compatible with span-based chars estimators\n cleanup: () => {}\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":182,"value":"async function buildSpanBasedCharSizeEstimator({\n fontSize = \"10px\",\n fontFamily = \"Arial\",\n fontWeight = \"normal\"\n} = {}) {\n const span = document.createElement(\"span\");\n Object.assign(span.style, {\n display: \"block\",\n whiteSpace: \"pre\",\n position: \"fixed\",\n top: -1000,\n left: -1000,\n opacity: 0,\n padding: \"0\",\n marging: \"0\",\n fontSize,\n fontFamily,\n fontWeight\n });\n document.body.appendChild(span);\n\n const index = {};\n function measureCharWidth(ch) {\n let width = index[ch];\n if (!width) {\n span.innerText = ch;\n width = span.getBoundingClientRect().width;\n // width = span.clientWidth;\n index[ch] = width;\n }\n return width;\n }\n await new Promise((y) => requestAnimationFrame(y));\n let cleanup = () => {\n cleanup = () => {};\n span.parentElement && span.parentElement.removeChild(span);\n };\n return Object.assign(measureCharWidth, {\n size: parseFontSize(fontSize),\n cleanup: () => cleanup()\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":233,"value":"### Font-Related Utils","pinned":false,"hidden":false,"mode":"md"},{"id":111,"value":"function getFontParams(el = document.body) {\n const fontWeight = getCssStyle(el, \"font-weight\") || \"normal\";\n const fontSize = getCssStyle(el, \"font-size\") || \"16px\";\n const fontFamily = getCssStyle(el, \"font-family\") || \"Times New Roman\";\n return {\n fontSize,\n fontFamily,\n fontWeight\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":113,"value":"function getCssStyle(element, prop) {\n return window.getComputedStyle(element, null).getPropertyValue(prop);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":122,"value":"function parseFontSize(fontSize, defaultFontSize = 16) {\n let size = 16,\n unit = \"px\";\n (\"\" + fontSize).replace(\n /([\\d\\.]+)(.*)$/,\n (_, s, u) => ((size = s), (unit = u), \"\")\n );\n size = parseFloat(size);\n if (unit === \"em\" || unit === \"rem\") {\n size *= defaultFontSize;\n }\n return size;\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}