Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. General and Desktop
  4. HTML files in QTextBrowser: external CSS files not linked
Forum Updated to NodeBB v4.3 + New Features

HTML files in QTextBrowser: external CSS files not linked

Scheduled Pinned Locked Moved Solved General and Desktop
6 Posts 2 Posters 2.3k Views 2 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • R Offline
    R Offline
    Robert Hairgrove
    wrote on 28 Sept 2019, 15:27 last edited by
    #1

    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 .qrc resource 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?

    J 1 Reply Last reply 28 Sept 2019, 16:38
    0
    • R Robert Hairgrove
      28 Sept 2019, 15:27

      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 .qrc resource 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?

      J Offline
      J Offline
      JonB
      wrote on 28 Sept 2019, 16:38 last edited by JonB
      #2

      @Robert-Hairgrove

      • I do not use .qrc so 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 that QWebEnginePage supports external stylesheet <link> references, but not QTextBrowser.
      For the latter, I think you do have to read it in (you can do that from a qrc: 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();
      
      R 2 Replies Last reply 28 Sept 2019, 18:54
      0
      • J JonB
        28 Sept 2019, 16:38

        @Robert-Hairgrove

        • I do not use .qrc so 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 that QWebEnginePage supports external stylesheet <link> references, but not QTextBrowser.
        For the latter, I think you do have to read it in (you can do that from a qrc: 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();
        
        R Offline
        R Offline
        Robert Hairgrove
        wrote on 28 Sept 2019, 18:54 last edited by
        #3

        @JonB Yes, I was trying to use the syntax <link rel="stylesheet" ...> in the HTML <head> section.

        Does anyone know if this is supported?

        1 Reply Last reply
        0
        • J JonB
          28 Sept 2019, 16:38

          @Robert-Hairgrove

          • I do not use .qrc so 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 that QWebEnginePage supports external stylesheet <link> references, but not QTextBrowser.
          For the latter, I think you do have to read it in (you can do that from a qrc: 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();
          
          R Offline
          R Offline
          Robert Hairgrove
          wrote on 29 Sept 2019, 09:37 last edited by
          #4

          @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.

          J 1 Reply Last reply 29 Sept 2019, 15:35
          0
          • R Robert Hairgrove
            29 Sept 2019, 09:37

            @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.

            J Offline
            J Offline
            JonB
            wrote on 29 Sept 2019, 15:35 last edited by
            #5

            @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 a QTextEdit/Browser-type widget.

            QTextEdit will 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 a QWebEngineView, which is Chromium.

            1 Reply Last reply
            1
            • R Offline
              R Offline
              Robert Hairgrove
              wrote on 30 Sept 2019, 08:26 last edited by
              #6

              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 help folder, and when I call QTextBrowser::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.

              1 Reply Last reply
              0

              1/6

              28 Sept 2019, 15:27

              • Login

              • Login or register to search.
              1 out of 6
              • First post
                1/6
                Last post
              0
              • Categories
              • Recent
              • Tags
              • Popular
              • Users
              • Groups
              • Search
              • Get Qt Extensions
              • Unsolved