const signs = [
['\u002d', 'hyphen-minus'],
['\u2010', 'hyphen'],
['\u2011', 'non-breaking hyphen'],
['\u2012', 'figure dash'],
['\u2013', 'en dash'],
['\u2014', 'em dash',],
['\u2015', 'horizontal bar'],
['\u2043', 'hyphen bullet'],
['\u2212', 'minus'],
['\u2e3a', 'two-em dash'],
['\u2e3b', 'three-em dash'],
];
const sentences = [
{
text: s => `value is ${s}1`,
expect: "minus",
good: '\u2212',
okay: '\u002d',
},
{
text: s => `Y equals 69X${s}420`,
expect: "minus",
good: '\u2212',
okay: '\u002d',
},
{
text: s => `document 69X${s}420`,
expect: "dash",
good: '\u2012',
},
{
text: s => `evaluate C${s}3PO and R2${s}D2 before repairing them`,
good: '\u2010\u2011',
okay: '\u002d',
},
{
text: s => `evaluate C${s}3PO and R2${s}D2 for PO = R2 = 5`,
expect: "minus",
good: '\u2212',
okay: '\u002d',
},
{
text: s => `values are: ${s} 1 ${s} 2 ${s} 3`,
good: '\u2043\u2015',
},
{
text: s => `QAnon${s}4chan connection`,
good: '\u2013',
},
{
text: s => `none${s}3dfx excluded`,
good: '\u2014',
okay: '\u2013\u2e3a\u2e3b',
},
];
document.addEventListener('click', ev => {
const button = ev.target.closest('button');
if (!button) return;
const { sentence } = button.dataset;
const msg = new SpeechSynthesisUtterance();
msg.voiceURI = 'native';
msg.volume = 1; // 0 to 1
msg.lang = 'en-US';
msg.text = sentence;
speechSynthesis.speak(msg);
});
const table = document.createElement('table');
const html = (pieces, ...values) =>
String.raw({ raw: pieces }, ...values.map(
s => s.replaceAll(
/[<"'&]/gu,
c => `&#${c.codePointAt(0)};`)));
const tr = document.createElement('tr');
tr.insertAdjacentHTML('afterbegin', html`
<th scope="col">phrase</th>
<th scope="col">reference</th>
`);
for (const [sign, name] of signs) {
tr.insertAdjacentHTML('beforeend', html`
<th scope="col">U+${
sign.codePointAt(0).toString(16).toUpperCase().padStart(4, '0')
} (${sign}):<br>${name}</th>
`);
}
table.appendChild(tr);
for (const { text, expect, good, okay } of sentences) {
const tr = document.createElement('tr');
tr.insertAdjacentHTML('beforeend', html`
<th scope="row">
${text(expect ? `[${expect}]` : good.charAt(0))}
<td>
<button
data-sentence="${text(` ${expect ?? ""} `)}"
class="ref">play</button>
`);
for (const [sign, name] of signs) {
tr.insertAdjacentHTML('beforeend', html`
<td>
<button
data-sentence="${text(sign)}"
class="${
(good ?? '').indexOf(sign) !== -1 ? 'good' :
(okay ?? '').indexOf(sign) !== -1 ? 'okay' :
''
}">play</button>
`);
}
table.appendChild(tr);
}
document.body.appendChild(table);
body { line-height: 200%; }
button { background: maroon; color: white; }
button.good { background: green; }
button.okay { background: olive; }
button.ref { background: gray; }
table { border-collapse: collapse; }
td, th { border: 1px solid gray; padding: 0.2em; }
th[scope="row"] { text-align: left; }
th[scope="col"] { vertical-align: top; }
td, th[scope="col"] { text-align: center; }
+
character to make it as narrow as the-
should work as well. Not so: the stem widths would be different.-10
is very clearly narrower than the+76
. Also, in most commonly used fonts, the digits are 'tabular lining', that is, they are all equal width, and the+
and minus are as well. The number of signs and the number of digits above and below are the same, so they should align. No need for monospaced text at all.