Making "*" und Leerzeichen die gleiche Größe

Question

Ich bereite ein kleines Projekt für Menschen vor, die neu zu entwickeln sind. Es enthält etwas HTML-Zeug, wo sie einige Formen wie Rechtecke oder Dreiecke mit Javascript machen sollten. Die Formen sollen mit "*" "gezeichnet" werden. Da ich das   Element und einige einfach zu und if-Konstrukte einführen werde, möchte ich ihnen ein Rechteck erstellen, die wie folgt aussieht:

* * * * 
* * * 
* * * * 
* * * 
* * * * 

in einer anderen Größe.

ich ein Code suchen, wie diese sich vorstellen kann:

for (j = 0; j < 10; j++) { 
 
    for (i = 1; i <= 20; i++) { 
 
    if (j % 2 == 1) { 
 
     if (i % 2 == 1) { 
 
     document.write("*"); 
 
     } else { 
 
     document.write("&nbsp;"); 
 
     } 
 
    } else { 
 
     if (i % 2 != 1) { 
 
     document.write("*"); 
 
     } else { 
 
     document.write("&nbsp;"); 
 
     } 
 
    } 
 
    } 
 
    document.write("<br/>"); 
 
}

Da ich gerade habe ausprobiert, ich frage mich, dass der "*" in HTML und der Raum tut nicht die gleiche Größe haben. Jetzt suche ich nach dem Befehl, um es gleich groß zu machen (da ich weiß, dass es eins gibt), aber ich kann es nicht finden.

Answer 1

Es ist überhaupt kein Javascript-Problem.

Sie müssen monospace Fonts verwenden. Grundsätzlich hat diese Schriftgruppe für jedes Zeichen dieselbe Pixelbreite.

Lesen Sie mehr über sich hier: https://en.wikipedia.org/wiki/Monospaced_font

Answer 2

die Sie interessieren,

for (j = 0; j < 10; j++) { 
 
     for (i = 1; i <= 20; i++) { 
 
      if (j % 2 == 1) { 
 
       if (i % 2 == 1) { 
 
        document.write("*"); 
 
       } else { 
 
        document.write("<span class='space'></span>"); 
 
       } 
 
      } else { 
 
       if (i % 2 != 1) { 
 
        document.write("*"); 
 
       } else { 
 
        document.write("<span class='space'></span>"); 
 
       } 
 
      } 
 
     } 
 
     document.write("<br/>");}

.space { 
 
margin-left: 10px; // change this as you require 
 
}