How to access installed fonts and how to install custom fonts
How to set the fill and stroke for Text nodes
How to apply decoration such as underline and strikethrough to Text nodes
How to apply font smoothing
How to style Text nodes using CSS
The examples of this chapter lie in the com.jdojo.shape package. In order for them to work, you must add a corresponding line to the module-info.java file:
...
opens com.jdojo.shape to javafx.graphics, javafx.base;
...
What Is a Text Node?
A text node is an instance of the Text class that is used to render text. The Text class contains several properties to customize the appearance of text. The Text class and all its related classes—for example, the Font class, the TextAlignment enum, the FontWeight enum, etc.—are in the javafx.scene.text package.
The Text class inherits from the Shape class. That is, a Text is a Shape, which allows you to use all properties and methods of the Shape class on a Text node. For example, you can apply a fill color and a stroke to a Text node. Because Text is a node, you can use features of the Node class: for example, applying effects and transformations. You can also set text alignment, font family, font size, text wrapping style, etc., on a Text node.
Figure 15-1 shows three text nodes. The first one (from the left) is a simple text node. The second one uses bold text in a bigger font size. The third one uses the Reflection effect, a bigger font size, a stroke, and a fill.
Figure 15-1
A window showing three Text nodes
Creating a Text Node
An instance of the Text class represents a Text node. A Text node contains text and properties to render the text. You can create a Text node using one of the constructors of the Text class:
Text()
Text(String text)
Text(double x, double y, String text)
The no-args constructor creates a Text node with an empty string as its text. Other constructors let you specify the text and position the node.
The text property of the Text class specifies the text (or content) of the Text node. The x and y properties specify the x and y coordinates of the text origin, which are described in the next section.
// Create an empty Text Node and later set its text
Text t1 = new Text();
t1.setText("Hello from the Text node!");
// Create a Text Node with initial text
Text t2 = new Text("Hello from the Text node!");
// Create a Text Node with initial text and position
Text t3 = new Text(50, 50, "Hello from the Text node!");
Tip
The width and height of a text node are automatically determined by its font. By default, a Text node uses a system default font to render its text.
The program in Listing 15-1 creates three Text nodes, sets their different properties, and adds them to an HBox. The Text nodes are displayed as shown in Figure 15-1.
Apart from the local and parent coordinate system, a Text node has an additional coordinate system. It is the coordinate system used for drawing the text. Three properties of the Text class define the text coordinate system:
x
y
textOrigin
The x and y properties define the x and y coordinates of the text origin. The textOrigin property is of type VPos. Its value could be VPos.BASELINE, VPos.TOP, VPos.CENTER, and VPos.BOTTOM. The default is VPos.BASELINE. It defines where the x-axis of the text coordinate system lies within the text height. Figure 15-2 shows the local and text coordinate systems of a text node. The local coordinate axes are in solid lines. The text coordinate axes are in dashed lines.
Figure 15-2
Effects of the textOrigin property on the vertical location of text drawing
When the textOrigin is VPos.TOP, the x-axis of the text coordinate system is aligned with the top of the text. That is, the y property of the Text node is the distance between the x-axis of the local coordinate system and the top of the displayed text. A font places its characters on a line called the baseline. The VPos.BASELINE aligns the x-axis of the text coordinate system with the baseline of the font. Note that some characters (e.g., g, y, j, p, etc.) are extended below the baseline. The VPos.BOTTOM aligns the x-axis of the text coordinate system with the bottom of the displayed text accounting for the descent for the font. The VPos.CENTER (not shown in the figure) aligns the x-axis of the text coordinate system in the middle of the displayed text, accounting for the ascent and descent for the font.
Tip
The Text class contains a read-only baselineOffset property. Its value is the vertical distance between the top and baseline of the text. It is equal to the max ascent of the font.
Most of the time, you need not worry about the textOrigin property of the Text node, except when you need to align it vertically relative to another node. Listing 15-2 shows how to center a Text node horizontally and vertically in a scene. To center the node vertically, you must set the textOrigin property to VPos.TOP. The text is displayed as shown in Figure 15-3. If you do not set the textOrigin property, its y-axis is aligned with its baseline, and it appears above the centerline of the scene.
// TextCentering.java
package com.jdojo.shape;
import javafx.application.Application;
import javafx.geometry.VPos;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.text.Text;
import javafx.stage.Stage;
public class TextCentering extends Application {
public static void main(String[] args) {
Application.launch(args);
}
@Override
public void start(Stage stage) {
Text msg = new Text("A Centered Text Node");
// Must set the textOrigian to VPos.TOP to center
// the text node vertcially within the scene
msg.setTextOrigin(VPos.TOP);
Group root = new Group();
root.getChildren().addAll(msg);
Scene scene = new Scene(root, 200, 50);
msg.layoutXProperty().bind(
scene.widthProperty().subtract(
msg.layoutBoundsProperty().get().getWidth()).
divide(2));
msg.layoutYProperty().bind(
scene.heightProperty().subtract(
msg.layoutBoundsProperty().get().getHeight()).
divide(2));
stage.setTitle("Centering a Text Node in a Scene");
stage.setScene(scene);
stage.sizeToScene();
stage.show();
}
}
Listing 15-2
Centering a Text Node in a Scene
Figure 15-3
A Text node centered in a scene
Displaying Multiline Text
A Text node is capable of displaying multiple lines of text. It creates a new line in two cases:
A newline character “” in the text creates a new line causing the characters following the newline to wrap to the next line.
The Text class contains a wrappingWidth property, which is 0.0 by default. Its value is specified in pixels, not characters. If it is greater than zero, the text in each line is wrapped to at the specified value.
The lineSpacing property specifies the vertical spacing in pixels between two lines. It is 0.0 by default.
The textAlignment property specifies the horizontal alignment of the text lines in the bounding box. The widest line defines the width of the bounding box. Its value has no effect in a single-line Text node. Its value can be one of the constants of the TextAlignment enum: LEFT, RIGHT, CENTER, and JUSTIFY. The default is TextAlignment.LEFT.
The program in Listing 15-3 creates three multiline Text nodes as shown in Figure 15-4. The text for all nodes is the same. The text contains three newline characters. The first node uses the default LEFT text alignment and a line spacing of 5px. The second node uses RIGHT text alignment with the default line spacing of 0px. The third node uses a wrappingWidth of 100px. A new line is created at 100px as well as a newline character “”.
// MultilineText.java
package com.jdojo.shape;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.HBox;
import javafx.scene.text.Text;
import javafx.scene.text.TextAlignment;
import javafx.stage.Stage;
public class MultilineText extends Application {
public static void main(String[] args) {
Application.launch(args);
}
@Override
public void start(Stage stage) {
String text = """
Strange fits of passion have I known:
And I will dare to tell,
But in the lover's ear alone,
What once to me befell.""".stripIndent();
Text t1 = new Text(text);
t1.setLineSpacing(5);
Text t2 = new Text(text);
t2.setTextAlignment(TextAlignment.RIGHT);
Text t3 = new Text(text);
t3.setWrappingWidth(100);
HBox root = new HBox(t1, t2, t3);
root.setSpacing(20);
root.setStyle("""
-fx-padding: 10;
-fx-border-style: solid inside;
-fx-border-width: 2;
-fx-border-insets: 5;
-fx-border-radius: 5;
-fx-border-color: blue;""");
Scene scene = new Scene(root);
stage.setScene(scene);
stage.setTitle("Using Multiline Text Nodes");
stage.show();
}
}
Listing 15-3
Using Multiline Text Nodes
Figure 15-4
Multiline Text nodes
Setting Text Fonts
The font property of the Text class defines the font for the text. The default font used is from the “System” font family with the “Regular” style. The size of the default font is dependent on the platform and the desktop settings of the user.
A font has a family and a family name. A font family is also known as a typeface. A font family defines shapes (or glyphs) for characters. The same characters appear differently when displayed using fonts belonging to different font families. Variants of a font are created by applying styles. Each variant of the font has a name that consists of the family name and the style names. For example, “Arial” is a family name of a font, whereas “Arial Regular,” “Arial Bold,” and “Arial Bold Italic” are names of the variants of the “Arial” font.
Creating Fonts
An instance of the Font class represents a font. The Font class provides two constructors:
Font(double size)
Font(String name, double size)
The first constructor creates a Font object of the specified size that belongs to the “System” font family. The second one creates a Font object of the specified full name of the font and the specified size. The size of the font is specified in points. The following snippet of code creates some font objects of the “Arial” family. The getFamily(), getName(), and getSize() methods of the Font class return the family name, full name, and size of the font, respectively.
// Arial Plain
Font f1 = new Font("Arial", 10);
// Arial Italic
Font f2 = new Font("Arial Italic", 10);
// Arial Bold Italic
Font f3 = new Font("Arial Bold Italic", 10);
// Arial Narrow Bold
Font f4 = new Font("Arial Narrow Bold", 30);
If the full font name is not found, the default “System” font will be created. It is hard to remember or know the full names for all variants of a font. To address this, the Font class provides factory methods to create fonts using a font family name, styles, and size:
The font() methods let you specify the family name, font weight, font posture, and font size. If only the family name is provided, the default font size is used, which depends on the platform and the desktop setting of the user.
The font weight specifies how bold the font is. Its value is one of the constants of the FontWeight enum: THIN, EXTRA_LIGHT, LIGHT, NORMAL, MEDIUM, SEMI_BOLD, BOLD, EXTRA_BOLD, BLACK. The constant THIN represents the thinnest font and the constant BLACK the thickest font.
The posture of a font specifies whether it is italicized. It is represented by one of the two constants of the FontPosture enum: REGULAR and ITALIC.
The following snippet of code creates fonts using the factory methods of the Font class:
// Arial Regular
Font f1 = Font.font("Arial", 10);
// Arial Bold
Font f2 = Font.font("Arial", FontWeight.BOLD, 10);
// Arial Bold Italic
Font f3 = Font.font("Arial", FontWeight.BOLD, FontPosture.ITALIC, 10);
// Arial THIN
Font f4 = Font.font("Arial", FontWeight.THIN, 30);
Tip
Use the getDefault() static method of the Font class to get the system default font.
The program in Listing 15-4 creates Text nodes and sets their font property. The first Text node uses the default font. Figure 15-5 shows the Text nodes. The text for the Text nodes is the String returned from the toString() method of their Font objects.
Text nodes using variants of the “Arial” font family
Accessing Installed Fonts
You can get the list of installed fonts on your machine. You can get the list of font family names, full font names, and full font names for a specified family name for all installed fonts. The following static methods in the Font class provide these lists:
List<String> getFamilies()
List<String> getFontNames()
List<String> getFontNames(String family)
The following snippet of code prints the family names of all installed fonts on a machine. The output was generated on Windows. A partial output is shown:
// Print the family names of all installed fonts
for(String familyName: Font.getFamilies()) {
System.out.println(familyName);
}
Agency FB
Algerian
Arial
Arial Black
Arial Narrow
Arial Rounded MT Bold
...
The following snippet of code prints the full names of all installed fonts on a machine. The output was generated on Windows. A partial output is shown:
// Print the full names of all installed fonts
for(String fullName: Font.getFontNames()) {
System.out.println(fullName);
}
Agency FB
Agency FB Bold
Algerian
Arial
Arial Black
Arial Bold
Arial Bold Italic
Arial Italic
Arial Narrow
Arial Narrow Bold
Arial Narrow Bold Italic
More output goes here...
The following snippet of code prints the full names of all installed fonts for the “Times New Roman” family:
// Print the full names of “Times New Roman” family
for(String fullName: Font.getFontNames("Times New Roman")) {
System.out.println(fullName);
}
Times New Roman
Times New Roman Bold
Times New Roman Bold Italic
Times New Roman Italic
Using Custom Fonts
You can load custom fonts from external sources: for example, from a file from the local file system or from a URL. The loadFont() static method in the Font class loads a custom font:
loadFont(InputStream in, double size)
loadFont(String urlStr, double size)
Upon successfully loading of the custom font, the loadFont() method registers the font with the JavaFX graphics engine, so a font can be created using the constructors and factory methods of the Font class. The method also creates a Font object of the specified size and returns it. Therefore, the size parameter exists for loading the font and creating its object in the same method call. If the method cannot load the font, it returns null.
The program in Listing 15-5 shows how to load a custom font from a local file system. The font file name is 4starfac.ttf. This is just an example—you can specify any font you like. The file is assumed to be in the CLASSPATH under the resourcesfont directory. After the font is loaded successfully, it is set for the first Text node. A new Font object is created for its family name and set for the second Text node. If the font file does not exist or the font cannot be loaded, an appropriate error message is displayed in the window. Figure 15-6 shows the window when the font is loaded successfully.
// TextCustomFont.java
package com.jdojo.shape;
import java.net.URL;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.HBox;
import javafx.scene.text.Font;
import javafx.scene.text.FontPosture;
import javafx.scene.text.FontWeight;
import javafx.scene.text.Text;
import javafx.stage.Stage;
public class TextCustomFont extends Application {
public static void main(String[] args) {
Application.launch(args);
}
@Override
public void start(Stage stage) {
Text t1 = new Text();
t1.setLineSpacing(10);
Text t2 = new Text("Another Text node");
// Load the custom font
String fontFile =
"resources/font/4starfac.ttf";
URL url =
this.getClass().getClassLoader().
getResource(fontFile);
if (url != null) {
String urlStr = url.toExternalForm();
Font customFont = Font.loadFont(urlStr, 16);
if (customFont != null ) {
// Set the custom font for the first
// Text node
t1.setFont(customFont);
// Set the text and line spacing
t1.setText(
"Hello from the custom font!!!
" +
"Font Family: " +
customFont.getFamily());
// Create an object of the custom font and
// use it
Font font2 =
Font.font(customFont.getFamily(),
FontWeight.BOLD,
FontPosture.ITALIC,
24);
// Set the custom font for the second
// Text node
t2.setFont(font2);
} else {
t1.setText(
"Could not load the custom font from " +
urlStr);
}
} else {
t1.setText(
"Could not find the custom font file " +
fontFile +
" in CLASSPATH. Used the default font.");
}
HBox root = new HBox(t1, t2);
root.setSpacing(20);
root.setStyle("""
-fx-padding: 10;
-fx-border-style: solid inside;
-fx-border-width: 2;
-fx-border-insets: 5;
-fx-border-radius: 5;
-fx-border-color: blue;""");
Scene scene = new Scene(root);
stage.setScene(scene);
stage.setTitle("Loading and Using Custom Font");
stage.show();
}
}
Listing 15-5
Loading and Using Custom Fonts Using the Font Class
Figure 15-6
Text nodes using custom fonts
Setting Text Fill and Stroke
A Text node is a shape. Like a shape, it can have a fill and a stroke. By default, a Text node has a null stroke and a Color.BLACK fill. The Text class inherits properties and methods for setting its stroke and fill from the Shape class. I have discussed them at length in Chapter 14.
The program in Listing 15-6 shows how to set a stroke and a fill for Text nodes. Figure 15-7 shows two Text nodes. The first one uses a red stroke and a white fill. The second one uses a black stroke and white fill. The stroke style for the second one uses a dashed line.
// TextFillAndStroke.java
package com.jdojo.shape;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.HBox;
import javafx.scene.paint.Color;
import javafx.scene.text.Font;
import javafx.scene.text.Text;
import javafx.stage.Stage;
public class TextFillAndStroke extends Application {
public static void main(String[] args) {
Application.launch(args);
}
@Override
public void start(Stage stage) {
Text t1 = new Text("Stroke and fill!");
t1.setStroke(Color.RED);
t1.setFill(Color.WHITE);
t1.setFont(new Font(36));
Text t2 = new Text("Dashed Stroke!");
t2.setStroke(Color.BLACK);
t2.setFill(Color.WHITE);
t2.setFont(new Font(36));
t2.getStrokeDashArray().addAll(5.0, 5.0);
HBox root = new HBox(t1, t2);
root.setSpacing(20);
root.setStyle("""
-fx-padding: 10;
-fx-border-style: solid inside;
-fx-border-width: 2;
-fx-border-insets: 5;
-fx-border-radius: 5;
-fx-border-color: blue;""");
Scene scene = new Scene(root);
stage.setScene(scene);
stage.setTitle("Using Stroke and Fill for Text Nodes");
stage.show();
}
}
Listing 15-6
Using Stroke and Fill for Text Nodes
Figure 15-7
Text nodes using strokes and fills
Applying Text Decorations
The Text class contains two boolean properties to apply text decorations to its text:
strikethrough
underline
By default, both properties are set to false. If the strikethrough is set to true, a line is drawn through each line of text. If the underline is set to true, a line is drawn below each line of text. The following snippet of code uses the decorations for Text nodes. The nodes are shown in Figure 15-8.
Text t1 = new Text("It uses the
underline decoration.");
t1.setUnderline(true);
Text t2 = new Text("It uses the
strikethrough decoration.");
t2.setStrikethrough(true);
Figure 15-8
Text nodes using the underline and strikethrough decorations
Applying Font Smoothing
The Text class contains a fontSmoothingType property, which can be used to apply a gray or LCD font smoothing. Its value is one of the constants of the FontSmoothingType enum: GRAY and LCD. The default smoothing type is fontSmoothingType.GRAY. The LCD smoothing type is used as a hint. The following snippet of code creates two Text nodes: one uses LCD and one GRAY font smoothing type. The Text nodes have been shown in Figure 15-9.
Text t1 = new Text("Hello world in LCD.");
t1.setFontSmoothingType(FontSmoothingType.LCD);
Text t2 = new Text("Hello world in GRAY.");
t2.setFontSmoothingType(FontSmoothingType.GRAY);
Figure 15-9
Text nodes using LCD and GRAY font smoothing types
Styling a Text Node with CSS
A Text node does not have a default CSS style class name. In addition to all CSS properties of the Shape, a Text node supports the following CSS properties:
-fx-font
-fx-font-smoothing-type
-fx-text-origin
-fx-text-alignment
-fx-strikethrough
-fx-underline
I have discussed all properties in the previous sections. The -fx-font property is inherited from the parent. If the parent does not set the property, the default system font is used. The valid values for the -fx-font-smoothing-type property are lcd and gray. The valid values for the -fx-text-origin property are baseline, top, and bottom. Let us create a style named my-text as follows. It sets a font and a linear gradient fill. The fill starts as a light gray color and ends as black:
.my-text {
-fx-font: 36 Arial;
-fx-fill: linear-gradient(from 0% 0% to 100% 0%,
lightgray 0%, black 100%);
-fx-font-smoothing-type: lcd;
-fx-underline: true;
}
The following snippet of code creates a Text node and sets its style class name to my-text. Figure 15-10 shows the Text node with its styles applied to it.
Text t1 = new Text("Styling Text Nodes!");
t1.getStyleClass().add("my-text");
Figure 15-10
A Text node using CSS styles
Summary
A text node is an instance of the Text class that is used to render text. The Text class contains several properties to customize the appearance of text. The Text class and all its related classes are in the javafx.scene.text package. The Text class inherits from the Shape class. That is, a Text is a Shape, which allows you to use all properties and methods of the Shape class on a Text node. A Text node is capable of displaying multiple lines of text.
A Text node contains text and properties to render the text. You can create a Text node using one of the three constructors of the Text class. You can specify the text or text and position of the text while creating the node. The no-args constructor creates a text node with an empty text and is located at (0, 0).
The no-args constructor creates a Text node with an empty string as its text. Other constructors let you specify the text and position the node. The width and height of a text node are automatically determined by its font. By default, a Text node uses a system default font to render its text.
Apart from the local and parent coordinate system, a Text node has an additional coordinate system. It is the coordinate system used for drawing the text. The x, y, and textOrigin properties of the Text class define the text coordinate system. The x and y properties define the x and y coordinates of the text origin. The textOrigin property is of type VPos. Its value could be VPos.BASELINE, VPos.TOP, VPos.CENTER, and VPos.BOTTOM. The default is VPos.BASELINE. It defines where the x-axis of the text coordinate system lies within the text height.
The font property of the Text class defines the font for the text. The default font used is from the “System” font family with the “Regular” style. The size of the default font is dependent on the platform and the desktop settings of the user. An instance of the Font class represents a font. The Font class contains several static methods that let you access the installed fonts on your computer and load custom fonts from font files.
A Text node is a shape. Like a shape, it can have a fill and a stroke. By default, a Text node has a null stroke and a Color.BLACK fill.
The strikethrough and underline properties of the Text class let you apply decorations to the text. By default, both properties are set to false.
The Text class contains a fontSmoothingType property, which can be used to apply a gray or LCD font smoothing. Its value is one of the constants of the FontSmoothingType enum: GRAY and LCD. The default smoothing type is fontSmoothingType.GRAY. The LCD smoothing type is used as a hint.
You can style Text nodes using CSS. Setting font, text alignment, font smoothing, and decorations are supported through CSS.
The next chapter will discuss how to draw 3D shapes in JavaFX.
