I've created https://bugs.openjdk.org/browse/JDK-8355774 to deal with this
enhancement. Feel free to add your comments.
I guess at the minimum, we should add the missing APIs that enable styling with
the CSS (they are present internally, just not exposed via the
RichParagraph.Builder, my mistake).
-andy
From: openjfx-dev <openjfx-dev-r...@openjdk.org> on behalf of PavelTurk
<pavelturk2...@gmail.com>
Date: Monday, April 28, 2025 at 10:45
To: openjfx-dev@openjdk.org <openjfx-dev@openjdk.org>
Subject: Re: RichTextArea: how to set wavy underline using CSS?
On 4/28/25 20:00, Andy Goryachev wrote:
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 think it depends on technical capabilities. Of course, if it were possible to
adjust the wave radius, that would be great.
On the other hand, as far as I know, this cannot be done in web CSS. Below,
I’ve provided a comparison between web CSS and RTFX CSS.
Web CSS:
<div class="test">Test text</div>
div.test {
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-color: red;
text-underline-offset: 10px;
text-decoration-thickness: 3px;
}
RTFX CSS:
var codeArea = new CodeArea();
var styles = "data:text/css," + ".test { -rtfx-underline-color:
red;-rtfx-underline-width: 5px;"
+ "-rtfx-underline-wave-radius: 5;-rtfx-underline-offset:
10px;}";
codeArea.getStylesheets().add(styles);
codeArea.append("AAAAAAAAAAAAAAAAAAAAAAAAA\n", "test");
See result here: https://ibb.co/wNjWGVrK
So, in web 3 properties - color, width, offset; in RTFX 4 properties - color,
width, offset, radius.
I think if initial support is added for these three properties first, that
would already make a good solution.
At the same time, wave radius adjustment could be left for the future. Another
variant is to add only color
first, leaving all others for the future.
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?
This is the same RTFX code only with wave radius 10 - see
https://ibb.co/35CLrJZY
To set wave radius is important because, for example, default radius in JFX
CodeArea
I find too small, for example, I would increase it by 1 or 2. You can compare
it to the default
web wave radius.
Best regards, Pavel
-andy
From: openjfx-dev
<openjfx-dev-r...@openjdk.org><mailto:openjfx-dev-r...@openjdk.org> on behalf
of PavelTurk <pavelturk2...@gmail.com><mailto:pavelturk2...@gmail.com>
Date: Monday, April 28, 2025 at 08:57
To: openjfx-dev@openjdk.org<mailto:openjfx-dev@openjdk.org>
<openjfx-dev@openjdk.org><mailto:openjfx-dev@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-r...@openjdk.org><mailto:openjfx-dev-r...@openjdk.org> on behalf
of PavelTurk <pavelturk2...@gmail.com><mailto:pavelturk2...@gmail.com>
Date: Sunday, April 27, 2025 at 11:27
To: openjfx-dev@openjdk.org<mailto:openjfx-dev@openjdk.org>
<openjfx-dev@openjdk.org><mailto:openjfx-dev@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
