Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

how to set line-spacing #1190

Open
impactCn opened this issue Oct 2, 2023 · 5 comments
Open

how to set line-spacing #1190

impactCn opened this issue Oct 2, 2023 · 5 comments

Comments

@impactCn
Copy link
Contributor

impactCn commented Oct 2, 2023

  • [ Y ] Already google
  • [ Y ] Already chatgpt
  • [ Y ] Already check issue
  • [ Y ] Already stackoverflow

Expected Behavior

Line-spacing to bigger

Actual Behavior

image

no change

Reproducible Demo

Provide a demo that maintainers of this project can copy, paste, and run to reproduce it immediately.

Use the following template to get started.

    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void start(Stage primaryStage) {
        primaryStage.setTitle("Example");

        CodeArea codeArea = new CodeArea();

        Scene scene = new Scene(codeArea, 400, 300);
        scene.getStylesheets().add(getClass().getResource("styles.css").toExternalForm());
        primaryStage.setScene(scene);
        primaryStage.show();

    }

styles

.paragraph-box {
    -fx-line-spacing: 40;
}

.code-area {

    -fx-line-spacing: 35;
}

.text {
    -fx-line-spacing: 5;
}

.paragraph-text {
    -fx-line-spacing: 20;
}


.paragraph-box {
    -fx-padding: 30 30 30 30;
}

Environment info:

  • RichTextFX Version: 0.11.1
  • Operating System: windows 10
  • Java version: 17

How should I modify line-spacing?

@Jugen
Copy link
Collaborator

Jugen commented Oct 2, 2023

See RichTextFX CSS Reference Guide, and try:

.paragraph-text {
    -fx-line-spacing: <number>;
}

@impactCn
Copy link
Contributor Author

impactCn commented Oct 2, 2023

Hi jugen.
image
seem no change.

@Jugen
Copy link
Collaborator

Jugen commented Oct 13, 2023

The problem seems to be that the "styled-text-area.css" file inside the richtextfx jar file overrides any user css settings.
I've removed the default linespacing in the attached richtextfx-fat-0.11.1.zip file (just rename zip to jar).

Then use the following in your CSS file and it should work:

.paragraph-text {
    -fx-line-spacing: 20;
}

@Jugen
Copy link
Collaborator

Jugen commented Oct 13, 2023

Here's a better work-around:

codeArea.setId( "myarea" );
#myarea .paragraph-text {
    -fx-line-spacing: 10;
}

Explanation: CSS is applied from least specific to most specific, with the most specific selector overriding the lesser.
Since the default CSS in "styled-text-area.css" for -fx-line-spacing is already highly specified as .styled-text-area .paragraph-box .paragraph-text we need to use the Node Id specifier to override it.

@impactCn
Copy link
Contributor Author

Thank you Jugen, I'll try it after get off work.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants