<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<br>
<div class="moz-cite-prefix">On 4/28/25 20:00, Andy Goryachev wrote:<br>
</div>
<blockquote type="cite"
cite="mid:BYAPR10MB30131FDA00483F1BF2A7F46AE5812@BYAPR10MB3013.namprd10.prod.outlook.com">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="Generator"
content="Microsoft Word 15 (filtered medium)">
<style>@font-face
{font-family:"Cambria Math";
panose-1:2 4 5 3 5 4 6 3 2 4;}@font-face
{font-family:"Yu Gothic";
panose-1:2 11 4 0 0 0 0 0 0 0;}@font-face
{font-family:Aptos;
panose-1:2 11 0 4 2 2 2 2 2 4;}@font-face
{font-family:"Iosevka Fixed SS16";
panose-1:2 0 5 9 3 0 0 0 0 4;}@font-face
{font-family:"Times New Roman \(Body CS\)";
panose-1:2 11 6 4 2 2 2 2 2 4;}@font-face
{font-family:"\@Yu Gothic";
panose-1:2 11 4 0 0 0 0 0 0 0;}p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0in;
font-size:10.0pt;
font-family:"Aptos",sans-serif;}a:link, span.MsoHyperlink
{mso-style-priority:99;
color:blue;
text-decoration:underline;}span.EmailStyle20
{mso-style-type:personal-reply;
font-family:"Iosevka Fixed SS16";
color:windowtext;}.MsoChpDefault
{mso-style-type:export-only;
font-size:10.0pt;
mso-ligatures:none;}div.WordSection1
{page:WordSection1;}</style>
<div class="WordSection1">
<p class="MsoNormal"><span
style="font-size:11.0pt;font-family:"Iosevka Fixed SS16"">Thank
you, Pavel, for clarification!<o:p></o:p></span></p>
<p class="MsoNormal"><span
style="font-size:11.0pt;font-family:"Iosevka Fixed SS16""><o:p> </o:p></span></p>
<p class="MsoNormal"><span
style="font-size:11.0pt;font-family:"Iosevka Fixed SS16"">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?</span></p>
</div>
</blockquote>
<br>
I think it depends on technical capabilities. Of course, if it were
possible to adjust the wave radius, that would be great. <br>
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.<br>
<br>
Web CSS:<br>
<div class="test">Test text</div><br>
div.test {<br>
text-decoration-line: underline;<br>
text-decoration-style: wavy;<br>
text-decoration-color: red;<br>
text-underline-offset: 10px;<br>
text-decoration-thickness: 3px;<br>
}<br>
<br>
RTFX CSS:<br>
var codeArea = new CodeArea();<br>
var styles = <a class="moz-txt-link-rfc2396E" href="data:text/css,">"data:text/css,"</a> + ".test {
-rtfx-underline-color: red;-rtfx-underline-width: 5px;"<br>
+ "-rtfx-underline-wave-radius:
5;-rtfx-underline-offset: 10px;}";<br>
codeArea.getStylesheets().add(styles);<br>
codeArea.append("AAAAAAAAAAAAAAAAAAAAAAAAA\n", "test");<br>
<br>
See result here: <a class="moz-txt-link-freetext" href="https://ibb.co/wNjWGVrK">https://ibb.co/wNjWGVrK</a><br>
<br>
So, in web 3 properties - color, width, offset; in RTFX 4 properties
- color, width, offset, radius. <br>
<br>
I think if initial support is added for these three properties
first, that would already make a good solution. <br>
At the same time, wave radius adjustment could be left for the
future. Another variant is to add only color<br>
first, leaving all others for the future.<span
style="font-size:11.0pt;font-family:"Iosevka Fixed SS16""><o:p>
<br>
</o:p></span>
<blockquote type="cite"
cite="mid:BYAPR10MB30131FDA00483F1BF2A7F46AE5812@BYAPR10MB3013.namprd10.prod.outlook.com">
<div class="WordSection1">
<p class="MsoNormal"><span
style="font-size:11.0pt;font-family:"Iosevka Fixed SS16"">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?<o:p></o:p></span></p>
<p class="MsoNormal"><span
style="font-size:11.0pt;font-family:"Iosevka Fixed SS16""><o:p> </o:p></span></p>
</div>
</blockquote>
This is the same RTFX code only with wave radius 10 - see
<a class="moz-txt-link-freetext" href="https://ibb.co/35CLrJZY">https://ibb.co/35CLrJZY</a><br>
<br>
To set wave radius is important because, for example, default radius
in JFX CodeArea <br>
I find too small, for example, I would increase it by 1 or 2. You
can compare it to the default<br>
web wave radius.<br>
<br>
Best regards, Pavel<br>
<br>
<blockquote type="cite"
cite="mid:BYAPR10MB30131FDA00483F1BF2A7F46AE5812@BYAPR10MB3013.namprd10.prod.outlook.com">
<div class="WordSection1">
<p class="MsoNormal"><span
style="font-size:11.0pt;font-family:"Iosevka Fixed SS16"">-andy<o:p></o:p></span></p>
<p class="MsoNormal"><span
style="font-size:11.0pt;font-family:"Iosevka Fixed SS16""><o:p> </o:p></span></p>
<p class="MsoNormal"><span
style="font-size:11.0pt;font-family:"Iosevka Fixed SS16""><o:p> </o:p></span></p>
<p class="MsoNormal"><span
style="font-size:11.0pt;font-family:"Iosevka Fixed SS16""><o:p> </o:p></span></p>
<div id="mail-editor-reference-message-container">
<div>
<div>
<div
style="border:none;border-top:solid #B5C4DF 1.0pt;padding:3.0pt 0in 0in 0in">
<p class="MsoNormal" style="margin-bottom:12.0pt"><b><span
style="font-size:12.0pt;color:black">From:
</span></b><span
style="font-size:12.0pt;color:black">openjfx-dev
<a class="moz-txt-link-rfc2396E" href="mailto:openjfx-dev-retn@openjdk.org"><openjfx-dev-retn@openjdk.org></a> on behalf of
PavelTurk <a class="moz-txt-link-rfc2396E" href="mailto:pavelturk2000@gmail.com"><pavelturk2000@gmail.com></a><br>
<b>Date: </b>Monday, April 28, 2025 at 08:57<br>
<b>To: </b><a class="moz-txt-link-abbreviated" href="mailto:openjfx-dev@openjdk.org">openjfx-dev@openjdk.org</a>
<a class="moz-txt-link-rfc2396E" href="mailto:openjfx-dev@openjdk.org"><openjfx-dev@openjdk.org></a><br>
<b>Subject: </b>Re: RichTextArea: how to set wavy
underline using CSS?<o:p></o:p></span></p>
</div>
<p class="MsoNormal" style="margin-bottom:12.0pt"><span
style="font-size:12.0pt">Hello, Andy. Thank you for
your reply.<br>
<br>
I'm working on a project that uses two CodeAreas—one
from the RichTextFX project and one from JFX.
<br>
I can't provide more details yet, but I promise to
share a link once it's ready :)<br>
<br>
However, this isn't really the main point. There are
two ways to handle styling—via CSS and via code. CSS
styling
<br>
is always more convenient and preferable since it's an
established standard. For example, since my project
<br>
involves two CodeAreas, I need to unify their styling
approach (using style classes).<br>
<br>
Just imagine—for the RTFX CodeArea, a user can use
classic CSS, but for the JFX CodeArea, they'd have to
come
<br>
up with some non-standard approach that would break
the whole architecture, relying on workarounds.<br>
<br>
That's why I suggest to add wavy underline support to
JFX CodeArea. Compare:<br>
<br>
Web CSS: text-decoration-style: wavy;<br>
RTFX CSS: -rtfx-underline-wave-radius: <size>;<br>
JFX CSS: It’s not that simple<br>
<br>
Best regards, Pavel<o:p></o:p></span></p>
<div>
<p class="MsoNormal"><span style="font-size:12.0pt">On
4/28/25 18:36, Andy Goryachev wrote:<o:p></o:p></span></p>
</div>
<blockquote style="margin-top:5.0pt;margin-bottom:5.0pt">
<div>
<p class="MsoNormal"><span
style="font-size:11.0pt;font-family:"Iosevka Fixed SS16"">An
interesting question.</span><o:p></o:p></p>
<p class="MsoNormal"><span
style="font-size:11.0pt;font-family:"Iosevka Fixed SS16""> </span><o:p></o:p></p>
<p class="MsoNormal"><span
style="font-size:11.0pt;font-family:"Iosevka Fixed SS16"">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).</span><o:p></o:p></p>
<p class="MsoNormal"><span
style="font-size:11.0pt;font-family:"Iosevka Fixed SS16""> </span><o:p></o:p></p>
<p class="MsoNormal"><span
style="font-size:11.0pt;font-family:"Iosevka Fixed SS16"">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).</span><o:p></o:p></p>
<p class="MsoNormal"><span
style="font-size:11.0pt;font-family:"Iosevka Fixed SS16""> </span><o:p></o:p></p>
<p class="MsoNormal"><span
style="font-size:11.0pt;font-family:"Iosevka Fixed SS16"">And
we have a similar situation with the similar
method RichParagraph.Builder.addHighlight().</span><o:p></o:p></p>
<p class="MsoNormal"><span
style="font-size:11.0pt;font-family:"Iosevka Fixed SS16""> </span><o:p></o:p></p>
<p class="MsoNormal"><span
style="font-size:11.0pt;font-family:"Iosevka Fixed SS16"">Could
you describe your use case in more detail please?</span><o:p></o:p></p>
<p class="MsoNormal"><span
style="font-size:11.0pt;font-family:"Iosevka Fixed SS16""> </span><o:p></o:p></p>
<p class="MsoNormal"><span
style="font-size:11.0pt;font-family:"Iosevka Fixed SS16"">-andy</span><o:p></o:p></p>
<p class="MsoNormal"><span
style="font-size:11.0pt;font-family:"Iosevka Fixed SS16""> </span><o:p></o:p></p>
<p class="MsoNormal"><span
style="font-size:11.0pt;font-family:"Iosevka Fixed SS16""> </span><o:p></o:p></p>
<div id="mail-editor-reference-message-container">
<div>
<div>
<div
style="border:none;border-top:solid #B5C4DF 1.0pt;padding:3.0pt 0in 0in 0in">
<p class="MsoNormal"
style="margin-bottom:12.0pt"><b><span
style="font-size:12.0pt;color:black">From:
</span></b><span
style="font-size:12.0pt;color:black">openjfx-dev
<a
href="mailto:openjfx-dev-retn@openjdk.org" moz-do-not-send="true">
<openjfx-dev-retn@openjdk.org></a>
on behalf of PavelTurk <a
href="mailto:pavelturk2000@gmail.com"
moz-do-not-send="true">
<pavelturk2000@gmail.com></a><br>
<b>Date: </b>Sunday, April 27, 2025 at
11:27<br>
<b>To: </b><a
href="mailto:openjfx-dev@openjdk.org"
moz-do-not-send="true"
class="moz-txt-link-freetext">openjfx-dev@openjdk.org</a>
<a href="mailto:openjfx-dev@openjdk.org"
moz-do-not-send="true">
<openjfx-dev@openjdk.org></a><br>
<b>Subject: </b>RichTextArea: how to set
wavy underline using CSS?</span><o:p></o:p></p>
</div>
<div>
<p class="MsoNormal"><span
style="font-size:11.0pt">RichParagraph.Builder
has public RichParagraph.Builder
addWavyUnderline(int start, int length,
Color color) method.<br>
<br>
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 -<br>
I don't want to make users use different
mechanisms for styling (CSS, code).<br>
<br>
Fox example, RichTextFX contains the
following rules:<br>
<br>
/* the color of the underline */<br>
-rtfx-underline-color: <paint>;<br>
<br>
/* the radius used to create waved
underline */<br>
-rtfx-underline-wave-radius:
<size>;<br>
<br>
Could anyone say how to do it in JFX
RichTextArea?<br>
<br>
Best regards, Pavel</span><o:p></o:p></p>
</div>
</div>
</div>
</div>
</div>
</blockquote>
<p class="MsoNormal"><span style="font-size:12.0pt"><o:p> </o:p></span></p>
</div>
</div>
</div>
</div>
</blockquote>
<br>
</body>
</html>