HTML files in QTextBrowser: external CSS files not linked
-
If I have a
<style>element in the<head>section with CSS styles in each HTML page, this behaves normally. However,
I want to collect all the CSS in a central file and link to it. The HTML pages are stored in the.qrcresource file of my application.I have tried placing the CSS file in the same folder as the HTML pages, but this doesn't seem to work. Also, I tried fully qualifying the path to the CSS file with the
qrc:/...syntax, and that didn't help.Is this even possible? Or am I overlooking something here?
-
If I have a
<style>element in the<head>section with CSS styles in each HTML page, this behaves normally. However,
I want to collect all the CSS in a central file and link to it. The HTML pages are stored in the.qrcresource file of my application.I have tried placing the CSS file in the same folder as the HTML pages, but this doesn't seem to work. Also, I tried fully qualifying the path to the CSS file with the
qrc:/...syntax, and that didn't help.Is this even possible? Or am I overlooking something here?
- I do not use
.qrcso I cannot say how to do it that way, though maybe it can be done. - I cannot recall whether it is supposed to support
<link rel="stylesheet" ...>, is that what you tried? You should show code? - Otherwise, the "hack" for Qt is to read in stylesheet content from external files yourself in code, and then set as stylesheet text.
So you need to make clear which approach is desirable/acceptable to you.
P.S.
Thinking aloud, it may be thatQWebEnginePagesupports external stylesheet<link>references, but notQTextBrowser.
For the latter, I think you do have to read it in (you can do that from aqrc:if you want) as text and then set the stylesheet, like e.g.:QFile fStyle(":/Resources/Stylesheets/file.css"); fStyle.open(QIODevice::ReadOnly|QIODevice::Text); _ui.txtBrowser->setStyleSheet(fStyle.readAll()); fStyle.close(); - I do not use
-
- I do not use
.qrcso I cannot say how to do it that way, though maybe it can be done. - I cannot recall whether it is supposed to support
<link rel="stylesheet" ...>, is that what you tried? You should show code? - Otherwise, the "hack" for Qt is to read in stylesheet content from external files yourself in code, and then set as stylesheet text.
So you need to make clear which approach is desirable/acceptable to you.
P.S.
Thinking aloud, it may be thatQWebEnginePagesupports external stylesheet<link>references, but notQTextBrowser.
For the latter, I think you do have to read it in (you can do that from aqrc:if you want) as text and then set the stylesheet, like e.g.:QFile fStyle(":/Resources/Stylesheets/file.css"); fStyle.open(QIODevice::ReadOnly|QIODevice::Text); _ui.txtBrowser->setStyleSheet(fStyle.readAll()); fStyle.close();@JonB Yes, I was trying to use the syntax
<link rel="stylesheet" ...>in the HTML<head>section.Does anyone know if this is supported?
- I do not use
-
- I do not use
.qrcso I cannot say how to do it that way, though maybe it can be done. - I cannot recall whether it is supposed to support
<link rel="stylesheet" ...>, is that what you tried? You should show code? - Otherwise, the "hack" for Qt is to read in stylesheet content from external files yourself in code, and then set as stylesheet text.
So you need to make clear which approach is desirable/acceptable to you.
P.S.
Thinking aloud, it may be thatQWebEnginePagesupports external stylesheet<link>references, but notQTextBrowser.
For the latter, I think you do have to read it in (you can do that from aqrc:if you want) as text and then set the stylesheet, like e.g.:QFile fStyle(":/Resources/Stylesheets/file.css"); fStyle.open(QIODevice::ReadOnly|QIODevice::Text); _ui.txtBrowser->setStyleSheet(fStyle.readAll()); fStyle.close();@JonB I tried your suggestion, but it appears that the text browser doesn't actually use the CSS styles unless they are put in the
<head>section of the HTML text itself. At least it isn't resolving the selectors properly.Here is the CSS I have:
body { font-family:Ubuntu,Arial,sans; margin: 6px; line-height: 100%; } h1 { color:#007F00; } .emph { font-weight:bold; font-style:italic } .code { font-family:'Courier New',mono; } .tag { color:blue; font-weight:bold; } .attr { color:red; font-weight:bold; }I suppose this is something we'll have to live with.
- I do not use
-
@JonB I tried your suggestion, but it appears that the text browser doesn't actually use the CSS styles unless they are put in the
<head>section of the HTML text itself. At least it isn't resolving the selectors properly.Here is the CSS I have:
body { font-family:Ubuntu,Arial,sans; margin: 6px; line-height: 100%; } h1 { color:#007F00; } .emph { font-weight:bold; font-style:italic } .code { font-family:'Courier New',mono; } .tag { color:blue; font-weight:bold; } .attr { color:red; font-weight:bold; }I suppose this is something we'll have to live with.
@Robert-Hairgrove
I don't understand what you mean, or what you are trying. The example code shows reading the whole of CSS file and setting it on aQTextEdit/Browser-type widget.QTextEditwill only support what's in https://doc.qt.io/qt-5/richtext-html-subset.html. It's limited. As I said, if you want more full-fledged support you have to move to aQWebEngineView, which is Chromium. -
Well, I decided not to put my help files in the application resources but to keep them as files in an existing directory underneath the main application folder. That way, if I have to support help files with a new UI language, I don't have to rebuild the entire application.
So I have this structure:
<application directory> | +help --en |--images --de |--images (etc.)When I do this and add the CSS file to the main
helpfolder, and when I callQTextBrowser::setSourcePaths()with these paths, the CSS file is found OK which is in the<link>tag in the<head>section and everything just works.I think that when I call
QTextBrowser::setStyleSheet(), the widget is expecting a Qt-flavored stylesheet which is for the appearance of the text browser widget itself, and not for the HTML contents. So it cannot really find the proper selectors such as.emph, h1, etc.MARKED AS SOLVED.
