Details
Description
ADDITIONAL SYSTEM INFORMATION :
openjdk version "17.0.6" 2023-01-17
OpenJDK Runtime Environment (build 17.0.6+10)
OpenJDK 64-Bit Server VM (build 17.0.6+10, mixed mode, sharing)
macOS Monterey 12.6.3
A DESCRIPTION OF THE PROBLEM :
WebView incorrectly renders left and right text when emoji characters are included.
This problem did not occur in the OpenJFX master snapshot of 2022-08-29.
STEPS TO FOLLOW TO REPRODUCE THE PROBLEM :
launch the attached test app.
EXPECTED VERSUS ACTUAL BEHAVIOR :
EXPECTED -
The text on the left and right side of the emoji is rendered.
ACTUAL -
The text on the left and right side of the emoji is not rendered. Or, rendering is corrupted.
---------- BEGIN SOURCE ----------
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.SplitPane;
import javafx.scene.layout.VBox;
import javafx.scene.text.Font;
import javafx.scene.web.WebView;
import javafx.stage.Stage;
import netscape.javascript.JSObject;
public class WebViewEmojiTest extends Application{
@Override
public void init() throws Exception {
Font font = Font.font("Apple Color Emoji");
System.out.println("font-name:"+font.getFamily());
}
@Override
public void start(Stage primaryStage) throws Exception {
WebView webView = new WebView();
SplitPane root = new SplitPane();
root.getItems().add(webView);
root.getItems().add(new VBox(
new Label("😄EMOJI"),
new Label("EMOJI😄")
));
webView.getEngine().documentProperty().addListener((ob, oldValue, newValue)->{
// Workaround for problem with loadContent() method not handling surrogate pairs correctly.
JSObject body = (JSObject)webView.getEngine().executeScript("document.body");
body.setMember(
"innerHTML",
testHtmlFragment
);
});
Scene scene = new Scene(root, 600, 600);
primaryStage.setScene(scene);
primaryStage.show();
webView.getEngine().loadContent(html);
}
public static void main(String[] args) {
Application.launch(args);
}
String html = "<html>\n" +
"<head>\n" +
"</head>\n" +
"</html>";
String testHtmlFragment =
"<h2>Error case</h2>" +
"<div>😄EMOJI</div>" +
"<div>EMOJI😄</div>" +
"<div><button>😄EMOJI</button></div>" +
"<div><button>EMOJI😄</button></div>" +
"<textarea>😄EMOJI\nEMOJI😄</textarea>" +
"<h2>Workarround</h2>" +
"<div><span>😄</span>EMOJI</div>"+
"<div>EMOJI<span>😄</span></div>"+
"<div><button><span>😄</span>EMOJI</button></div>"+
"<div><button>EMOJI<span>😄</span></button></div>"
;
}
---------- END SOURCE ----------
CUSTOMER SUBMITTED WORKAROUND :
* Enclose emoji characters in span tags.
* The sample code also uses a workaround for a problem with loadContent not rendering surrogate pair characters correctly. This problem is being addressed by inserting html fragments in executeScript.
FREQUENCY : always
openjdk version "17.0.6" 2023-01-17
OpenJDK Runtime Environment (build 17.0.6+10)
OpenJDK 64-Bit Server VM (build 17.0.6+10, mixed mode, sharing)
macOS Monterey 12.6.3
A DESCRIPTION OF THE PROBLEM :
WebView incorrectly renders left and right text when emoji characters are included.
This problem did not occur in the OpenJFX master snapshot of 2022-08-29.
STEPS TO FOLLOW TO REPRODUCE THE PROBLEM :
launch the attached test app.
EXPECTED VERSUS ACTUAL BEHAVIOR :
EXPECTED -
The text on the left and right side of the emoji is rendered.
ACTUAL -
The text on the left and right side of the emoji is not rendered. Or, rendering is corrupted.
---------- BEGIN SOURCE ----------
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.SplitPane;
import javafx.scene.layout.VBox;
import javafx.scene.text.Font;
import javafx.scene.web.WebView;
import javafx.stage.Stage;
import netscape.javascript.JSObject;
public class WebViewEmojiTest extends Application{
@Override
public void init() throws Exception {
Font font = Font.font("Apple Color Emoji");
System.out.println("font-name:"+font.getFamily());
}
@Override
public void start(Stage primaryStage) throws Exception {
WebView webView = new WebView();
SplitPane root = new SplitPane();
root.getItems().add(webView);
root.getItems().add(new VBox(
new Label("😄EMOJI"),
new Label("EMOJI😄")
));
webView.getEngine().documentProperty().addListener((ob, oldValue, newValue)->{
// Workaround for problem with loadContent() method not handling surrogate pairs correctly.
JSObject body = (JSObject)webView.getEngine().executeScript("document.body");
body.setMember(
"innerHTML",
testHtmlFragment
);
});
Scene scene = new Scene(root, 600, 600);
primaryStage.setScene(scene);
primaryStage.show();
webView.getEngine().loadContent(html);
}
public static void main(String[] args) {
Application.launch(args);
}
String html = "<html>\n" +
"<head>\n" +
"</head>\n" +
"</html>";
String testHtmlFragment =
"<h2>Error case</h2>" +
"<div>😄EMOJI</div>" +
"<div>EMOJI😄</div>" +
"<div><button>😄EMOJI</button></div>" +
"<div><button>EMOJI😄</button></div>" +
"<textarea>😄EMOJI\nEMOJI😄</textarea>" +
"<h2>Workarround</h2>" +
"<div><span>😄</span>EMOJI</div>"+
"<div>EMOJI<span>😄</span></div>"+
"<div><button><span>😄</span>EMOJI</button></div>"+
"<div><button>EMOJI<span>😄</span></button></div>"
;
}
---------- END SOURCE ----------
CUSTOMER SUBMITTED WORKAROUND :
* Enclose emoji characters in span tags.
* The sample code also uses a workaround for a problem with loadContent not rendering surrogate pair characters correctly. This problem is being addressed by inserting html fragments in executeScript.
FREQUENCY : always
Attachments
Issue Links
- relates to
-
JDK-8290866 Apple Color Emoji turns gray after JavaFX version 18
-
- Resolved
-
-
-
- Open
-
- links to
-
Review
openjdk/jfx/1083