0

I use Courier New font to display top 10 scores achieved on my single purpose arcade game website (see the attached screenshot enter image description here). 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.

bigbikefan
  • 13
  • 3
  • Have you tried styling your table with CSS rules to control column layout etc? – Pointy Jan 19 '22 at 18:16
  • The Courier New font is part of the set CSS layout, as well as the font size, font weight, margin, padding, color, display type. As I am not a professional web developer, but an interested party, there is a chance I could be missing something in the CSS file for that, and I don't know what it is. – bigbikefan Jan 19 '22 at 18:38
  • Well you can control width and height of elements on your page. It's kind-of a big subject and exactly what you'd do depends on what your HTML looks like. – Pointy Jan 19 '22 at 18:51
  • Guess, the easiest way is to point to my website, where all the code is available, but I'm afraid that would be considered as an unsolicited advertisement by the stackoverflow.com, and I might get banned for that. – bigbikefan Jan 19 '22 at 19:08
  • Well the alternative is to select representative portions of your HTML and CSS, and post it here; that's what this site is all about and in general that's the very strongly preferred way of doing things. – Pointy Jan 19 '22 at 19:13
  • Updated the question as suggested. Thank you. – bigbikefan Jan 19 '22 at 20:33

0 Answers0