Text line height


Question

How can I specify a line height in a multi-line Text / Label?

It already seems it's not supported in css:

JavaFX CSS does not support comma-separated series of font family names in the -fx-font-family property. The optional line height parameter when specifying fonts is not supported. There is no equivalent for the font-variant property.

Is there a reason for this?

Is there an alternative to set this in code? Or kinda emulate the functionality? I want to control vertical rhythm within my app.

1
2
8/14/2013 1:19:43 AM

Accepted Answer

Java 8+ implementation

RT-21683 Allow to change line-to-line spacing was implemented to add a line spacing feature to JavaFX Java 8.

The line spacibg API is defined on Text, TextFlow and Labeled nodes via a lineSpacing property and associated getters and setters. Spacing is defined in pixels, like the rest of JavaFX layout.

Java 2.2- implementation

If you cannot use Java 8+, you will need to implement line spacing yourself, e.g. By setting spacing on a VBox with separate Text nodes for each line.

Discussion of unit measurements in JavaFX

It seems that there is a corresponding (stylable) css property? If it's defined in pixels, how do I make it dpi aware

css properties work can work with em units if you use them. See for example the default modena.css stylesheet which measures almost all sizes in em units. This is why if you are just using default styles without additional pixel based layout, then if you change the root font size, everything in your layout scales automatically.

It's only the Java APIs and FXML which work with only pixel units. Even then, the JavaFX system is clever enough to know (at least on some machines), that it is running on a HiDPI display (e.g. OS X retina) so that, for example, pixel units are automatically doubled for the retina display (in Java 8).

If you are using FXML, you could use expression bindings as a way to define your own unit system.

Future versions of JavaFX may provide more support for RT-14020 Concept for a screen resolution independent definition of a GUI.

Sample Code

The sample below uses the Java 8 to demonstrate usage of the lineSpacing api and -fx-line-spacing css attribute.

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.stage.Stage;

public class LineSpacing extends Application {
    public static void main(String[] args) { launch(LineSpacing.class); }

    @Override public void start(Stage stage) {
        Label label = new Label(
            "Power is my mistress.\n" +
            "I have worked too hard at her conquest " +
            "to allow anyone to take her away from me.\n" +
            " - Napoleon Bonaparte");
        label.setPadding(new Insets(20));

        // as the default font spacing in JavaFX is 13 points, 
        // all of the following lines will provide the same results 
        // (double spacing the label text).
        //
        // label.setLineSpacing(13);
        // label.setStyle("-fx-line-spacing: 13px;");
        label.setStyle("-fx-line-spacing: 1em;");

        stage.setScene(new Scene(label));
        stage.show();
    }
}
4
8/14/2013 10:23:51 PM

Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow
Icon