P4
Rendering of the pre tag is disturbed case 4 and 5 If you run the test code.
Tab space is ignored in Case 4. It looks like a problem of WebKit origin because it occurs even Opera and Chrome. Tabs are not ignored in Firefox and IE.
Rendering is broken at the level reading is difficult fully in Case 5. This problem does not occur with Opera and Chrome.
It is not a rare case because occurs when using both Google Prettyprint WordPress and widely used.
WordPress have specified the following styles.
body {
font-size: 14px;
font-size: 1rem;
font-family: Helvetica, Arial, sans-serif;
text-rendering: optimizeLegibility;
color: # 444;
}
Test Code:
--- PreTagTest.java ---
import java.net.URI;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.StackPane;
import javafx.scene.web.WebView;
import javafx.stage.Stage;
public class PreTagTest extends Application{
@Override
public void start(Stage stage) throws Exception {
StackPane pane = new StackPane();
WebView browser = new WebView();
URI uri = this.getClass().getResource("/PreTagTest.html").toURI();
browser.getEngine().load(uri.toURL().toString());
pane.getChildren().add(browser);
Scene scene = new Scene(pane);
stage.setScene(scene);
stage.show();
}
public static void main(String[] args) {
CheckboxRadioInputTagTest.launch(args);
}
}
Tab space since have disappeared from the HTML source for the test,
There is a need to modify the tab space of Case2 and Case4.
Is it possible to attach the file for testing?
--- PreTagTest.html ---
<!DOCTYPE html>
<html>
<body>
<h2>Case 1: pre</h2>
<pre>
public static int fibonacci(int n) {
if (n == 0) {
return 0;
} else if (n == 1) {
return 1;
} else {
return fibonacci(n - 1) + fibonacci(n - 2);
}
}
</pre>
<h2>Case 2: pre tab space</h2>
<pre>
public static int fibonacci(int n) {
if (n == 0) {
return 0;
} else if (n == 1) {
return 1;
} else {
return fibonacci(n - 1) + fibonacci(n - 2);
}
}
</pre>
<h2>Case 3: pre style="text-rendering:optimizeLegibility"</h2>
<pre style="text-rendering:optimizeLegibility">
public static int fibonacci(int n) {
if (n == 0) {
return 0;
} else if (n == 1) {
return 1;
} else {
return fibonacci(n - 1) + fibonacci(n - 2);
}
}
</pre>
<h2 style="color:red">Case 4: pre style="text-rendering:optimizeLegibility" tab space</h2>
<pre style="text-rendering:optimizeLegibility">
public static int fibonacci(int n) {
if (n == 0) {
return 0;
} else if (n == 1) {
return 1;
} else {
return fibonacci(n - 1) + fibonacci(n - 2);
}
}
</pre>
<h2 style="color:red">Case 5: pre class="prettyprint" style="text-rendering:optimizeLegibility"</h2>
<pre class="prettyprint" style="text-rendering:optimizeLegibility">
public static int fibonacci(int n) {
if (n == 0) {
return 0;
} else if (n == 1) {
return 1;
} else {
return fibonacci(n - 1) + fibonacci(n - 2);
}
}
</pre>
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script><br />
</body>
</html>
-- end --
Tab space is ignored in Case 4. It looks like a problem of WebKit origin because it occurs even Opera and Chrome. Tabs are not ignored in Firefox and IE.
Rendering is broken at the level reading is difficult fully in Case 5. This problem does not occur with Opera and Chrome.
It is not a rare case because occurs when using both Google Prettyprint WordPress and widely used.
WordPress have specified the following styles.
body {
font-size: 14px;
font-size: 1rem;
font-family: Helvetica, Arial, sans-serif;
text-rendering: optimizeLegibility;
color: # 444;
}
Test Code:
--- PreTagTest.java ---
import java.net.URI;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.StackPane;
import javafx.scene.web.WebView;
import javafx.stage.Stage;
public class PreTagTest extends Application{
@Override
public void start(Stage stage) throws Exception {
StackPane pane = new StackPane();
WebView browser = new WebView();
URI uri = this.getClass().getResource("/PreTagTest.html").toURI();
browser.getEngine().load(uri.toURL().toString());
pane.getChildren().add(browser);
Scene scene = new Scene(pane);
stage.setScene(scene);
stage.show();
}
public static void main(String[] args) {
CheckboxRadioInputTagTest.launch(args);
}
}
Tab space since have disappeared from the HTML source for the test,
There is a need to modify the tab space of Case2 and Case4.
Is it possible to attach the file for testing?
--- PreTagTest.html ---
<!DOCTYPE html>
<html>
<body>
<h2>Case 1: pre</h2>
<pre>
public static int fibonacci(int n) {
if (n == 0) {
return 0;
} else if (n == 1) {
return 1;
} else {
return fibonacci(n - 1) + fibonacci(n - 2);
}
}
</pre>
<h2>Case 2: pre tab space</h2>
<pre>
public static int fibonacci(int n) {
if (n == 0) {
return 0;
} else if (n == 1) {
return 1;
} else {
return fibonacci(n - 1) + fibonacci(n - 2);
}
}
</pre>
<h2>Case 3: pre style="text-rendering:optimizeLegibility"</h2>
<pre style="text-rendering:optimizeLegibility">
public static int fibonacci(int n) {
if (n == 0) {
return 0;
} else if (n == 1) {
return 1;
} else {
return fibonacci(n - 1) + fibonacci(n - 2);
}
}
</pre>
<h2 style="color:red">Case 4: pre style="text-rendering:optimizeLegibility" tab space</h2>
<pre style="text-rendering:optimizeLegibility">
public static int fibonacci(int n) {
if (n == 0) {
return 0;
} else if (n == 1) {
return 1;
} else {
return fibonacci(n - 1) + fibonacci(n - 2);
}
}
</pre>
<h2 style="color:red">Case 5: pre class="prettyprint" style="text-rendering:optimizeLegibility"</h2>
<pre class="prettyprint" style="text-rendering:optimizeLegibility">
public static int fibonacci(int n) {
if (n == 0) {
return 0;
} else if (n == 1) {
return 1;
} else {
return fibonacci(n - 1) + fibonacci(n - 2);
}
}
</pre>
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script><br />
</body>
</html>
-- end --