JavaFX: Décalage étrange pour certaines polices sur les étiquettes


Sur un programme javafx, j'ai une étiquette, disons:

<Label style="-fx-font: 25px 'Tahoma';" text="Hello World!!" />

J'ai été demandé par le concepteur de changer la famille de polices, assez facile (je pensais):

<Label style="-fx-font: 25px 'Algerian';" text="Hello World!!" />

Le problème est que la nouvelle police s'affiche à l'écran avec un décalage impair qui fait apparaître le texte un peu plus haut et gâche ainsi le design.

Voici un Exemple de sortie de deux étiquettes côte à côte, l'étiquette gauche a la police Tahoma et semble OK, tandis que l'étiquette droite a la police 'HelveticaNeue' et est beaucoup plus élevée que base.

J'ai résolu partiellement le problème en utilisant des composants Text pour remplacer les composants Label par l'attribut boundsType défini sur "VISUAL" au lieu du "LOGICAL"par défaut.

<Text boundsType="VISUAL" style="-fx-font-family: 'Algerian'; -fx-font-size: 25px;" text="Hellow World!!" />

Mais il ne sera pas agréable de changer l'étiquette de tout le système en composants de texte et il y a des étiquettes à l'intérieur des boutons et d'autres composants où le même problème se présente et serait difficile à remplacer.

Est-ce un problème avec ces polices? Certaines polices fonctionnent bien (Arial, Lucida Sans, MS Sans Serif), tandis que d'autres montrent ce comportement (Algerian, Helvetica). J'ai ces polices installées sur le système d'exploitation et je peux même les utiliser dans MS Word sans afficher ces décalages.

Existe - t-il une option sur le composant Label qui fait la même chose que l'attribut boundsType du composant Text?

J'espère que quelqu'un sait ce qui se passe, merci à l'avance.

Author: shoguren, 2013-10-10

1 answers

Solution Suggérée

Vous devez probablement définir un alignement de base (par exemple Pos.BASELINE_LEFT ) pour tout conteneur que vos étiquettes sont placées à l'intérieur.

Schéma Explicatif

L'image ci-dessous montre deux HBoxes différentes l'une est colorée en bleu pâle, l'autre en vert pâle. La boîte supérieure a un alignement de TOP_LEFT et le bas de BASELINE_LEFT. À l'intérieur de chacune des boîtes se trouvent deux étiquettes bordées de rouge dans des polices à 30 points. Le la première étiquette de chaque boîte est dans la police système (Mac) et la deuxième est dans Helvetica. Comme vous pouvez le voir, lorsque l'alignement est sur la ligne de base puis la base de la police Helvetica lignes jusqu'à la base de la police Système.

fontdemo

Exemple FXML

Voici un fichier FXML, que vous pouvez charger dans SceneBuilder, pour produire l'image ci-dessus.

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.text.Font?>

<StackPane id="StackPane" style="-fx-background-color: cornsilk;" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/2.2">
  <children>
    <VBox alignment="TOP_LEFT" spacing="10.0">
      <children>
        <Label text="HBox Alignment - TOP_LEFT" />
        <HBox alignment="TOP_LEFT" spacing="5.0" style="-fx-background-color: lightblue;">
          <children>
            <Label style="-fx-border-color: red;" text="System">
              <font>
                <Font size="30.0" fx:id="x1" />
              </font>
            </Label>
            <Label style="-fx-border-color:red;" text="Helvetica">
              <font>
                <Font name="Helvetica" size="30.0" fx:id="x2" />
              </font>
            </Label>
          </children>
        </HBox>
        <Separator prefWidth="200.0" />
        <Label text="HBox Alignment - BASELINE_LEFT" />
        <HBox alignment="BASELINE_LEFT" spacing="5.0" style="-fx-background-color: palegreen;">
          <children>
            <Label font="$x1" style="-fx-border-color:red;" text="System" />
            <Label font="$x2" style="-fx-border-color:red;" text="Helvetica" />
          </children>
        </HBox>
      </children>
    </VBox>
  </children>
  <padding>
    <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
  </padding>
</StackPane>
 1
Author: jewelsea, 2013-10-11 05:39:35