CSS + images in a QTextBrowser

1 Attachment(s)

Hi,

I guess, that there are other people, who need to display images from the resource system in a QTextBrower or want to css-classes in their html. For that reason here my solution for

Use css-classes in HTML-tags
Use images from your qrc file in <img>
Use images in your css for background etc.

Code:

QString html;
  html  = "<html><head>";
  html += "<link rel='stylesheet' type='text/css' href='format.css'>";
  html += "</head><body>";
  html += "<img src='image.png'> Lorem ipsum dolor sit amet, consectetuer adipiscing elit."
          "<span class='important'>Sed consequat luctus ante.</span> Nunc quis pede nec "
          "mauris pellentesque dignissim. Mauris nec ipsum. Donec condimentum, tellus "
          "vitae ullamcorper faucibus, magna <span id='free'>lorem pellentesque mauris, "
          "tristique sollicitudin quam lorem non velit. Suspendisse scelerisque facilisis eros. "
          "Nunc ut purus.</span> Curabitur ac dui ut velit luctus aliquam. Nulla nec lectus. "
          "<span class='colored'>Cras vitae lacus gravida mi vehicula hendrerit.</span> "
          "Phasellus a diam. Cras venenatis. Fusce ultrices. Praesent ultrices diam vel lacus. "
          "Vestibulum tortor orci, nonummy non, tincidunt non, laoreet sit amet, nibh.";
  html += "</body></html>";
 
  QString css;
  css  = "span.important {text-style: italic; text-decoration: underline;}";
  css += "span.colored {color:#DE0000; font-variant:small-caps;}";
  css += "#free { background-image: url('bg.png'); font-weight: bold; color:#0000DE;}";
 
  QTextDocument *doc = new QTextDocument;
  doc->addResource( QTextDocument::ImageResource,
                    QUrl( "image.png" ), QPixmap( ":menu_exit" ) ); // :menu_exit is an alias in the qrc-file
  doc->addResource( QTextDocument::ImageResource,
                    QUrl( "bg.png" ), QPixmap( ":menu_settings" ) ); // :menu_settings is an alias in the qrc-file
  doc->addResource( QTextDocument::StyleSheetResource, QUrl( "format.css" ), css );
  doc->setHtml( html );
 
  QTextBrowser *tb = new QTextBrowser( 0 );
  tb->setDocument( doc );
  tb->show();

And how this looks, you see in my attached image.

Lykurg

Re: CSS + images in a QTextBrowser

Nice. Maybe you could add this to our wiki?

Re: CSS + images in a QTextBrowser

Quote:

Originally Posted by jacek

Maybe you could add this to our wiki?

done. Wiki article

Re: CSS + images in a QTextBrowser

Quote:

Originally Posted by Lykurg

done. Wiki article

Thank you. :)