Vertical Text Align Question

Processing Coding Questions
1

Hello!

I am trying to Align my text: “QUIZ”, vertically, but the “I” and the text in general just looks bad, can somebody help me, to make it better?

void draw_quiz_text() {
  
  fill(184, 18, 18);
  textSize(150);
  stroke(0);
  textLeading(200);
  text(QUIZ, x6 + 50, y6 + 290);
  textSize(40);
  fill(0, 0, 200);
  
}

Hole Code:

int state = 0;

String QUIZ = "Q\nU\nI\nZ\n";

int x1=100, y1=100, w1=250, h1=250;   //Button oben links
int x2=1570, y2=100, w2=250, h2=250;   //Button oben rechts
int x3=100, y3=750, w3=250, h3=250;   //Button unten links
int x4=1570, y4=750, w4=250, h4=250;   //Button unten rechts


int x5=80, y5=910, w5=250, h5=100;   // Button zurück


int x6=860, y6=0, w6=200, h6=1080;    //Button Quiz

void drawMainButtons() { //_______ stat 0 only
  if ( over(x1, y1, w1, h1) ) stroke(200, 0, 0); 
  else stroke(0);
  rect(x1, y1, w1, h1);
  if ( over(x2, y2, w2, h2) ) stroke(200, 0, 0); 
  else stroke(0);
  rect(x2, y2, w2, h2);
  if ( over(x3, y3, w3, h3) ) stroke(200, 0, 0); 
  else stroke(0);
  rect(x3, y3, w3, h3);
  if ( over(x4, y4, w4, h4) ) stroke(200, 0, 0); 
  else stroke(0);
  rect(x4, y4, w4, h4);
  if ( over(x6, y6, w6, h6) ) stroke(200, 0, 0); 
  else stroke(0);
  rect(x6, y6, w6, h6);
  draw_quiz_text();
}

void draw_zurueck_button() { //_ state 1,2,3
  fill(0, 0, 200);
  if ( over(x5, y5, w5, h5) ) stroke(200, 0, 0); 
  else stroke(0);
  rect(x5, y5, w5, h5);

  fill(184, 18, 18);
  textSize(55);
  stroke(0);
  text("zurück", x5 + 35, y5 + 68);
  textSize(40);
  fill(0, 0, 200);
}

void draw_quiz_text() {
  
  fill(184, 18, 18);
  textSize(150);
  stroke(0);
  textLeading(200);
  text(QUIZ, x6 + 50, y6 + 290);
  textSize(40);
  fill(0, 0, 200);
  
}

void setup() {
  fullScreen();
  //size(1920, 1200);
  fill(0, 0, 200);
  strokeWeight(10);
}

void draw() {
  background(68, 235, 7);
  if ( state == 0 ) drawMainButtons(); 
  
  if ( state == 1 ) draw_back_button_and_some_text1();
  if ( state == 2 ) draw_back_button_and_some_text2();
  if ( state == 3 ) draw_back_button_and_some_text3();
  if ( state == 4 ) draw_back_button_and_some_text4();
}

void mousePressed() {
  if ( state == 0 ) {
    if ( over(x1, y1, w1, h1) )  state = 1;
    if ( over(x2, y2, w2, h2) )  state = 2;
    if ( over(x3, y3, w3, h3) )  state = 3;
    if ( over(x4, y4, w4, h4) )  state = 4;
  } else {
    if ( over(x5, y5, w5, h5) )  state = 0;
  }
}



void draw_back_button_and_some_text1() {
  fill(0);
  text("some text page1 ", 760, 50);
  draw_zurueck_button();
}

void draw_back_button_and_some_text2() {
  fill(0);
  text("some text page2 ", 760, 50);
  draw_zurueck_button();
}

void draw_back_button_and_some_text3() {
  fill(0);
  text("some text page3 ", 760, 50);
  draw_zurueck_button();
}

void draw_back_button_and_some_text4() {
  fill(0);
  text("some text page4 ", 760, 50);
  draw_zurueck_button();
}

boolean over(int x, int y, int w, int h) {
  return ( mouseX > x & mouseX < x + w   &&
    mouseY > y & mouseY < y + h      ) ;
}
1 Like
2

The letter I seems off, because Processing automatically aligns text to the left. It will look better if you switch the text alignment to centre instead.

This will create another problem, but it might be good practise to try and solve it yourself first :slight_smile:

2 Likes
3

Thank you, that worked :smiley:

2 Likes