3 Replies Latest reply: Apr 24, 2013 3:11 AM by jjdiephuis RSS

    Vertical centering of certain fonts.

    jjdiephuis
      I think I have a similar issue to what I read in this forum thread:
      Center a button's graphic

      This seems to be a problem created by certain fonts.

      The following program illustrates this problem:
       import javafx.application.Application;
      import javafx.scene.Scene;
      import javafx.scene.control.Button;
      import javafx.scene.control.Label;
      import javafx.scene.layout.StackPane;
      import javafx.scene.layout.VBox;
      import javafx.stage.Stage;
      
      public class CenterText extends Application {
          public static void main( String[] args ) { Application.launch(args); }
      
          @Override
          public void start(Stage stage) {
      
              // The first button.
              Button button1 = new Button("Calibri jgl");
              button1.setStyle("-fx-font-family: \"Calibri\"; -fx-padding: 10 24 10 24; -fx-font-size: 14;");
      
              Label label1 = new Label("TrebuchetMS jgl");
              label1.setStyle("-fx-font-family: \"Trebuchet MS\"; -fx-font-size: 12;");
      
              button1.setGraphic(label1);
      
              // The second button.
              Button button2 = new Button("TrebuchetMS jgl");
              button2.setStyle("-fx-font-family: \"Trebuchet MS\"; -fx-padding: 10 24 10 24; -fx-font-size: 12;");
      
              Label label2 = new Label("Calibri jgl");
              label2.setStyle("-fx-font-family: \"Calibri\";-fx-font-size: 14;");
      
              button2.setGraphic(label2);
      
              // Add both buttons to the scene.
              StackPane root = new StackPane();
              root.setStyle("-fx-padding: 40px;");
              VBox vbox = new VBox();
              vbox.getChildren().addAll(button1, button2);
              vbox.setSpacing(20);
              root.getChildren().add(vbox);
      
      
              stage.setScene(new Scene(root,300,200));
              stage.show();
          }
      }
      I'm running Win7 64bit and I've included a screenshot with the results I get using the code above. You can see that the text and label using the Calibri font are incorrectly vertically centered (Or at least this seems the be the case visually). While using a label as graphic maybe uncommon, the incorrect vertical centering is of Calibri text is also a problem when using it in combination with image graphics.

      I've found issues that were similar here:
      https://javafx-jira.kenai.com/browse/RT-27807
      Font "Calibri" looks odd

      Screenshot:
      https://www.dropbox.com/s/ekof4m11r9vgsiq/ScreenShot001.png

      Edited by: 1001602 on 22-apr-2013 5:14
      Edited by: 1001602 on 22-apr-2013 5:45

      Edited by: 1001602 on 22-apr-2013 9:04
        • 1. Re: Vertical centering of certain fonts.
          jsmith
          Try Java 8 and see if it renders as you expect.

          I ran your sample app on Win7 + java 7u15 and got the same result you did.

          I ran the same app on the same machine with java 8b83 and the text appeared much better aligned:
          https://jdk8.java.net/download.html

          I don't know the reason for the change.

          Unfortunately, java 8 won't be officially released until a couple of months into the new year.
          • 2. Re: Vertical centering of certain fonts.
            jsmith
            You might also want to try fiddling around with the boundsType property on text to see if that makes a difference for you:

            http://docs.oracle.com/javafx/2/api/javafx/scene/text/Text.html#boundsTypeProperty
            http://docs.oracle.com/javafx/2/api/javafx/scene/text/TextBoundsType.html
            • 3. Re: Vertical centering of certain fonts.
              jjdiephuis
              Thank you for the reply jsmith.

              The problem does seem to be fixed when using java 8b83.

              Screenshot:
              https://www.dropbox.com/s/cac4n6gspb7bh4s/ScreenShot003.png

              Directly applying boundsType to a Label or Button is not possible, instead I tried to add a Text Node as a graphic to labels and buttons and then applying boundsType.VISUAL to this Text Node.
                       // The first button.
                      Button button1 = new Button("Calibri jgl");
                      button1.setStyle("-fx-font-family: \"Calibri\"; -fx-padding: 10 24 10 24; -fx-font-size: 14;");
              
                      Label label1 = new Label();
                      Text text1 = new Text("TrebuchetMS jgl");
                      text1.setBoundsType(TextBoundsType.VISUAL);
                      text1.setStyle("-fx-font-family: \"Trebuchet MS\"; -fx-font-size: 12;");
                      label1.setGraphic(text1);
              
                      button1.setGraphic(label1);
              
                      // The second button.
                      Button button2 = new Button("TrebuchetMS jgl");
                      button2.setStyle("-fx-font-family: \"Trebuchet MS\"; -fx-padding: 10 24 10 24; -fx-font-size: 12;");
              
                      Label label2 = new Label();
                      Text text2 = new Text("Calibri jgl");
                      text2.setBoundsType(TextBoundsType.VISUAL);
                      text2.setStyle("-fx-font-family: \"Calibri\";-fx-font-size: 14;");
                      label2.setGraphic(text2);
              
                      button2.setGraphic(label2);
              The result is shown in this screenshot:
              https://www.dropbox.com/s/unnr3tzca91bmpg/ScreenShot004.png

              As expected the problem is not solved when Calibri is used as the button string, but the vertical centering is fixed when the Calibri is used in the Text Node. However I noticed a small style(?) difference between the string text and Text text. I'm not sure why this is happening.