Working with Text in JavaFX | JavaFX Tutorials and How-To's

How-To's > How do I work with text?

See the following topics for more information about working with text.

Add text
Make text bold
Paint letters in a text string with different colors

How do I add text?

Add text by using the Text class.

Use the following variables to determine the size, shape, and position of the rectangle or square:

width – The width of the rectangle
height – The height of the rectangle
x – The horizontal position in the scene graph of the upper left corner of the rectangle, where the value 0 is the leftmost pixel
y – The vertical position in the scene graph of the upper left corner of the rectangle, where the value 0 is the topmost pixel

Example Code

The following example shows the code for four different presentations of text.

Rectangle

import javafx.scene.Scene;
import javafx.stage.Stage;
import javafx.scene.text.Font;
import javafx.scene.text.Text;
import javafx.scene.text.TextAlignment;
import javafx.scene.paint.Color;
import javafx.scene.shape.Line;
import javafx.scene.text.TextOrigin;

Stage {
    title: "Clipping"
    width: 540
    height: 350
    scene: Scene {
        content: [
            // Vertical reference line
            Line {
                startX: 10
                endX: 10
                startY: 0
                endY: 350
            }
            // Horizontal reference line for the following text
            Line {
                startX: 0
                endX: 540
                startY: 30
                endY: 30
            }
            //Line label
            Text {
                x: 490
                y: 35
                font: Font { name: "Arial" size: 12 }
                fill: Color.DARKGRAY
                content: "y = 30"
                textOrigin: TextOrigin.TOP
            }
            // Text 1
            Text {
                x: 10
                y: 30
                font: Font {
                    name: "Times New Roman"
                    size: 14 }
                fill: Color.MIDNIGHTBLUE
                content: "1. Text origin is TOP, text alignment is left "
                "and here's another line"
                textOrigin: TextOrigin.TOP
                textAlignment: TextAlignment.LEFT
            }

            // Horizontal reference line for the following text
            Line {
                startX: 0
                endX: 540
                startY: 120
                endY: 120
            }
            //Line label
            Text {
                x: 490
                y: 125
                font: Font { name: "Arial" size: 12 }
                fill: Color.DARKGRAY
                content: "y = 125"
                textOrigin: TextOrigin.TOP
            }
            // Text 2
            Text {
                x: 10
                y: 120
                font: Font { name: "Arial Bold" size: 14 }
                fill: Color.DARKGREEN
                wrappingWidth: 200
                content: "2. Text origin is BOTTOM and text alignment is RIGHT "
                "with wrapping width set"
                textOrigin:TextOrigin.BOTTOM
                textAlignment: TextAlignment.RIGHT
            }
            // Horizontal reference line for the following text
            Line {
                startX: 0
                endX: 540
                startY: 170
                endY: 170
            }
            //Line label
            Text {
                x: 490
                y: 175
                font: Font { name: "Arial" size: 12 }
                fill: Color.DARKGRAY
                content: "y = 175"
                textOrigin: TextOrigin.TOP
            }
            // Text 3
            Text {
                x: 10
                y: 170
                font: Font { name: "Arial Bold Italic" size: 14 }
                fill: Color.DARKRED
                content: "3. Text origin is BASELINE and text alignment \n"
                "is CENTER "
                "with a manual line break"
                textOrigin: TextOrigin.BASELINE
                textAlignment: TextAlignment.CENTER
            }
            //Text 4
            Text {
                x: 10
                y: 290
                font: Font { name: "Verdana" size: 58 }
                fill: Color.DARKORANGE
                stroke: Color.DARKRED
                strokeWidth: 3
                content: "4. Stroke and fill"
            }
        ]
    }
}

Tips

If you continue the text content on a second line in the code, you must enclose each line in quotation marks. Breaking the line in the code does not break the line at runtime, as shown in the first text example.
To break a line at runtime, set a width limit in pixels or create your own line breaks by using \n, as shown in the second and third examples respectively.
The default vertical point of origin of the text is BASELINE, which puts the bottom of the nondescending letters in the first line of text at the y coordinate. Specifying TOP as the text origin puts the top of the tallest letter in the first line of text at the y coordinate. Specifying BOTTOM puts the bottom of the tails of descending letters in the last line of text at the y coordinate.
Horizontal text alignment is LEFT by default. Specifying text alignment as RIGHT, CENTER, or JUSTIFY places the left side of the longest line of text at the x coordinate.
You can add a stroke to text, as the fourth text object demonstrates. See How do I add a stroke to a shape?
Because text objects are nodes, you can apply animations and effects to them.

Examples

Building GUI Applications With JavaFX Lesson 1: Quick JavaFX GUI Overview
This tutorial section provides more examples of text.

API Documentation

Text
Node

How do I make text bold?

You can make text bold in two ways.

Use a bold font name as the value for the name instance variable of the Font class:

import javafx.scene.Scene;
import javafx.stage.Stage;
import javafx.scene.text.Font;
import javafx.scene.text.Text;

Stage {
    title: "Bold Font Name"
    scene: Scene {
        content: [
            Text {
                x: 10, y: 60 
                font: Font {
                        name: "Arial Bold" size: 24 
                    } 
                content: "Hello World!"
            }
        ]
    }
}

Use the FontWeight class, which can be accessed through the Font.font() function. You can choose from several of this function's variants, which take different parameters. See the Font class in the JavaFX API documentation for more details.

import javafx.scene.Scene;
import javafx.stage.Stage;
import javafx.scene.text.Font;
import javafx.scene.text.Text;
import javafx.scene.text.TextOrigin;
import javafx.scene.text.FontWeight;

Stage {
    title: "Font Weight"

    scene: Scene {
        content: [
            Text {
                content: "This is a bold font weight"
                textOrigin: TextOrigin.TOP
                font: Font.font("BirchStd", FontWeight.BOLD, 84)
                x: 10
                y: 10
            }
        ]
    }
}

Tips

When you use a bold font name as the value of the name variable, such as Arial Bold, the font must exist on the viewer's system to appear in that font. When you use the Font.font() function, the first parameter is the family name, not the full font name. If the font family is not found, the font reverts to the system default.
In the FontWeight class, only the BOLD variable is synthetic. This characteristic means that FontWeight.BOLD generates a bolder version of a regular font. This variable does not generate a bolder version of a bold font, such as Arial Bold. Other FontWeight variables, such as EXTRA_BOLD and DEMI_BOLD, are not displayed as such if an extrabold or demibold version of the regular font does not exist, but the fallback behavior differs by font and by system.
For example, in the previous code, substituting the REGULAR, BOLD, and EXTRA_BOLD variables for FontWeight resulted in the following text on a Windows system that had the BirchStd TrueType font installed. That font had no TrueType Bold version. The BOLD result was generated synthetically from the regular font, and the EXTRA_BOLD variable reverted to BOLD because an extrabold version of the font did not exist.
In a similar experiment on a Mac OS X system, the BOLD variable produced a bolder version of a regular font, but the EXTRA_BOLD variable reverted to the regular font.
As the previous bullet point shows, font effects vary according to whether a particular font is installed and how fonts are rendered. Test your application on various platforms to ensure that the appearance and placement of the text is acceptable.
Do not use the embolden variable in the Font class to apply bold text. The JavaFX Script 1.2 programming language has an issue with this variable.
On Windows systems, smaller font sizes do not appear to have bold applied by the FontWeight.BOLD attribute, although the character metrics do widen. For fonts below a certain size, the hinting mechanism of the font rasterizer effectively prevents letterforms from becoming bold, thus preserving character sharpness.

Examples

Using Custom Fonts in Your JavaFX Application
This tech tip shows how to add custom fonts and use them in the Font.name variable in your application.

API Documentation

Font
Text

How do I paint letters in a text string with different colors?

Create two sequences of colors and letters, and render each letter by using the Label class, which is a noneditable text control. Use HBox to place the layout of the text.

Example Code

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.layout.HBox;
import javafx.scene.paint.Color;
import javafx.scene.text.Font;

def letters = [
    "Y", "o", "u", "r", " ", "a", "p", "p", "l", "i", "c", 
    "a", "t", "i", "o", "n"
    ];

def colors = [
    "mediumpurple",    "mediumseagreen",   "mediumslateblue", "mediumspringgreen",
    "mediumturquoise", "mediumvioletred",  "midnightblue",    "blue",
    "orange",          "orangered",        "plum",            "navy",
    "red",             "olive",            "olivedrab",       "green" 
    ];

Stage {
    title: "Application title"
    width: 250
    height: 80
    scene: Scene {
        content: [
            HBox{
                content:[
                    for (letter in letters)
                        Label {text: letter
                            textFill: Color.web(colors[indexof letter])
                            font: Font{size: 20}}
                ]
            }
        ]
    }
}

API Documentation

Label
HBox

Last Updated: April 2010
[Return to How-To's Home]

How-To's > How do I work with text?

How do I add text?

Example Code

Tips

Examples

API Documentation

Related How-To Topics

How do I make text bold?

Tips

Examples

API Documentation

How do I paint letters in a text string with different colors?

Example Code

API Documentation