How to display HTML in JavaFX Application

Question

I am developing a FontViewer application which changes the font of the text based on the selected font style.

This is the controller class of my application

public class FXMLDocumentController implements Initializable {

    @FXML
    private ListView fontListView;

    @FXML
    private TextArea fontTextArea;

    int[] fontSizes = {34, 28, 24, 20, 18, 16, 14, 12, 11, 10, 9, 8, 7, 6};

    String fontText = "";

    @Override
    public void initialize(URL url, ResourceBundle rb) {
        ObservableList<String> fontsList = FXCollections.observableArrayList(Font.getFontNames());
        fontListView.setItems(fontsList);
    }

    @FXML
    public void handleMouseClickEvent(MouseEvent mouseEvent) {
        changeFont();
    }

    public void changeFont() {
        for (int i = 0; i < fontSizes.length; i++) {
            fontText += "<p style='font-family:" + fontListView.getSelectionModel().getSelectedItem() + ";font-size:" + fontSizes[i] + "'>" + "This is Sample Text</p>";
        }

        fontTextArea.setText(fontText);
    }
}

Screenshot of my application:

When I use a TextArea, it displays just the plain HTML code instead of converting the HTML to Text. Which control should I use to accomplish this?

P.S: I tried TextFlow but it doesn't work, as I need to display different Styles and font-sizes for the required text.

I also looked at WebView but didn't understand how it could solve the mentioned problem.

Answer 1

Use a web view:

@FXML
private WebView fontWebView ;

// ...

public void changeFont() {
    StringBuilder sb = new StringBuilder(fontText);
    for (int i = 0; i < fontSizes.length; i++) {
        sb.append("<p style='font-family:")
          .append(fontListView.getSelectionModel().getSelectedItem())
          .append(";font-size:")
          .append( fontSizes[i])
          .append("'>This is Sample Text</p>");
    }
    fontText = sb.toString();
    fontWebView.getEngine().loadContent(fontText);
}

Answer 2

This is a very late answer, but I wanted to pass this along for those who need to apply fonts to a variety of FX controls (as I needed to do):

You can display fonts without using a WebView, by using the TextArea's setFont method. This has the advantage of being applicable to most text displaying FX controls, including Button, TextField, etc..., and can be used with downloaded TTF or OTF files.

// examples create a 20 pt font
// system font
Font f = Font.font("SansSerif", Font.PLAIN, 20);
// TTF/OTF added to your project as a resource:
Font f = Font.loadFont(ClassLoader.getSystemClassLoader().getResourceAsStream("ResourceName"), 20);
// TTF/OTF loaded from a file dynamically... read the font file into an input stream, and:
Font f = Font.loadFont(inputStream, 20);
// to use:
fontTextArea.setFont(f);

Note: some of the script TTF/OTF fonts can extend above or below the area that a system font will fit into, so test appropriately when using downloaded fonts.