Utilizo la fuente Courier New para mostrar los 10 mejores puntajes obtenidos en mi sitio web de juegos de arcade de un solo propósito (vea la captura de pantalla adjunta ). Los alias de los jugadores en caracteres latinos y cirílicos extendidos se alinean perfectamente, pero alguien decidió ingresar un apodo en caracteres asiáticos (parece ser chino), y mi código JS (TS) no lo maneja correctamente, por lo que las columnas que siguen al nombre del jugador se vuelven desplazado. ¿Alguien sabe cuál es la mejor manera de manejar esto? He estado pensando en dejarlo solo debido a su importancia cuestionable, pero todavía tengo curiosidad. He examinado este artículo y no parece ser directamente pertinente al problema descrito.

Editado para el código de abajo.

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">TOP 10 SCORE 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>

La clase dashRed se utiliza para mostrar la puntuación al jugador que acaba de terminar el juego y logró entrar en la lista de las 10 mejores puntuaciones. Las puntuaciones más antiguas se muestran en azul. Las líneas de código HTML con id 'p1' a 'p10' se reemplazan dinámicamente con datos de window.sessionStorage por código JavaScript.