A DESCRIPTION OF THE PROBLEM :
By using of a base.css with .root -> -fx-font-size = n and different padding/spacing/insets/radius/min/max/pref/etc-sizes + -fx-font-size in âemâ allows to have root-font-size depending controls in a JavaFX application. For example for a button:
.root {
-fx-font-size: 14px;
}
.button {
-fx-font-family: "Arial";
-fx-font-weight: bold;
-fx-font-size: 2em;
-fx-min-width: 10em;
-fx-max-width: 10em;
-fx-pref-width: 10em;
-fx-min-height: 10em;
-fx-max-height: 10em;
-fx-pref-height: 10em;
}
If to change
.root {
-fx-font-size: 12px;
}
The javafx-scene will adapt proportional.
And it allows to simulate a zooming/scaling of the javafx-scene via adding of several zoom_x.css to the JavaFX Scene/Parent Stylesheets like:
zoom_65.css:
.root {
-fx-font-size: 9;
}
zoom_85.css:
.root {
-fx-font-size: 12;
}
zoom_150.css:
.root {
-fx-font-size: 21;
}
zoom_200.css:
.root {
-fx-font-size: 28;
}
But the behavior in this case with a button is different as expected â the font-size of the button-text is adapted proportional, but the min/max/pref-sizes remain the same and still be unchanged.
The reason in the:
.button -fx-font-size: 2em;
Because the javafx.scene.CssStyleHelper has in the code-line 1388:
boolean isFontProperty = "-fx-font".equals(property) || "-fx-font-size".equals(property);
then 1392:
boolean isRelative = ParsedValueImpl.containsFontRelativeSize(resolved, isFontProperty);
and 1444:
// did we get a fontValue from the preceding block?
// if not, get it from our cacheEntry or choose the default
if (fontForFontRelativeSizes == null) {
if (fontFromCacheEntry != null && fontFromCacheEntry.isRelative() == false) {
fontForFontRelativeSizes = (Font)fontFromCacheEntry.getValue();
} else {
fontForFontRelativeSizes = Font.getDefault();
}
}
It means, for the -fx-font-size: 2em; it is isFontProperty and isRelative, therefore will be recalculated according the actual .root -fx-font-size from a zoom_xyz.css.
But for the -fx-min-width: 10em; it is NOT isFontProperty, but isRelative, and for recalculating will be used fontForFontRelativeSizes = Font.getDefault();
It is the constant and as default it is 12px for Windows OS and 13px for MacOs.
Therefore, the button size remains the same.
These all padding/spacing/insets/radius/min/max/pref/etc-sizes must be based on a current .root -> -fx-font-size and recalculated.
CUSTOMER SUBMITTED WORKAROUND :
To define a .control the -fx-font-size: XXXem; deeply, for example for .text like:
.button {
-fx-font-family: "Arial";
-fx-font-weight: bold;
-fx-min-width: 10em;
-fx-max-width: 10em;
-fx-pref-width: 10em;
-fx-min-height: 10em;
-fx-max-height: 10em;
-fx-pref-height: 10em;
}
.button .text {
-fx-font-size: 2em;
}
Then the -fx-font-size: 2em; belongs only to the .text-class and doesnât influence on the higher .button-class.
FREQUENCY : always