Why the result of printing out the not-letter chars to console is different from to applets

[Esmaeil Ashrafi]

Hi dear friends;
Once upon a time i wrote a program just to being trained with complicated loops.I write it perfect and the question i am asking is not a real problem, however i like to discuss about that with you professionals and would be very happy if find a good explanation (even a small one )
I will paste two program code that do the same and are almost same, except that one is uses a JApplet (no matter if an Applet) and another uses standard output to print the result.
Please, don't be angry if understanding the code would be difficult (it is also difficult to me now ), because it's not the matter and you can see the results from images i attached.

The programs:

  public class StarsPrinter {
    
    private static final int F=17;  // Fit width ( number of lines )
    private static final int H=F/2; // half of the fit(for 2 right-hand graphs)
    private static final int S=5;   // Space width between graphs
/** this method prints the last 2 graphs top and buttom,simply as raw stars
 */
    private static void line(){
        for(int a=1;a<=2;a++)
        {
            for(int b=1;b<=F;b++)
                System.out.print("*");
            space();
}
    }
/** prints the spaces between graph
 */
    private static void space(){
        for(int a=1;a<=S;a++)
            System.out.print(" ");
    }
         
  public static void main(String[] args) {
int i,j,k;
for(i=1;i<=F;i++){     // variable "i" stores the line number for F lines :
            for(j=1;j<i;j++)
                    System.out.print(" ");
            for(k=F;k>=i;k--)
                System.out.print("*");
            space();                    // go to next graph
            for(j=F;j>=i;j--)
                    System.out.print("*");
            for(k=1;k<i;k++)
                System.out.print(" ");
        space();
        /*
         * the third graph
         */
        if(i==1 || i==F)  // top and buttom of the diagram
            line();
        else {
            if(i<=H)    // i < H : i<half of the x-the third graph
        {
            for(j=1; j<i; j++)  
                System.out.print(" ");
            System.out.print("*");
            for(j=1;j<=F-(2*i);j++)
                System.out.print(" ");
            System.out.print("*");
            for(j=1;j<i;j++)
                System.out.print(" ");
        }
        else                         // the stateat at the Half of graph :
        {
            if ( i==H+1 && F%2==1 ){ // if the width is odd (for just the middle) :
                for(j=1;j<=H;j++)   System.out.print(" ");
                          System.out.print("*");
                for(j=1;j<=H;j++)   System.out.print(" ");
            }
            else {                  
                for(j=F;j>i;j--)       System.out.print(" ");
                System.out.print("*");
 /*  for(j=1;j<=2*(i-1)-F;j++)    اینم درسته */
                for( j= F%2==1 ? 3 : 2 ; j < 2*(i-H); j++)
                    System.out.print(" ");
                System.out.print("*");
                for(j=F;j>i;j--)       System.out.print(" ");
            }
        }
        space();
        // last graph :
       for(j=F;j>i;j--)      System.out.print(" ");
           System.out.print("*");
        for(j=1;j<=i-1;j++)   System.out.print(" "); 
        } // outer else
        System.out.println();                      // go to next line
}
}
}  

this one uses console output and does perfect in formatting

second one:

 
import javax.swing.JApplet;
import javax.swing.JTextArea;

public class StarsPrinter extends JApplet {

    private static final int F=17;  // Fit width ( number of lines )
    private static final int H=F/2; // half of the fit(for 2 right-hand graphs)
    private static final int S=5;   // Space width between graphs
    JTextArea textArea;

    
    public void init() {
        textArea = new JTextArea();
        this.getContentPane().add(textArea);
        int i, j, k;
        for (i = 1; i <= F; i++) {     // variable "i" stores the line number for F lines :
            for (j = 1; j < i; j++) {
                textArea.append(" ");
            }
            for (k = F; k >= i; k--) {
                textArea.append("*");
            }
            space();                    // go to next graph
            for (j = F; j >= i; j--) {
                textArea.append("*");
            }
            for (k = 1; k < i; k++) {
                textArea.append(" ");
            }
            space();
            /*
             * the third graph
             */
            if (i == 1 || i == F) // top and buttom of the diagram
            {
                line();
            } else {
                if (i <= H) // i < H : i<half of the x-the third graph
                {
                    for (j = 1; j < i; j++) {
                        textArea.append(" ");
                    }
                    textArea.append("*");
                    for (j = 1; j <= F - (2 * i); j++) {
                        textArea.append(" ");
                    }
                    textArea.append("*");
                    for (j = 1; j < i; j++) {
                        textArea.append(" ");
                    }
                } else // the stateat at the Half of graph :
                {
                    if (i == H + 1 && F % 2 == 1) { // if the width is odd (for just the middle) :
                        for (j = 1; j <= H; j++) {
                            textArea.append(" ");
                        }
                        textArea.append("*");
                        for (j = 1; j <= H; j++) {
                            textArea.append(" ");
                        }
                    } else {
                        for (j = F; j > i; j--) {
                            textArea.append(" ");
                        }
                        textArea.append("*");
                        /*  for(j=1;j<=2*(i-1)-F;j++)    اینم درسته */
                        for (j = F % 2 == 1 ? 3 : 2; j < 2 * (i - H); j++) {
                            textArea.append(" ");
                        }
                        textArea.append("*");
                        for (j = F; j > i; j--) {
                            textArea.append(" ");
                        }
                    }
                }
                space();
                // last graph :
                for (j = F; j > i; j--) {
                    textArea.append(" ");
                }
                textArea.append("*");
                for (j = 1; j <= i - 1; j++) {
                    textArea.append(" ");
                }
            } // outer else
            textArea.append("\n");                      // go to next line
        }
    }

   private void space(){
        for(int a=1;a<=S;a++)
            textArea.append(" ");
    }
   
    private void line(){
        for(int a=1;a<=2;a++)
        {
            for(int b=1;b<=F;b++)
                textArea.append("*");
            space();
}
    }
}  

this one can not align well !

Thanks for your care and have a brilliant day

[Ulf Dittmer]

Consoles almost always use monospaced fonts (where the space and the asterisk have the same width), while the default GUI font is a proportional font (where they do not). Have the applet use a monospaced font such as Courier, and it'll work.

[Esmaeil Ashrafi]

W0W

that was great, the best, fastest, simplest, most perfect answer i ever got !

that worked just as you said,thank you very much