<h1>Power Apps width formulas for Segoe UI</h1>
<p>Inspired by this <a href="https://www.reddit.com/r/PowerApps/comments/yci4vl/formula_created_for_dynamic_width_label_or_any/?rdt=54535">Reddit post</a>.</p>
<details open>
<summary>
Table with sizes
</summary>
<table>
<thead>
<tr>
<th>Character</th>
</tr>
</thead>
<tbody>
<tr>
<td><span>a</span></td>
</tr>
<tr>
<td><span>b</span></td>
</tr>
<tr>
<td><span>c</span></td>
</tr>
<tr>
<td><span>d</span></td>
</tr>
<tr>
<td><span>e</span></td>
</tr>
<tr>
<td><span>f</span></td>
</tr>
<tr>
<td><span>g</span></td>
</tr>
<tr>
<td><span>h</span></td>
</tr>
<tr>
<td><span>i</span></td>
</tr>
<tr>
<td><span>j</span></td>
</tr>
<tr>
<td><span>k</span></td>
</tr>
<tr>
<td><span>l</span></td>
</tr>
<tr>
<td><span>m</span></td>
</tr>
<tr>
<td><span>n</span></td>
</tr>
<tr>
<td><span>o</span></td>
</tr>
<tr>
<td><span>p</span></td>
</tr>
<tr>
<td><span>q</span></td>
</tr>
<tr>
<td><span>r</span></td>
</tr>
<tr>
<td><span>s</span></td>
</tr>
<tr>
<td><span>t</span></td>
</tr>
<tr>
<td><span>u</span></td>
</tr>
<tr>
<td><span>v</span></td>
</tr>
<tr>
<td><span>q</span></td>
</tr>
<tr>
<td><span>w</span></td>
</tr>
<tr>
<td><span>x</span></td>
</tr>
<tr>
<td><span>y</span></td>
</tr>
<tr>
<td><span>z</span></td>
</tr>
<tr>
<td><span>A</span></td>
</tr>
<tr>
<td><span>B</span></td>
</tr>
<tr>
<td><span>C</span></td>
</tr>
<tr>
<td><span>D</span></td>
</tr>
<tr>
<td><span>E</span></td>
</tr>
<tr>
<td><span>F</span></td>
</tr>
<tr>
<td><span>G</span></td>
</tr>
<tr>
<td><span>H</span></td>
</tr>
<tr>
<td><span>I</span></td>
</tr>
<tr>
<td><span>J</span></td>
</tr>
<tr>
<td><span>K</span></td>
</tr>
<tr>
<td><span>L</span></td>
</tr>
<tr>
<td><span>M</span></td>
</tr>
<tr>
<td><span>N</span></td>
</tr>
<tr>
<td><span>O</span></td>
</tr>
<tr>
<td><span>P</span></td>
</tr>
<tr>
<td><span>Q</span></td>
</tr>
<tr>
<td><span>R</span></td>
</tr>
<tr>
<td><span>S</span></td>
</tr>
<tr>
<td><span>T</span></td>
</tr>
<tr>
<td><span>U</span></td>
</tr>
<tr>
<td><span>V</span></td>
</tr>
<tr>
<td><span>W</span></td>
</tr>
<tr>
<td><span>Q</span></td>
</tr>
<tr>
<td><span>X</span></td>
</tr>
<tr>
<td><span>Y</span></td>
</tr>
<tr>
<td><span>Z</span></td>
</tr>
<tr>
<td><span>1</span></td>
</tr>
<tr>
<td><span>2</span></td>
</tr>
<tr>
<td><span>3</span></td>
</tr>
<tr>
<td><span>4</span></td>
</tr>
<tr>
<td><span>5</span></td>
</tr>
<tr>
<td><span>6</span></td>
</tr>
<tr>
<td><span>7</span></td>
</tr>
<tr>
<td><span>8</span></td>
</tr>
<tr>
<td><span>9</span></td>
</tr>
<tr>
<td><span>0</span></td>
</tr>
<tr>
<td><span>-</span></td>
</tr>
<tr>
<td><span>=</span></td>
</tr>
<tr>
<td><span>!</span></td>
</tr>
<tr>
<td><span>@</span></td>
</tr>
<tr>
<td><span>#</span></td>
</tr>
<tr>
<td><span>$</span></td>
</tr>
<tr>
<td><span>%</span></td>
</tr>
<tr>
<td><span>^</span></td>
</tr>
<tr>
<td><span>&</span></td>
</tr>
<tr>
<td><span>*</span></td>
</tr>
<tr>
<td><span>(</span></td>
</tr>
<tr>
<td><span>)</span></td>
</tr>
<tr>
<td><span>_</span></td>
</tr>
<tr>
<td><span>+</span></td>
</tr>
<tr>
<td><span>[</span></td>
</tr>
<tr>
<td><span>]</span></td>
</tr>
<tr>
<td><span>\</span></td>
</tr>
<tr>
<td><span>{</span></td>
</tr>
<tr>
<td><span>}</span></td>
</tr>
<tr>
<td><span>|</span></td>
</tr>
<tr>
<td><span>;</span></td>
</tr>
<tr>
<td><span>'</span></td>
</tr>
<tr>
<td><span>:</span></td>
</tr>
<tr>
<td><span>"</span></td>
</tr>
<tr>
<td><span>,</span></td>
</tr>
<tr>
<td><span>.</span></td>
</tr>
<tr>
<td><span>/</span></td>
</tr>
<tr>
<td><span>></span>
</td>
</tr>
<tr>
<td><span><</span></td>
</tr>
<tr>
<td><span>?</span></td>
</tr>
<tr>
<td><span>}</span></td>
</tr>
<tr>
<td><span> </span></td>
</tr>
</tbody>
</table>
</details>body {
font-family: 'Segoe UI';
}
details {
margin-block: 1rem;
}const weights = ['normal', '600', 'bold'];
const sizes = [12, 14, 16];
const template = (_characters, size) => {
const characters = _characters.map((c) => {
if (`.,':;@%&#~$+=-<>^*()[]|?/`.split('').includes(c)) {
return `\\${c}`;
}
if (c === '"') return '""';
return c;
});
return `CountRows(MatchAll(Self.Text, "[${characters.join(
""
)}]")) * ${size}`;
};
weights.forEach((weight) => {
sizes.forEach((size) => {
const map = {};
document.body.style = `font-size: ${size}px; font-weight: ${weight};`;
const th = document.createElement("th");
th.innerHTML = `${size}px / ${weight}`;
document.querySelector("thead tr").appendChild(th);
const spans = document.querySelectorAll("td span");
spans.forEach((span) => {
const width = span.offsetWidth;
if (!map[width]) map[width] = [];
map[width].push(span.innerText);
const td = document.createElement("td");
td.innerHTML = width;
span.parentElement.parentElement.appendChild(td);
});
console.log(map);
const details = document.createElement("details");
const summary = document.createElement("summary");
summary.innerHTML = `${size}px / ${weight}`;
details.appendChild(summary);
const formula = document.createElement("pre");
formula.innerHTML = Object.keys(map).reduce(
(a, v, i, arr) =>
`${a}${template(map[v], v)} +\n`,
""
);
formula.innerHTML += `Len(Self.Text) * 0.25`;
details.appendChild(formula);
document.body.appendChild(details);
});
});
document.body.style = ``;
document.querySelector("details").open = false;
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.