I use Courier New font to display top 10 scores achieved on my single purpose arcade game website (see the attached screenshot ). Player aliases in Latin and extended Cyrillic characters align perfectly, but someone decided to enter a nickname in Asian (looks to be Chinese) characters, and my JS (TS) code doesn't handle it properly, so the columns following the player's name get shifted. Anyone knows of the best way for handling this? I've been thinking of leaving it alone due to its questionable importance, but I'm still curious. I've examined this article, and it doesn't seem to be directly pertinent to the described issue.

Edited for the code below.

CSS:

.titleLabel {
margin-top: 7px;
margin-bottom: 20px;
font-family: 'Courier New', monospace;
font-weight: bold;
font-size: 30px;
text-align: center;
color: blue;}
.dash {
margin-left: 7px;
padding-bottom: 5px;
display: inline-block;
font-family: 'Courier New', monospace;
font-weight: bold;
font-size: 16px;
color: blue;}
.dashRed {
margin-left: 7px;
padding-bottom: 5px;
display: inline-block;
font-family: 'Courier New', monospace;
font-weight: bold;
font-size: 16px;
color: red;}
.dashSpace {
font-family: 'Courier New', monospace;
font-weight: bold;
font-size: 16px;
color: #f0f0f0;}

HTML:

<div>
<div class="titleLabel">T O P  10  S C O R E S</div>
<!-- headings -->
<span class="dash" id="p1"><span class="dashSpace">-----</span>1<span class="dashSpace">----</span>... Empty ...<span class="dashSpace">-----------------------------------------------------------------------------------</span></span>
<!-- p2... p9 -->
<span class="dash" id="p10"><span class="dashSpace">----</span>10<span class="dashSpace">----</span>... Empty ...<span class="dashSpace">-----------------------------------------------------------------------------------</span></span>

dashRed class is used for displaying the score to the player who just finished the game and managed to get into the top 10 score listing. Older scores get displayed in blue. HTML code lines with id 'p1' to 'p10' get dynamically replaced with data from window.sessionStorage by JavaScript code.