Search code examples
reporting-servicesssrs-2008ssrs-2012

How can I render CSS colors with bold, underline, italic in SSRS?

I'm trying to render HTML from a database field into a report using SSRS. But CSS colors will not work if they are bolded, italicized, or underlined.

For example, for the below code snippet: The first 3 paragraphs ('red', 'blue', 'green') all have the correct color. But the next three with underline, strong, and em tags do not render color. The last 3 paragraphs are without color and demonstrate that colors and bold,underline,italic work separately but NOT together.

Here is the HTML: 

<p><span style="color: #e60000;">red</span></p>
<p><span style="color: #0066cc;">blue</span></p>
<p><span style="color: #008a00;">green</span></p>
<p><br></p>
<p><u style="color: #e60000;">red underline</u></p>
<p><strong style="color: #0066cc;">blue bold</strong></p>
<p><em style="color: #008a00;">green italic</em></p>
<p><br></p>
<p><u>underline</u></p>
<p><strong>bold</strong></p>
<p><em>italic</em></p>

And here is what is rendered on the report. SSRS results

This HTML is all generated from the Quill rich text editor. https://quilljs.com/ From which I'm already having enough problems because I have to convert css colors from rgb to hex. I'm using Microsoft SQL Server Reporting Services Version 13.0.5103.6. Any help at all would be much appreciated. Thank you!

Solution

  • If you move the style to the paragraph tag, it will work.

    ="<p><span style='color: #e60000;'>red</span></p>" & 
"<p><span style='color: #0066cc;'>blue</span></p>" & 
"<p><span style='color: #008a00;'>green</span></p>" & 
"<p><br></p><p style='color: #e60000;'><u>red underline</u></p>" & 
"<p style='color: #0066cc;'><strong>blue bold</strong></p>" & 
"<p style='color: #008a00;'><em>green italic</em></p><p><br></p>" & 
"<p><u>underline</u></p>" & 
"<p><strong>bold</strong></p>" & 
"<p><em>italic</em></p>"

    enter image description here

    It also works if you keep the color in a separate span tag:

    <p><span style='color: #e60000;'><u>red underline</u></ span></p>

    Not sure if that's an SSRS quirk or an HTML standard that's a little loose.