JSFiddle - React, Tailwind, and code Playground
HTML
<button>Start Calculation</button>
<p></p>
JavaScript
const p = document.querySelector('p');
document.querySelector('button').addEventListener('click', () => {
const chars = getSmallestChars();
console.log(chars);
p.textContent = 'Finished! Check Console!'
}, { once: true });
function getSmallestChars() {
const chars = [];
const min = { width: Infinity, height: Infinity };
for (let i = 0; i < 0xFFFF; i++) {
const char = String.fromCodePoint(i);
if (!isValidVariableName(char)) continue;
const { width, height } = getStrSize(char);
if (width > min.width || height > min.height) continue;
if (width < min.width && height < min.height) {
min.width = width;
min.height = height;
chars.length = 0;
}
chars.push(char);
}
return chars;
}
function isValidVariableName(str) {
try {
eval(`const ${str} = 42;`);
} catch(e) {
return false;
}
return true;
}
const cnvs = document.createElement('canvas');
const ctx = cnvs.getContext("2d");
function getStrSize(str) {
const textMetric = ctx.measureText(str);
const width = textMetric.actualBoundingBoxRight - textMetric.actualBoundingBoxLeft;
const height = textMetric.actualBoundingBoxAscent - textMetric.actualBoundingBoxDescent;
return {
width: Math.abs(width),
height: Math.abs(height)
};
}