Custom CSS style in Textedit

Brad1111

hi,
I have a Qtextedit in which I display several lines of text over time.
For that I use self.mytextedit.appendHtml()
This simple thing works, but I actually want to achieve to display a custom html style, with CSS style.
So I tried to load a css style in which I declare my new style :
p{
}
.simple-highlight{
background-color:yellow;
};
lets imagine
self.objecttext.appendHtml('<p>The <span class="simple-highlight">most common color for highlighters is yellow</span></p>)

The highlight here is just an example. I would like to be able to use more complex css style through HTML, but only basics from HTML are recognized for some reasons.

I did some testing and the css loads correctly and I apply it to the right object. I just need some help to create new style between the <> in html. thanks

Could anyone help me on this please.
Thanks

JonB

@Brad1111
OK, I have done some playing. Here are your two choices.

If you must use QPlainTextEdit:
You cannot use appendHtml() multiple times, you can use it once and once only on empty. You must save for yourself all the stuff which you previously called to append (QPlainTextEdit does not provide this to you), then clear and append anew. Like

self.currentHtml = ""

// every time you want to append some more stuff
self.currentHtml += nextStuff
self.frame4_plaintextedit.clear()
self.frame4_plaintextedit.appendHtml(self.currentHtml)

You are "lucky" QPlainTextEdit even accepts/acts on any HTML. Personally I wouldn't use it for this task, unless you have to (and it may be more efficient for large texts).

If you use QTextEdit:
There isn't any appendHtml() anyway. You must follow the same principle as above, including having to save the HTML used so far useful (QTextEdit.toHtml() cannot be used to correctly retrieve what you have already put there, trust me.)

self.currentHtml = ""

// every time you want to append some more stuff
self.currentHtml += nextStuff
self.frame4_textedit.setHtml(self.currentHtml)

[There are neater, more self-contained ways of achieving this than keeping the text in a form class member variable, such as storing it in a property of the edit widget or subclassing, but to keep this simple I leave that as an exercise for the reader :) ]

I have not tried it, but you could perhaps use QTextEdit.insertHtml() with appropriate positioning of the text cursor. Otherwise you could go to the QTextDocument (returned by document()) underlying both of these widgets and try to do your work there (see also setDefaultStyleSheet() for applying the stylesheet to the whole of the text document instead of the default current-block-only). These might be more efficient on large documents, but for your purposes probably just more complicated than code shown.

You owe me a beer ;-)

Pl45m4

@Brad1111

Not every single HTML tag/command is supported.
Have a look here. And this topic might help.
You can also style the widget itself via setStylesheet

JonB

@Brad1111
As @Pl45m4 says, QTextEdit only does Qt's own subset of HTML. For full HTML compatibility you would have to use a QWebEngineView.

Having said that, I think I would expect your somple example to work. (Please try something other than background-color, filling background can be funny, e.g. color: yellow or other.)

Because of the funny way Qt deals with CSS style names, try whether

*[class~="simple-highlight"] { ... }

in place of your .simple-highlight{ ... } selector makes any difference.

Replace .simple-highlight{ by span{ (note no . at the start) and see whether that works, i.e. with no attempt to specify a class. Then we'll know whether the class selector is an issue.

BTW, if my HTML/CSS recollection is correct your "loaded CSS style" rules need to be passed inside a <style>...</style> tag, are you doing that?

Brad1111

Thanks to @ Pl45m4 and @JonB for your messages.

I actually already use setstylesheet to load my css which works only for very basic commands like for example, if I just write:

color:blue;

but whenever i try to create a class of some sort, even very simple, like

span{
color:red;
}

and then i write

appendhtml("<style><span>some testing</span></style>")

With or without style,
this does not work.
I know pyqt does not support all HTML code but I thought it would allow for some basic customization still, without the webengine that Id rather avoid, since I want to keep my qtextedit box.

JonB

@Brad1111
It perhaps makes no difference, but let's be clear. <style> ... </style> is not supposed to be around your HTML <span>some testing</span>. It's supposed to be where you create a style rule, your:

<style>
span{
color:red;
}
</style>

It's probably not your issue, but it would be nice to know where we are starting from.

Brad1111

@JonB I wasnt sure so i tested both , with same result

SGaist

@Brad1111 Hi,

Can you show an complete example of html you try to apply ?

The engine behind QTextEdit only supports a subset of HTML4 markup as defined here. If you want to style elements, you would usually go with inline styling <node style=""></node>

JonB

@SGaist
Yes, but the OP is asking how to achieve this via a class style rule in CSS, so that e.g. he can easily change just that style rule to affect all HTML elements with that class.

@Brad1111
I fired up my Qt to test for you :) I don't know exactly what you are doing, especially with the specification of the style rule, but

    QTextEdit w;
    w.setHtml("<style>.simple-highlight { color:green; }</style> \
               <span style='color: red'>Some red text</span><br> \
               <span class='simple-highlight'>Some green text</span><br>");

works fine. Tested under Qt 5.15. I don't have Qt6, but it will work, or that's a bug.

Brad1111

@SGaist said in Custom CSS style in Textedit:

If you want to style elements, you would usually go with inline styling <node style=""></node>

Hi, could you give an example with node style ? I couldnt find anything about that ...

@JonB Thanks, your example works indeed, for some reason. But whenever I try to split this in 2 parts i.e. one loading part and one text part, it doesnt work anymore. It seems like Im pretty bad but I cant figure that out so far ... I tried splitting the set HTML into 2 sethtml and also with my original load css file through :

with open("css_style.css", 'r') as file: 
			sheet = file.read() 
		#self.frame4_text.setStyleSheet(sheet)
                self.frame4_text.appendHtml(sheet)

self.frame4_text.appendHtml("<style>.simple-highlight </style><span class='simple-highlight'>Some green text</span> ")   # this works
self.frame4_text.appendHtml("<span class='simple-highlight'>Some green text</span> ")  # this does not work

JonB

@Brad1111
One more time, as I keep saying: I presume your css_style.css file does not enclose its content in <style> ... </style> tags? Yet contains style? Try inserting those yourself, maybe

self.frame4_text.appendHtml("<style>" + sheet + "</style>")

Not sure about appendHtml() vs setStyleSheet(). (And the only appendHtml() I could spot was one for QPlainTextEdit but I assume you know what you are doing here.)

Get it working with literal text as required, then make sure that is reflected (or adjusted) for whatever you read from file.

P.S.

self.frame4_text.appendHtml("<style>.simple-highlight </style><span class='simple-highlight'>Some green text</span> ")   # this works

Don't know what "works" means. As it stands, <style>.simple-highlight </style> defines an empty style.

Hi, could you give an example with node style ? I couldnt find anything about that ...

@SGaist simply mean <somehtmltag style="..."> ... </somehtmltag>, i.e. inline-specified style each time, not your shared-re-used-class which you are asking for.

Brad1111

@JonB Nah, I put this in my css, as you told me :

<style>.simple-highlight { color:red; }</style>

and it does not work. even without the loading css, if i just split the sethtml into

#styling loading
self.frame4_text.appendHtml("<style>.simple-highlight { color:blue; }</style>")

self.frame4_text.appendHtml("<span style='color: red'>Some red text</span>")
self.frame4_text.appendHtml("<span class='simple-highlight'>Some green text</span> ")

this does not work either

Edited :
And also, I have to be clear on the fact that this code works as intended :

self.frame4_text.appendHtml("<style>.simple-highlight { color:blue; }</style><span class='simple-highlight'>Some green text</span> ")

but it looks more like an inline method if i have to specify it everytime

added link : https://doc.qt.io/qt-6/qplaintextedit.html#appendHtml

JonB

@Brad1111
OK. Could you please provide me documentation link for whatever class you are using appendHtml(...) on?

JonB

@Brad1111 said in Custom CSS style in Textedit:

Edited : added link : https://doc.qt.io/qt-6/qplaintextedit.html#appendHtml

Which like I said earlier is the only one I could find. Why would you choose a plain text edit if you want to put in HTML markup? Seems bizarre to me that it even accepts HTML. Have you tried a QTextEdit? Would you like to do so before I spend time changing my code over to QPlainTextEdit? Maybe it's not an issue, but we have to be consistent....

Your post started with

I have a Qtextedit in which I display several lines of text over time.

You must be exact! You are now showing using a QPlainTextEdit when you said QTextEdit...

I'm playing with differences between setting/appending and QTextEdit vs QPlainTextEdit. Solution/workaround may depend on which class. Can you let me know whether you must use QPlainTextEdit or QTextEdit or don't care?

JonB

@Brad1111
OK, I have done some playing. Here are your two choices.

If you must use QPlainTextEdit:
You cannot use appendHtml() multiple times, you can use it once and once only on empty. You must save for yourself all the stuff which you previously called to append (QPlainTextEdit does not provide this to you), then clear and append anew. Like

self.currentHtml = ""

// every time you want to append some more stuff
self.currentHtml += nextStuff
self.frame4_plaintextedit.clear()
self.frame4_plaintextedit.appendHtml(self.currentHtml)

You are "lucky" QPlainTextEdit even accepts/acts on any HTML. Personally I wouldn't use it for this task, unless you have to (and it may be more efficient for large texts).

If you use QTextEdit:
There isn't any appendHtml() anyway. You must follow the same principle as above, including having to save the HTML used so far useful (QTextEdit.toHtml() cannot be used to correctly retrieve what you have already put there, trust me.)

self.currentHtml = ""

// every time you want to append some more stuff
self.currentHtml += nextStuff
self.frame4_textedit.setHtml(self.currentHtml)

[There are neater, more self-contained ways of achieving this than keeping the text in a form class member variable, such as storing it in a property of the edit widget or subclassing, but to keep this simple I leave that as an exercise for the reader :) ]

I have not tried it, but you could perhaps use QTextEdit.insertHtml() with appropriate positioning of the text cursor. Otherwise you could go to the QTextDocument (returned by document()) underlying both of these widgets and try to do your work there (see also setDefaultStyleSheet() for applying the stylesheet to the whole of the text document instead of the default current-block-only). These might be more efficient on large documents, but for your purposes probably just more complicated than code shown.

You owe me a beer ;-)

Brad1111

@JonB thanks a lot for your research on this ! Really appreciate your help on this.

First of all, one solution could be to get this thing working :
self.textedit.setStyleSheet(sheet)
But Im not really sure how to use it to define HTML new class to be honest, So ill have to dig deeper. Im used to use setStyleSheet for basic configs and formats, but not for custom Html Class.

I also did some testing on my own, but Im a bit disappointed.
I actually replaced My PlainTextedit with Textedit :

First of all, using a cursor and insertHtml does not give any satisfying result. It doesnt take into account my new class that I have loaded beforehand.

The only thing that seems to be working, is to keep using SetHtml which erases whole content and for that reason, I must keep stored in a variable my whole content as you stated indeed.
So basically, there is no clear advantage to use Textedit over PlainTextedit. With Plaintextedit, I can at least append without having to store the whole content, I just have to make sure the new class is defined everytime I want to use it.

I think the true solution is to look into QWebEngine , as many people told me to, from the beginning.
For now, I dont know anything about QWebEngine, so I'll just do some research on this.

JonB

@Brad1111 said in Custom CSS style in Textedit:

With Plaintextedit, I can at least append without having to store the whole content

I did not find that. Per your finding, I found that calling QPlainTextEdit.appendHtml() a second time would not pick up the class from a previous call. Hence the code I wrote above works. So if you want to use QPlainTextEdit that is fine.

The only thing that seems to be working, is to keep using SetHtml which erases whole content and for that reason, I must keep stored in a variable my whole content as you stated indeed.

And that is what I would do.

You have solutions for both QTextEdit & QPlainTextEdit now. I don't know why you would bother moving over to QWebEngine for what you want. But if you want a full HTML stack that will do it.

Brad1111

@JonB Id rather explore the QWebEngine mostly because, overall all the solutions found imply that we add the class definition each time we do sethtml .
But I could do this easily without any custom class right.
just using a long sequence of basic <></> before each message.
So in essence, the custom class does not really work that well. Not to mention inserthtml does not take the custom class either, and we dont have access to all html functions either.