# Vertical Text Align Question

**URL:** <https://discourse.processing.org/t/vertical-text-align-question/15892>\
**Category:** Coding Questions\
**Created:** [November 27, 2019, 8:41pm UTC](https://discourse.processing.org/t/vertical-text-align-question/15892 "2019-11-27T20:41:31Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ladan](https://avatars.discourse-cdn.com/v4/letter/l/dbc845/32.png) [@Ladan](https://discourse.processing.org/u/Ladan)\
**Post date:** [November 27, 2019, 8:41pm UTC](https://discourse.processing.org/t/vertical-text-align-question/15892/1 "2019-11-27T20:41:31Z")

</div>

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?

```auto
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:

```auto
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 ) ;
}

```

---

<div class="post-metadata">

**Author:** ![Tiemen](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tiemen/32/5477_2.png) [@Tiemen](https://discourse.processing.org/u/Tiemen)\
**Post date:** [November 27, 2019, 9:07pm UTC](https://discourse.processing.org/t/vertical-text-align-question/15892/2 "2019-11-27T21:07:01Z")

</div>

The letter I seems off, because Processing automatically aligns text to the left. It will look better if you switch the [text alignment](https://processing.org/reference/textAlign_.html) to centre instead.

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

---

<div class="post-metadata">

**Author:** ![Ladan](https://avatars.discourse-cdn.com/v4/letter/l/dbc845/32.png) [@Ladan](https://discourse.processing.org/u/Ladan)\
**Post date:** [November 28, 2019, 6:26am UTC](https://discourse.processing.org/t/vertical-text-align-question/15892/3 "2019-11-28T06:26:28Z")

</div>

Thank you, that worked 😃