Custom CSS style in Textedit
-
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 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
@Brad1111
OK, I have done some playing. Here are your two choices.If you must use
QPlainTextEdit
:
You cannot useappendHtml()
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. Likeself.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 anyappendHtml()
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 theQTextDocument
(returned bydocument()
) underlying both of these widgets and try to do your work there (see alsosetDefaultStyleSheet()
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 ;-)
-
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 -
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@Brad1111
As @Pl45m4 says,QTextEdit
only does Qt's own subset of HTML. For full HTML compatibility you would have to use aQWebEngineView
.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{
byspan{
(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? -
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. -
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.@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
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.
-
-
@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, butQTextEdit 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.
-
@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
-
@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
@Brad1111
One more time, as I keep saying: I presume yourcss_style.css
file does not enclose its content in<style> ... </style>
tags? Yet contains style? Try inserting those yourself, maybeself.frame4_text.appendHtml("<style>" + sheet + "</style>")
Not sure about
appendHtml()
vssetStyleSheet()
. (And the onlyappendHtml()
I could spot was one forQPlainTextEdit
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
One more time, as I keep saying: I presume yourcss_style.css
file does not enclose its content in<style> ... </style>
tags? Yet contains style? Try inserting those yourself, maybeself.frame4_text.appendHtml("<style>" + sheet + "</style>")
Not sure about
appendHtml()
vssetStyleSheet()
. (And the onlyappendHtml()
I could spot was one forQPlainTextEdit
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.@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 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 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
@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 toQPlainTextEdit
? 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 saidQTextEdit
...I'm playing with differences between setting/appending and
QTextEdit
vsQPlainTextEdit
. Solution/workaround may depend on which class. Can you let me know whether you must useQPlainTextEdit
orQTextEdit
or don't care? -
@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
@Brad1111
OK, I have done some playing. Here are your two choices.If you must use
QPlainTextEdit
:
You cannot useappendHtml()
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. Likeself.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 anyappendHtml()
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 theQTextDocument
(returned bydocument()
) underlying both of these widgets and try to do your work there (see alsosetDefaultStyleSheet()
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
OK, I have done some playing. Here are your two choices.If you must use
QPlainTextEdit
:
You cannot useappendHtml()
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. Likeself.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 anyappendHtml()
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 theQTextDocument
(returned bydocument()
) underlying both of these widgets and try to do your work there (see alsosetDefaultStyleSheet()
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 ;-)
@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 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.@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 useQPlainTextEdit
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 toQWebEngine
for what you want. But if you want a full HTML stack that will do it. -
@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 useQPlainTextEdit
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 toQWebEngine
for what you want. But if you want a full HTML stack that will do it.@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.