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 – Pixels
  • em – The calculated font size of the element
  • ex – 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 of 1cm
  • pt – One point (1/72nd of 1in)
  • 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:

UnitsDescription
pxPixels usually correspond to one device pixel. Although with high-resolution screens, one pixel can actually correspond to multiple device-pixels
emA 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.
exA 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.
inOne inch, corresponding to 96pt, or 2.54cm
cmOne centimetre corresponds to 10mm
mmOne millimetre corresponds to 1/10th of 1cm and approximately 3.8pt
ptOne point corresponds to 1/72nd of 1in
pcOne pica corresponds to 12pt

Example

The length data type can be used to define node dimensions as well as font sizes.

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>

See Also