JavaFX WebView doesn't Render CSS/HTML Text Correctly

Question

As the Title indicates, I'm attempting to write CSS/HTML that will render in a WebView object, but the HTML I'm writing isn't rendering correctly.

This is the sample text I'm using for testing:

test.html

<style>
.rainbow {
  background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
  background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
  color:transparent;
  -webkit-background-clip: text;
  background-clip: text;
}
</style>

<table border=1>
<tr><th>Header 1</th><th>Header 2</th></tr>
<tr><td>Entry 1-1</td><td>Entry 1-2</td></tr>
<tr><td>Entry 2-1</td><td>Entry 2-2</td></tr>
</table>

<p>This is a personal manifesto that I'm going to write here and hope that noone sees it because I'm really not certain that anyone is going to be happy if they see it. Prepare yourself, because this is going to be super controversial and politicial.</p>

*Deep breath*

<h1><span class="rainbow">Big Bang Theory Sucks!</span></h1>

If I just load this into a simple text document .html and load it with my web browser, it works just fine:

However, the following simple JavaFX code renders the html incorrectly:

Main.java

package application;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.control.TextArea;
import javafx.scene.layout.BorderPane;
import javafx.scene.web.WebView;


public class Main extends Application {
    @Override
    public void start(Stage primaryStage) {
        try {
            BorderPane root = FXMLLoader.load(getClass().getResource("/application/WebViewAndTextInput.fxml"));
            Scene scene = new Scene(root,400,400);
            primaryStage.setScene(scene);
            primaryStage.show();

            TextArea textArea = (TextArea) root.getLeft();
            WebView webView = (WebView) root.getRight();
            webView.getEngine().loadContent(textArea.getText());
            textArea.textProperty().addListener((e) -> {
                webView.getEngine().loadContent(textArea.getText());
            });

        } catch(Exception e) {
            e.printStackTrace();
        }
    }

    public static void main(String[] args) {
        launch(args);
    }
}

WebViewAndTextInput.fxml

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.TextArea?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.text.Font?>
<?import javafx.scene.web.WebView?>


<BorderPane prefHeight="450.0" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8.0.111">
   <right>
      <WebView prefHeight="-1.0" prefWidth="400.0" />
   </right>
   <left>
      <TextArea prefWidth="300.0" text="&lt;span style=&quot;color:#ff0000&quot;&gt;Hello World!&lt;/span&gt;" wrapText="true">
         <font>
            <Font name="Courier New" size="14.0" />
         </font>
      </TextArea>
   </left>
</BorderPane>

Result:

This is obviously disastrous, as now, my super controversial opinions are being censored by the incorrectly rendered text! Do I need to make a change to the WebView object to properly render this text, or is this a bug in WebView's rendering engine?

score 1 · Accepted Answer · answered Jun 30 '17 at 21:59

This might be a bug, but it may be in the used userAgent. You can chek your current userAgent by simply printing its information like;

System.out.println(web.getEngine().getUserAgent());

Based on the userAgent you might be able to determine what need to be done to make things work the way you want, and what limitations the current userAgenr has which makes things (not) work they way they do.

As extra, this SO post explains a bit about userAgent retrieval. And this blog post might provide a bit more information and usefull tools on a simular useragent related problem.

JavaFX WebView doesn't Render CSS/HTML Text Correctly

test.html

Main.java

WebViewAndTextInput.fxml

Result:

1 Answers1