<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1252">
<meta name="Generator" content="Microsoft Word 15 (filtered medium)">
<style><!--
/* Font Definitions */
@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;}
/* Style Definitions */
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.EmailStyle200
{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;}
@page WordSection1
{size:8.5in 11.0in;
margin:1.0in 1.0in 1.0in 1.0in;}
div.WordSection1
{page:WordSection1;}
--></style>
</head>
<body lang="EN-US" link="blue" vlink="purple" style="word-wrap:break-word">
<div class="WordSection1">
<p class="MsoNormal"><span style="font-size:11.0pt;font-family:"Iosevka Fixed SS16"">I've created
<a href="https://bugs.openjdk.org/browse/JDK-8355774">https://bugs.openjdk.org/browse/JDK-8355774</a> to deal with this enhancement. Feel free to add your comments.<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"">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).<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"">-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 <openjfx-dev-retn@openjdk.org> on behalf of PavelTurk <pavelturk2000@gmail.com><br>
<b>Date: </b>Monday, April 28, 2025 at 10:45<br>
<b>To: </b>openjfx-dev@openjdk.org <openjfx-dev@openjdk.org><br>
<b>Subject: </b>Re: RichTextArea: how to set wavy underline using CSS?<o:p></o:p></span></p>
</div>
<p class="MsoNormal"><span style="font-size:12.0pt"><o:p> </o:p></span></p>
<div>
<p class="MsoNormal"><span style="font-size:12.0pt">On 4/28/25 20:00, 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"">Thank you, Pavel, for clarification!</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"">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><o:p></o:p></p>
</div>
</blockquote>
<p class="MsoNormal"><span style="font-size:12.0pt"><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 = <span class="MsoHyperlink">"data:text/css,"</span> + ".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 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><span style="font-size:11.0pt;font-family:"Iosevka Fixed SS16"">
<br>
<br>
</span><span style="font-size:12.0pt"><o:p></o:p></span></p>
<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"">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?</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>
</blockquote>
<p class="MsoNormal"><span style="font-size:12.0pt">This is the same RTFX code only with wave radius 10 - see
<a 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>
<br>
<o:p></o:p></span></p>
<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"">-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>
<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">
<openjfx-dev-retn@openjdk.org></a> on behalf of PavelTurk <a 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 href="mailto:openjfx-dev@openjdk.org">openjfx-dev@openjdk.org</a> <a href="mailto:openjfx-dev@openjdk.org">
<openjfx-dev@openjdk.org></a><br>
<b>Subject: </b>Re: RichTextArea: how to set wavy underline using CSS?</span><o:p></o:p></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</span><o:p></o:p></p>
<div>
<p class="MsoNormal"><span style="font-size:12.0pt">On 4/28/25 18:36, Andy Goryachev wrote:</span><o:p></o:p></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">
<openjfx-dev-retn@openjdk.org></a> on behalf of PavelTurk <a href="mailto:pavelturk2000@gmail.com">
<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">openjfx-dev@openjdk.org</a> <a href="mailto:openjfx-dev@openjdk.org">
<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"> </span><o:p></o:p></p>
</div>
</div>
</div>
</div>
</blockquote>
<p class="MsoNormal"><span style="font-size:12.0pt"><o:p> </o:p></span></p>
</div>
</div>
</div>
</div>
</body>
</html>