CODEWITHSUNDEEP
javahtmlcssjavafxwebview
Xirema
Xirema

Reputation: 20396

JavaFX WebView doesn't Render CSS/HTML Text Correctly

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:

Something super controversial

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:

Now with Controversial Content Censored!

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?

Upvotes: 0

Views: 1970

Answers (1)

n247s
n247s

Reputation: 1912

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.

Upvotes: 1

Related Questions