JavaFX WebView showcases HTML content differently compared to Libre Office Writer

After using SceneBuilder 2 to create a Dialog for displaying Help documents in a WebView, I proceeded to generate an HTML document in Libre Office Writer.

Upon loading the 'Help.html' file, I noticed that the line spacing in the WebView differed from what was displayed in Libre Office.

My goal is to replicate the visual style of the HTML document as seen in Libre within the WebView.

I suspect that there may be a Style attribute that needs adjustment. The text within paragraphs wraps correctly, but it's the excessive spacing after CR/LF that poses a challenge.

The initialize method of the Controller:

public void initialize(URL url, ResourceBundle rb) 
{           
    WebEngine webEngine = webView.getEngine();

    // Load HTML Content
    webEngine.load(getClass().getResource("/SampleHelp.html").toExternalForm());
}

Contents of SampleHelp.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
... (content omitted for brevity)
</html>

Comparison between SampleHelp.html in the WebView and in Mozilla Firefox:

In Libre Office Writer: Despite accurately displaying the content in the WebView, the issue arises with spacing between paragraphs post CR/LF.

For instance, the section "Load File - Saleyard" should have continuous lines without space breaks in between them. Similarly, each subsequent heading and paragraph grouping should follow suit.

Answer №1

Currently, I have opted to utilize the BlueFish HTML editor with minimal tags and formatting.

I am curious as to why a document created in Libre Office Writer and saved as HTML appears different in a web browser compared to how it looks during the editing process.

Here is an example of HTML code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
    <meta name="generator" content="Bluefish 2.2.5" >
    <meta name="created" content="20161014;0">
    <meta name="changed" content="20161015;74147709157253">
<title></title>
</head>
<body>
<span style="text-decoration: underline;">Purpose:</span> To load files provided by a Service Provider, that holds all relevant information about an event.<br>
<br>
For this reason file loading is considered to be 'Automatic', and requires minimal input.<br>
<br>
<b><span style="text-decoration: underline;">Load File - Saleyard</span></b><br>
The operator needs to:<br>
(1) <span style="text-decoration: underline;">Choose a Saleyard</span><br>
The first dialog opens to show a list of all Saleyards registered in the system.<br>
Select one and click on the 'OK' button to accept the selection, or 'Cancel' to stop the process.<br>
<br>
(2) <span style="text-decoration: underline;">Choose a File</span><br>
A FileChooser dialog opens in the Saleyards directory (home/Livestock Manager/Source/Saleyards), which shows a sub-directory for each registered Saleyard.<br>
Open the relevant Saleyard directory, and choose the relevant event file (.xml).<br>
<br>
The system will then :<br>
- check to see that the file  is from the nominated Saleyard<br>
- check to ensure this event (provider + event date) has not been loaded before<br>
- load the relevant data<br>
<br>
<b>Recommended</b><br>
Once loaded, you show view the results (see menu option View / Edit - Saleyard) to verify the numbers of head bought and sold, and the cost.<br>
The quality of data supplied varies between providers. So, this provides an opportunity to improve the data, via updates to Breed, Sex and Has Calf as appropriate.<br>
<br>
<br>
<b><span style="text-decoration: underline;">Load File - KillSheet</span></b><br>
This process is similar for consistency.
However, at present each registered Abattoir provides it's own file type and structure. Since most Livestock are slaughtered at JBS Dinmore, this is the only file loaded automatically.<br>
<br>
The operator needs to:<br>
(1) Choose an Abattoir<br>
The first dialog opens to show a list of all Abattoirs (where the entry type is 'Automatic') registered in the system.<br>
Select one and click on the 'OK' button to accept the selection, or 'Cancel' to stop the process.<br>
</body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I delete the header and footer on a personalized homepage design?

After crafting a unique home page/landing page for my website that stands out from the rest, I've come across an issue. The header and footer are appearing on this new page, but I only want to display what I specifically coded. I attempted using Site ...

When my viewport's size is less than 998px, a blank space appears

While configuring media queries in my HTML and CSS project, everything seemed to be working well. However, I noticed that when I shrink the screen, there is an empty white space on the right side and a horizontal scroll bar appears at the bottom without an ...

Steps for Sending Data Using a URL

I am having trouble deleting a row based on its id. Below is the code I am using: <tr> <th>ID</th> <th>Nom etudiant</th> <th>Prenom etudiant</th> ...

A date picker pops up when the user clicks on an Angular input field of type text

I am looking to edit a dateTime value using Angular/Ionic, but unfortunately there is no dateTime picker available. To work around this issue, I have split the field into separate date and time fields. In order to incorporate placeholder text and format th ...

Is the code generated by Webflow.com functional and practical?

Recently, I have discovered the wonders of www.webflow.com for creating an admin layout. It excels in generating a flexbox layout based on my PSD design without requiring me to manually code with Gulp. My plan is to further simplify the process by breaki ...

The alignment of inline contenteditable tags is not working properly in Internet Explorer

I am facing an issue where inline contenteditable span tags are working fine in all browsers except for IE. In Internet Explorer, the tags are not acting as inline and instead aligning themselves as block elements. This behavior seems to be caused by IE wh ...

What is the best way to adjust the responsiveness of my AppDrag page for mobile optimization?

My landing page is all set up, but I'm looking to tweak the font sizes and spacing for mobile users. Can these changes be made using design tools instead of digging into the code? ...

Is there a way to horizontally align text in a div using center alignment?

Excuse me for what might seem like a silly question, but I am having trouble figuring this out. Edit: All I want is to horizontally center the text without affecting the image's position. The image should stay aligned with the baseline of the text. ...

Switching between dark and light mode in Ant Design

I have successfully implemented dark mode toggling in my application. However, when I try to switch back to light mode, the CSS does not seem to be reloading properly. Below is the code snippet: //ThemeContext.jsx const DarkTheme = lazy(() => import(". ...

Designing a custom style for a select box using CSS and HTML

Recently, someone assisted me in removing the outline of my select box in my debut bootstrap-django project. Now, I am seeking your guidance on altering the border color property of the options box itself from blue to yellow. Strangely, when the select box ...

The button labeled "modify layout" remains unresponsive when activated

Allow me to start by saying that I am not a coding expert. Currently, I am enrolled in a computer science class and have a basic understanding of HTML, CSS, and some Javascript. However, I have encountered a problem that I cannot solve. When I click on th ...

What could be causing the HelloWorld program in AngularJS to malfunction?

To access the codes, you can visit http://jsfiddle.net/hh1mye5b/1/ Alternatively, you can refer to: <!doctype html> <html ng-app="dcApp"> <head> </head> <body> <div> <div ng-controller="SpeciesController"> ...

Something isn't quite right - Mobile Compatibility not functioning

I have been developing a website and running into an issue with the header. It works fine on desktop and is responsive, but on mobile devices, the Bootstrap functionality seems to be missing. I've included my code below, could someone please help me i ...

How to troubleshoot Javascript code that fails to identify if a color is white

What could be causing my code to malfunction? I am attempting to determine if the paragraph text color is white (as determined by CSS settings). If it is indeed white, I want to change it to black for better visibility. function adjustColor() { if (d ...

Issue with HTML dropdown functionality

I’m facing an issue with my dropdown menu. Clicking on a button should toggle the dropdown menu, showing it if closed and hiding it if open. However, the dropdown menu does not close when I click the button again. I suspect the problem lies with the clos ...

Header media query in CSS3 not functioning as expected

Currently, I have two separate style sheets for mobile and desktop versions. My intention is to default to the mobile style sheet. Upon examining my header, I have included the following: <link rel='stylesheet' media='all' href=&ap ...

The mobile application on iPad only supports rotating in three specific directions

There seems to be an issue with the app not rotating when my iPad is in portrait mode, with the home button at the bottom and the camera at the top. However, rotation works fine in all other directions - landscape and portrait (when the camera is on the bo ...

How can I ensure text remains confined within the parent div when working with Bootstrap?

I'm having trouble keeping the text and links within their parent div. Even though I set the outer boundary as col-sm-8, the text and links are overflowing. I'm not sure what I'm doing wrong, but the code I am using is shown below. I have a ...

Fuel Calculation - Unable to pinpoint the error

My JavaScript Code for Calculating CO2 Emissions I'm working on a program that calculates how much CO2 a person produces per kilometer. This is part of my school project and I'm still learning, so please bear with me... I also just signed up on ...

Transitioning backgrounds in a slideshow

I am attempting to create a unique slideshow effect for my page background by changing the image URL at specific intervals with a smooth fade in and fade out transition. However, I am faced with the challenge of figuring out the best way to achieve this. ...