This article shows you how to draw a String vertically on a graphics context. In the default coordinate system, a String is drawn from left to right. The following picture illustrates how the “Hello World” string is drawn in the default coordinate system (under the graphics context of a JFrame container):

To draw the String vertically, the coordinate system needs to be rotated either by 90^o degree (clockwise) or by -90^o degree (counterclockwise). The following picture illustrates the coordinate system rotated by 90^o degree clockwise:

Here, the X’OY’ coordinate system is the result of rotating the XOY coordinate system by 90^o degree clockwise (or one quadrant). In Java, the following code snippet is used to make such rotation:

Graphics2D g2d = ...; // obtain the graphics context

AffineTransform at = new AffineTransform();
at.rotate(Math.PI / 2);

g2d.setTransform(at);

That’s also equivalent to the following code (rotating by one quadrant):

AffineTransform at = AffineTransform.getQuadrantRotateInstance(1);
g2d.setTransform(at);

Then draw the text “Hello World” as follows:

g2d.drawString("Hello World", 100, -250);

NOTES: As shown in the above picture, the (x, y) position of the String must be relative to the new coordinate system. Thus, to draw the String to the visible area of the frame, the Y position must be negative, and the X position is equivalent to Y position in the original coordinate system.

Similarly, to draw the String vertically in counterclockwise direction, the coordinate system needs be rotated by -90^o degree (or by 3 quadrants). The following picture illustrates such rotation:

Here, the X’OY’ coordinate system is the result of rotating the XOY coordinate system by 90^o degree counterclockwise (or three quadrants). In Java code:

Graphics2D g2d = ...; // obtain the graphics context

AffineTransform at = new AffineTransform();
at.rotate(-Math.PI / 2);

g2d.setTransform(at);

Or rotate by 3 quadrants:

AffineTransform at = AffineTransform.getQuadrantRotateInstance(3);
g2d.setTransform(at);

Then draw the String as follows:

g2d.drawString("Hello World", -200, 50);

 

NOTES: In the new coordinate system, the X position must be negative in order to have the text visible. Refer to the above picture for better understanding.

It’s recommended to keep a reference of the default affine transform before making the rotation and drawing on the new coordinate system. Then restore the original coordinate system to draw normally. Here’s the code snippet:

// get a reference of the affine transform of the original coordinate system
AffineTransform defaultAt = g2d.getTransform();

// make new affine transform for rotation
// draw on the new coordinate system

// restore the original coordinate system
g2d.setTransform(defaultAt);

The following code is a demo program that draws two Strings “Hello World” vertically in two directions:

package net.codejava.graphics;

import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.geom.AffineTransform;

import javax.swing.JFrame;
import javax.swing.SwingUtilities;

/**
 * This program demonstrates how to draw text vertically 
 * on a graphics context.
 * @author www.codejava.net
 *
 */
public class VerticalTextDrawingExample extends JFrame {
	
	public VerticalTextDrawingExample() {
		super("Vertical Text Drawing Example");
		
		setSize(320, 280);
		setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		setLocationRelativeTo(null);
	}
	
	public void paint(Graphics g) {
		super.paint(g);
		
		g.setFont(new Font("Arial", Font.BOLD, 16));
		g.setColor(Color.BLUE);
		g.drawString("Hello World", 100, 100);
		
		Graphics2D g2d = (Graphics2D) g;
		AffineTransform defaultAt = g2d.getTransform();
		
		// rotates the coordinate by 90 degree counterclockwise
		AffineTransform at = new AffineTransform();
		at.rotate(- Math.PI / 2);
		g2d.setTransform(at);
		g2d.drawString("Hello World", -200, 50);
		
		
		AffineTransform at2 = AffineTransform.getQuadrantRotateInstance(1);
		g2d.setTransform(at2);
		
		g2d.drawString("Hello World", 100, -250);
		
		g2d.setTransform(defaultAt);
		
	}

	public static void main(String[] args) {
		SwingUtilities.invokeLater(new Runnable() {
			
			@Override
			public void run() {
				new VerticalTextDrawingExample().setVisible(true);
			}
		});
	}

}

Output of the program:

 

Other Java Graphics Tutorials:

• How to add watermark for images using Java
• How to resize images using Java
• How to convert image format using Java
• How to capture screenshot programmatically in Java
• How to draw image with automatic scaling in Java
• How to Create Zoomable User Interface Java Programs with Piccolo2D Framework
• Drawing lines examples with Java Graphics2D
• Drawing Rectangles Examples with Java Graphics2D
• Using JFreechart to draw line chart with CategoryDataset
• Using JFreechart to draw XY line chart with XYDataset