FXMisc / RichTextFX

Rich-text area for JavaFX
BSD 2-Clause "Simplified" License
1.21k stars 237 forks source link

Question: How to make wave underline? #1225

Closed PavelTurk closed 4 months ago

PavelTurk commented 4 months ago

Could anyone say how to make wave underline? I mean something like this

Screenshot from 2024-05-14 18-05-05

Jugen commented 4 months ago

See the following CSS in the Wiki

-rtfx-underline-color: red;
-rtfx-underline-wave-radius: 2;
-rtfx-underline-width: 1;
PavelTurk commented 4 months ago

@Jugen I am trying to make text waved, but something doesn't work. It seems that code doesn't react to rtfx-underline-wave-radius and -rtfx-underline-offset at all. This is my code:

public class JavaFxTest7 extends Application {

    @Override
    public void start(Stage stage) {
        CodeArea codeArea = new CodeArea("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.");
        codeArea.setWrapText(true);
        var addButton = new Button("Add");
        var removeButton = new Button("Remove");
        Scene scene = new Scene(new VBox(codeArea, addButton, removeButton), 600, 200);
        scene.getStylesheets().add(XMLEditorDemo.class.getResource("test7.css").toExternalForm());
        stage.setScene(scene);
        stage.show();

        var newStyles = new StyleSpansBuilder<Collection<String>>();
        newStyles.add(Collections.singleton("misspelled"), 5);
        codeArea.setStyleSpans(6, newStyles.create());
    }

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

And CSS:

.misspelled {
     -rtfx-underline-color: cyan;
    -rtfx-underline-wave-radius: 2;
    -rtfx-underline-width: 1;
    -rtfx-underline-offset: 10;
}

And result:

Screenshot from 2024-05-22 12-46-00

Jugen commented 4 months ago

I tried your demo changing one line and it worked for me.

scene.getStylesheets().add(XMLEditorDemo.class.getResource("test7.css").toExternalForm());

Where I changed XMLEditorDemo.class to JavaFxTest7.class

PavelTurk commented 4 months ago

@Jugen Yes, my fault, I used 0.10.9 version in my test project. The code I provided above works only with 0.11.0+