Skip to content

Instantly share code, notes, and snippets.

@aminnj

aminnj/character_widths.html

Last active November 22, 2018 00:07
Show Gist options
  • Save aminnj/9edade379745d9f06d8b165eaf7dee4c to your computer and use it in GitHub Desktop.
Save aminnj/9edade379745d9f06d8b165eaf7dee4c to your computer and use it in GitHub Desktop.
Download ZIP
javascript to measure character widths in semi-hacky way
Raw
character_widths.html
<html>
<head>
<style>
body {
font: small/1.5 Arial,Helvetica,sans-serif;
letter-spacing: normal;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(function() {
var ntimes = 500;
for (var ic = 32; ic < 127; ic += 1) {
var ch = String.fromCharCode(ic);
if (ch == " ") {
ch = "&nbsp;";
}
$("#measure").html(ch.repeat(ntimes));
var pxperchar = 1.0*($("#measure").width())/ntimes;
console.log(pxperchar);
$("#list").append(`
<tr>
<td>${ic}</td>
<td>${ch}</td>
<td>${pxperchar}</td>
</tr>
`);
}
});
</script>
</head>
<div id="measure" style="display:none;"></div>
<br><br>
<div id="list"></div>
</html>
@aminnj
Copy link
Author

aminnj commented Nov 21, 2018 •
edited

Motivation: want to make script that wraps non-monospaced fonts so that they look "justified" in gmail emails, for example.

So I need a table of widths for arial characters, as seen through a browser. For ascii chars from 32 and 128, fill a div with 500 repeated instances of the character, measure the width, and then write out a table with this information. Repeating " " (space) does not actually fill a div, so replace it with &nbsp;

The body entry in the style tags matches what I got from inspect element from a gmail draft.

@aminnj
Copy link
Author

aminnj commented Nov 22, 2018

Result is

d_widths = {
" ": 3.612,
"!": 3.612,
'"': 4.614,
"#": 7.23,
"$": 7.23,
"%": 11.56,
"&": 8.67,
"'": 2.482,
"(": 4.33,
")": 4.33,
"*": 5.06,
"+": 7.592,
",": 3.612,
"-": 3.038,
".": 3.612,
"/": 3.612,
"0": 7.23,
"1": 6.268,
"2": 7.23,
"3": 7.23,
"4": 7.23,
"5": 7.23,
"6": 7.23,
"7": 7.23,
"8": 7.23,
"9": 7.23,
":": 3.612,
";": 3.612,
"<": 7.592,
"=": 7.592,
">": 7.592,
"?": 7.23,
"@": 13.196,
"A": 8.67,
"B": 8.67,
"C": 9.388,
"D": 9.388,
"E": 8.67,
"F": 7.94,
"G": 10.112,
"H": 9.388,
"I": 3.612,
"J": 6.5,
"K": 8.67,
"L": 7.23,
"M": 10.83,
"N": 9.388,
"O": 10.112,
"P": 8.67,
"Q": 10.112,
"R": 9.388,
"S": 8.67,
"T": 7.94,
"U": 9.388,
"V": 8.67,
"W": 12.27,
"X": 8.67,
"Y": 8.67,
"Z": 7.94,
"[": 3.612,
"\\": 3.612,
"]": 3.612,
"^": 6.1,
"_": 7.23,
"`": 4.33,
"a": 7.23,
"b": 7.23,
"c": 6.5,
"d": 7.23,
"e": 7.23,
"f": 3.378,
"g": 7.23,
"h": 7.23,
"i": 2.888,
"j": 2.888,
"k": 6.5,
"l": 2.888,
"m": 10.83,
"n": 7.23,
"o": 7.23,
"p": 7.23,
"q": 7.23,
"r": 4.33,
"s": 6.5,
"t": 3.612,
"u": 7.23,
"v": 6.5,
"w": 9.388,
"x": 6.5,
"y": 6.5,
"z": 6.5,
"{": 4.342,
"|": 3.376,
"}": 4.342,
"~": 7.592,
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment