Using HTML on JLabels

A JButton text string is read as HTML only when it begins with the html tag; that leading tag is the switch that controls interpretation.

Programming

A Button Whose Text Is Not Plain

Up to this point, the text on a JButton has been a plain string. Whatever characters you pass to the constructor appear on the button, all in one style and on one line. Java lets you change that. The text of a button can be written in HTML, the markup language used to build web pages. With HTML you can color part of the label, underline a word, place the text on several lines, or center those lines.

Before reading the rule behind this, try a prediction. Consider a button whose text contains angle-bracket tags and a line-break tag in the middle of the string. Think about how that label will look compared with a button whose text is a plain string. The rest of this article works backward from the result you see to the single rule that produces it.

The Leading html Tag Decides Everything

Definition

A JButton text string is read as HTML only when it begins with the html tag. That leading tag is the switch that controls interpretation.

The check looks only at the beginning of the string, so the html tag must be the first thing in it. If the string starts with html, Java interprets the whole string as HTML. Any other string is not read as markup, so the characters in it are not treated as formatting instructions. The string also does not have to follow strict HTML rules. For example, the closing html tag is optional, so you do not need to place one at the end of the string.

Given a button's text string, the check looks only at the first characters. A string that begins with the html tag takes the HTML path; any other string is shown with its characters taken literally.

Keep this single decision in mind. Nearly every formatting problem with button text traces back to it. When tags you wrote do not appear to work, the first thing to check is whether the string begins with html.

Styling Words and Layout

HTML gives you two kinds of control over button text. Some tags style only a portion of the label, leaving the rest unchanged. Other tags control how the text is laid out across lines. The subsections below take each group in turn, with a short example for each tag.

Reading a Nested Button Label

Tags can be combined and nested. The string below uses all four tags from this article. Read it from left to right: the html tag enables HTML, the center tag wraps the layout, and the inner tags style individual spans. The annotated strip shows what each token contributes.

Each token in the string produces one visual effect. The html tag at the start is the switch; the other tags nest inside it and each styles only the text it wraps.

Tags Showing Up as Literal Text

When HTML tags appear literally on a button, the most common cause is that the string does not begin with html. Because the check looks only at the start of the string, a tag placed anywhere else has no effect, and the characters are shown as written.

The tag-containing string is identical in both cases. Only the leading html tag changes, and that single difference determines whether the tags are read as formatting or shown as characters.

Common mistake
Placing the html tag after other text or a space
What it looks like
```
new JButton("Save <html>File</html>")
```
Why it fails
The check looks only at the beginning of the string, so an html tag that is not first does not switch on HTML interpretation.
Do this instead
Put html as the very first thing in the string: new JButton("<html>Save File</html>")
Common mistake
Assuming a missing closing html tag causes the failure
Why it fails
The closing html tag is optional. The opening tag is the condition that matters.
Do this instead
Check the opening tag first. A string that begins with html is read as HTML even without a closing tag.
Common mistake
Forgetting that styles apply only inside the tags that wrap the text

Predicting Before You Reveal

What do you think happens?

Does the button text "Click here now" show the word here underlined?

Yes, underlined
No, the tags appear as literal text

Reveal answer

Answer:

No, the tags appear as literal text

The string does not begin with the html tag, so Java does not read it as HTML. The characters and are shown as written.

EASY

Rewrite the label "Click here now" so the word here is underlined and the rest of the label keeps its default style. Explain which change you made and why it works.

Hints

Start by deciding which tag must come first in the string.
Wrap only the word here with the u tag, not the whole label.

Your attempt (not saved)

Key Takeaways

A JButton text string is read as HTML only when it begins with the html tag, and that leading tag is the switch that controls interpretation.
The u tag underlines a span and the font tag with a color attribute colors it; each style applies only to the text it wraps.
The br tag starts a new line, and the center tag wrapped around the text after html centers the lines.
When HTML tags appear literally on a button, first check whether the string begins with html, since the closing html tag is optional.