The <length>
CSS data type represents a one-dimensional distance. As one of the most common units in JavaFX CSS, it’s used widely across CSS properties such as -fx-pref-width
, -fx-pref-height
, -fx-border-width
, -fx-border-insets
In most cases, the <length>
can be substituted for a measurement in the <percentage>
data type. JavaFX refers to this interchangeable data type as <size>
, which is similar to the web-CSS data type <length-percentage>
When defining a <length>
, developers must specify a <number>
optionally followed by a unit. If no unit is specified, the unit px
is assumed.
Units
The <length>
JavaFX CSS data type does not fully support all units commonly found in web CSS. As of JavaFX 15, acceptable units are:
Relative units
px
– Pixelsem
– The calculated font size of the elementex
– The height of the letter ‘x’ (often 0.5em) in the current font
Absolute units units
in
– One inch (2.54cm
cm
– One centimetre (10mm
)mm
– One millimetre (1/10th of1cm
pt
– One point (1/72nd of1in
)pc
– One pica (12pt
)
Syntax
/* Absolute Sizes */
5px Pixels
/* Common for fonts */
1em Font sizes relative to calculated size of element
2ex Relative to "x" in this font and calculated font size
12pt Absolute font sizes
1px Absolute font size (but 12 times larger)
/* Measured distances */
5in Inches
7cm Centimetres
75mm Millimetres
Values
The JavaFX CSS interpreter isn’t a fully-compliant CSS Interpreter, nor does it support all CSS-values you might expect for the related CSS property.
<length>
can have the following values:
Units | Description |
---|---|
px | Pixels usually correspond to one device pixel. Although with high-resolution screens, one pixel can actually correspond to multiple device-pixels |
em | A unit of length relative to the width of the letter “m” in the current font at the calculated font size for the element.If used on -fx-font-size, it corresponds to the inherited font size of the element. |
ex | A unit of length relative to the width of the letter “x” in the current font at the calculated font size for the element.If used on -fx-font-size, it corresponds to the inherited font size of the element. |
in | One inch, corresponding to 96pt , or 2.54cm |
cm | One centimetre corresponds to 10mm |
mm | One millimetre corresponds to 1/10th of 1cm and approximately 3.8pt |
pt | One point corresponds to 1/72nd of 1in |
pc | One pica corresponds to 12pt |
Example

CSS:
.content{
-fx-font-size: 0.9pc; /* Font sized defined in picas */
-fx-pref-width: 150; /* No unit, px assumed */
-fx-pref-height: 100px; /* Length defined in pixels */
}
.label{
-fx-font-size: 1.2em; /* Font size in em */
-fx-background-color: #fcc200;
-fx-font-weight: bold;
}
FXML:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.geometry.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<VBox alignment="TOP_CENTER" prefHeight="250.0" prefWidth="300" spacing="25.0" stylesheets="@../css/styles.css"
xmlns="http://javafx.com/javafx/10.0.2-internal">
<Label alignment="CENTER" maxWidth="300" text="1em font size here!" />
<Slider />
<TextArea styleClass="content" text="This area is 150px wide and 100px tall. It has a font size of 0.3 pica, corresponding to 12 pt." wrapText="true" />
<padding>
<Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
</padding>
</VBox>