RichTextArea: how to set wavy underline using CSS?

[Andy Goryachev]

Thank you, Pavel, for clarification!

So the use case is merely to style using CSS, but not to define the new and custom ways to render the wavy underline?  In other words, it might be ok to provide a limited set of text decorations (e.g.: solid | double | dotted | dashed | wavy) and allow the model to set style for the color?

I am also curious as to why RichTextFX project provide the capability for -rtfx-underline-wave-radius: <size>; - I mean, what value could that possibly have in terms of the visual difference?

-andy



From: openjfx-dev <openjfx-dev-retn at openjdk.org> on behalf of PavelTurk <pavelturk2000 at gmail.com>
Date: Monday, April 28, 2025 at 08:57
To: openjfx-dev at openjdk.org <openjfx-dev at openjdk.org>
Subject: Re: RichTextArea: how to set wavy underline using CSS?
Hello, Andy. Thank you for your reply.

I'm working on a project that uses two CodeAreas—one from the RichTextFX project and one from JFX.
I can't provide more details yet, but I promise to share a link once it's ready :)

However, this isn't really the main point. There are two ways to handle styling—via CSS and via code. CSS styling
is always more convenient and preferable since it's an established standard. For example, since my project
involves two CodeAreas, I need to unify their styling approach (using style classes).

Just imagine—for the RTFX CodeArea, a user can use classic CSS, but for the JFX CodeArea, they'd have to come
up with some non-standard approach that would break the whole architecture, relying on workarounds.

That's why I suggest to add wavy underline support to JFX CodeArea. Compare:

Web CSS: text-decoration-style: wavy;
RTFX CSS: -rtfx-underline-wave-radius: <size>;
JFX CSS: It’s not that simple

Best regards, Pavel
On 4/28/25 18:36, Andy Goryachev wrote:
An interesting question.

Currently, the shape for a wavy underline is created programmatically, see HighlightShape::generateSquiggly().  It is unclear how to enable CSS styling - for example, the model may decide to provide more than one color.  It is also unclear how to generate the necessary path via CSS (it is currently a Path with a sawtooth line segments generated from the underline shape provided by the text layout).

If you are satisfied with the wavy line shape itself and just want to set the color via CSS - that should be easy (you just identified a missing API - there is RichParagraph.Builder.addWavyUnderline(int start, int end, Color color), but not RichParagraph.Builder.addWavyUnderline(int start, int end, String ... styles).

And we have a similar situation with the similar method RichParagraph.Builder.addHighlight().

Could you describe your use case in more detail please?

-andy


From: openjfx-dev <openjfx-dev-retn at openjdk.org><mailto:openjfx-dev-retn at openjdk.org> on behalf of PavelTurk <pavelturk2000 at gmail.com><mailto:pavelturk2000 at gmail.com>
Date: Sunday, April 27, 2025 at 11:27
To: openjfx-dev at openjdk.org<mailto:openjfx-dev at openjdk.org> <openjfx-dev at openjdk.org><mailto:openjfx-dev at openjdk.org>
Subject: RichTextArea: how to set wavy underline using CSS?
RichParagraph.Builder has public RichParagraph.Builder addWavyUnderline(int start, int length, Color color) method.

However, I can't find a way how to make a wavy underline via CSS. It is very important for me because I want to make all styling via CSS -
I don't want to make users use different mechanisms  for styling (CSS,  code).

Fox example, RichTextFX contains the following rules:

     /* the color of the underline */
     -rtfx-underline-color: <paint>;

     /* the radius used to create waved underline */
     -rtfx-underline-wave-radius: <size>;

Could anyone say how to do it in JFX RichTextArea?

Best regards, Pavel

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://mail.openjdk.org/pipermail/openjfx-dev/attachments/20250428/249ea519/attachment.htm>