Exploring Java Programming with HTMLEditorKit

Here is my source code:

I am trying to change the font color using only CSS.

This is how I am inserting HTML:

<span class="tag1">I love <span class="tag2">apple</span></span><span class="tag2"> pie</span>

When using tag1, I expect "I love apple" to be displayed in red font.

However, only "I love" appears in red font.

How can I correct this issue?

doc.getStyleSheet().addRule(".tag1 {color : red;}");

try {

    kit.insertHTML(doc, doc.getLength(), "<span class=\"tag1\">I love <span class=\"tag2\">apple</span></span><span class=\"tag2\"> pie</span>", 0, 0, null);
} catch (IOException e1) {

    e1.printStackTrace();
} catch (BadLocationException e1) {

    e1.printStackTrace();
}

Answer №1

The reason for this issue is that you have assigned the red color to .tag1 only, while the

<span class="tag2">apple</span>
is a span element within .tag1, so it does not inherit the color css property directly. As @hoosssein mentioned, if there is a default (or any) css color value for the span element, it will not adopt the style of its parent element, which explains the current behavior.

To resolve this, you should include the following code:

doc.getStyleSheet().addRule(".tag1 span {color: red;}");

This way, every span element within the .tag1 class will also be styled with a red color.

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

Creating a visually appealing user interface can be achieved by utilizing HTML/CSS to include bullet points and enumeration numbers in the page

I am looking for a way to display lists in a document with a style similar to the image on the right below: The text content of the list items is formatted like any other <p> and the bullet points are located in the margin. Is there a CSS solution ...

How to interact with a C# List using JavaScript

Our internship project entails creating a business application using Unity WebGL. However, we're facing a challenge when it comes to retrieving a list from C# to populate a Select element on our webpage. We've successfully communicated and retrie ...

How can one best target an element using XPath for optimal efficiency?

I am currently working on a Java program that prioritizes efficiency, especially when it comes to using XPaths. With XPath, I have the option to select elements starting from the root like this: /root/a/b/c/d/e Alternatively, I can utilize the descenden ...

Exploring JSON Objects and Arrays within a Java Programming Environment

Currently, I am immersed in the process of creating a Java class within Android Studio that focuses on constructors with getters and setters, specifically to handle JSON arrays and objects. The JSON data format provided above serves as a reference for th ...

What is the reference of this.method()?

I'm inquiring about the this. statement. Imagine I have the following code (which is quite silly and pointless but serves the purpose): class Calculate{ int x,y; final int g = 5; //Constructor public Calculate(int a, int b) { x = a; y = ...

Experiment with altering the layout of certain navigation bars

I am currently attempting to customize the background color and text color for specific HTML components. Within my project, there are 3 navigation bars. I aim to establish a default color for all nav bars while also altering the specific color of one of t ...

The integration of Angular CLI with SCSS is no longer a separate process -

It seems like I might be overlooking something very straightforward here. After a fresh installation of angular-cli, I created a new website with SCSS. I input the SCSS in the global style.scss as well as some in a component SCSS file. However, when I se ...

"Showcasing a pair of icons side by side in an HTML layout

I need assistance with formatting two legends on the form. I want both legends to be displayed side by side instead of one on top of the other. Here's how I want it: -----legendOne---LegendTwo----- What CSS code do I use to achieve this layout? Be ...

Developing a user interface element for my testing purposes

My testing process involves Java, Selenium, and TestNG. As I run my test suite, all the configurations are stored in the testng.xml. I'm curious if there's a way to create a custom UI component that can perform the same actions as the xml file. ...

Circular CSS menu

What I'm Trying to Achieve: I am interested in developing a unique radial menu that includes interactive elements, such as the central image and the surrounding sections. It is imperative that the solution is compatible across all browsers. The examp ...

Retrieving data from a String-based associative array in Java

Here is a string I am working with: [{"id":1,"code":"number","field":"Customer Number","value":"123456"},{"id":2,"code":"customerName","field":"Customer Name","value":"John"}] I need to extract the following values in my java code: Customer number: 12345 ...

Retrieve data from an online JSON file

I am still learning about working with json and would appreciate some guidance. The data file I need to access is located at this url - I would like to display it in the following format: <ul id="smenu"> <li></li> </ul> Cou ...

Attempting to utilize Bootstrap for containing text inside of a background

<div class="container"> <div class="row"> <div class="col-lg-9"> <h2 style="font-family:times-new-roman">BIOGRAPHY</h2> <div id="demo" class="collapse"> <p> Isaac Newton (4 January 1643 – 31 March 1727) w ...

Contact on the go with our handy mobile contact form

Having some difficulties with the contact form on my website. The link to the form is: here. I am currently working on making the form mobile-friendly (the rest of the site scales down using @mobile screen tags in the CSS). The form is stacked, so there ...

Creating an accordion using HTML and jQuery allows for dynamic and interactive content organization

I am trying to incorporate an "ACCORDION" feature into my application using HTML and jQuery. Within this implementation, I have nested accordions. Below is a snippet of my code: <div class="row-fluid"> <div id="filtersContainer" class="span1 ...

What sets apart Material UI's gutterBottom from a paragraph?

Can you explain the distinction between these two options? While exploring the Typography Component API, I noticed that both the gutterBottom and paragraph props seem to serve the same purpose. If set to true, the margin bottom will be 0. You can find mor ...

Can an image and text be sent together in a single Json object to a client?

I'm working on a personal project and I want to send a Json object containing an image along with other data to the client. Is this feasible? If not, can I encode the image as a byte array or base64 and have the frontender decode it back into an image ...

Switch between two checkbox options by simply clicking on one without the need for JavaScript

Is there a way to select two combined checkboxes with one click? I have a small calendar where I need to mark weeks using checkboxes. Since one week can fall into two months, I have created duplicates of the same checkbox for each week. Is there a safe wa ...

Monitoring changes to a SCSS file

I'm feeling completely baffled. I've put in my best effort to resolve this issue. The problem lies with my SCSS file and its watcher that doesn't appear to be functioning properly. A regular CSS file is not being generated at all. Here&apos ...

How to center a text box within a div using CSS

Looking for equal margins on top and bottom? Here's how to achieve it: If you have a container div like this: <div id="search"> <input id="txtSearch" type="txt"> </div> Your CSS should look something like this: #search{ m ...