We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
  1. Home
  2. Forum
  3. WPF
  4. Import HTML and apply custom CSS

Import HTML and apply custom CSS

Hi,

I'm trying to use the RichTextBoxAdv in a WPF app to display HTML5 content that comes from a source that serves both the desktop app and a web page.
This HTML will have style applied in the web page from a custom CSS that I would like to use also in the WPF app.

Currently, I have my RichTextBoxAdv control in XAML with a binding to a property in the ViewModel that exposes a DocumentAdv, which is created with the HTMLImporting.ConvertToDocumentAdv as follows:

        public Syncfusion.Windows.Tools.Controls.DocumentAdv HtmlText
        {
            get
            {
                Syncfusion.Windows.Tools.Controls.DocumentAdv doc = Syncfusion.Windows.Tools.Controls.HTMLImporting.ConvertToDocumentAdv( this.HtmlTextFromWebPage );
                return doc;
            }
        }

I would like to know what is the best way to apply the CSS styles before returning the DocumentAdv instance to the XAML view.
I think it should be possible to read the CSS into a string and concatenate it to the this.HtmlTextFromWebPage raw HTML before conversion, but that seems very clunky.

Thanks in advance,
Carlos


4 Replies
AP Arumuga Perumal S Syncfusion Team January 12, 2015 05:21 AM UTC

Hi Carlos,

Thank you for interest in Syncfusion products.

Currently our RichTextBoxAdv control supports internal CSS declaration specified by “.class” selectors only while loading Html. The only way to apply CSS to the document is concatenating CSS string to Html text. Our RichTextBoxAdv control does not have support for other internal CSS declarations or external CSS. We have already logged this requirement as feature request. We will implement this feature in any of our upcoming releases. We usually have an interval of at least three months between releases. The feature implementation would also greatly depend on the factors such as product design, code compatibility and complexity. We will update you when this feature has been implemented. This feature can be tracked through our Features Management System:

Feature Links:
http://www.syncfusion.com/support/directtrac/features/SL-3011.

Please let us know if you have any other questions.

Regards,
Arumuga Perumal S.


CK Carlos Karczeski January 12, 2015 09:20 PM UTC

Thank you for the response, Arumuga.

I've tried the approach you suggested, but I've noticed that the result is not reliable.
The following code below results in a HTML rendered in the control that does not have a RED background, while placing the text to be converted in the w3schools editor (this link: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro ) provides the desired result.

As stated before, I have the RichTextBoxAdv in a XAML page and its Document property is bound to the "HtmlText" property in a ViewModel class.

Here is the modified code to append a Custom CSS:
        public Syncfusion.Windows.Tools.Controls.DocumentAdv HtmlMoreInfoText
        {
            get
            {
                string htmlStartTag = "<!doctype html><html lang=\"en\">";
                string htmlEndTag = "</html>";
                string bodyStartTag = "<body>";
                string bodyEndTag = "<br><table><tr><td>Data1</td><td>Data2</td></tr><tr><td>Data3</td><td>Data4</td></tr></table></body>";
                string cssExample = "<head><style> html, body { margin: 0; padding: 0; background: red; } </style></head>";
                string textToConvert = htmlStartTag + cssExample + bodyStartTag + MoreInfoText.Replace(Environment.NewLine, "<br>") + bodyEndTag + htmlEndTag;
                Syncfusion.Windows.Tools.Controls.DocumentAdv doc = Syncfusion.Windows.Tools.Controls.HTMLImporting.
                    ConvertToDocumentAdv(textToConvert);
                return doc;
            }
        }
        public string MoreInfoText
        {
            get
            {
                return "Test non-HTML text."; //only for testing purposes!  Real data will be a HTML fragment and not a full html document (ie. may or may not have <html> and <body> tags!)
            }
        }

This is the content of "textToConvert" before the HTMLImporting.ConvertToDocumentAdv call:
<!doctype html><html lang="en"><head><style> html, body { margin: 0; padding: 0; background: red; } </style></head><body>Test non-HTML text.<br><table><tr><td>Data1</td><td>Data2</td></tr><tr><td>Data3</td><td>Data4</td></tr></table></body></html>

Attached is a picture of the portion of our UI the RichTextBoxAdv control is using.

...

In addition to that, I've noticed that if the text to convert is a fragment (not a full html doc with all the necessary tags), the converter creates an empty DocumentAdv and nothing is shown.  This is not very desirable, since we need to pick fragments of the page and with this design we need to do some extra processing to make sure all the tags the control is expecting are there.  It would be very desirable to turn off this strict parsing, if possible.

Would you please let me know if your thoughts about those two issues? (eg. CSS not being applied correctly by the control, and how to turn off strict html parsing to allow fragment conversion)

Thanks in advance,
Carlos

Attachment: htmlImportingTest_b8a1c7a6.zip

CK Carlos Karczeski January 12, 2015 11:21 PM UTC

an update... I've tried changing the CSS string to:
string cssExample = "<head><style> table {background-color:red;} body {background-color: red;} </style></head>";

and with this, the table now shows in Red, but the rest of the body (eg. "Test non-HTML text.") is still in a white background.
There is certainly something going on with the HTML importing functionality.

Just to be 100%, there is nothing overriding in the XAML:
                <syncfusion:RichTextBoxAdv Document="{Binding HtmlMoreInfoText}"
                                           FlowDirection="LeftToRight"
                                           IsReadOnly="True"
                                           Margin="24, 16, 24, 16"
                                           />



AP Arumuga Perumal S Syncfusion Team January 13, 2015 09:25 AM UTC

Hi Carlos,

Thank you for your update.

Regarding “CSS not being applied correctly”:
As mentioned in our previous update, currently our RichTextBoxAdv control supports internal CSS declarations specified by “.class” selectors only while loading Html. We have mentioned the sample Html with CSS specified by “.class” selectors below. Below highlighted text specifies the class id that defines styles for Html elements declared with it.

Sample Html:

<html>

<head>

    <style type="text/css">

        .style2057599524 {

            font-style: Normal;

            background-color: #ffffff;

            color: #C3D69B;

            font-size: 12pt;

            font-family: Times New Roman;

        }

 

        .style1080765180 {

            font-style: Normal;

            background-color: #ffffff;

            color: #C3D69B;

            font-size: 12pt;

            font-family: Times New Roman;

        }

 

        .style944000491 {

            text-align: Left;

            margin: 0px 0px 0px 0px;

        }

 

        .style636870544 {

            text-align: Center;

            margin: 0px 0px 0px 0px;

        }

 

        .style1416807578 {

            text-align: Center;

            margin: 0px 0px 0px 0px;

        }

    </style>

</head>

<body>

    <table class="style944000491" border="1">

        <tr>

            <td>

                <p class="style636870544">

                    <span class="style2057599524">Directions&nbsp;to&nbsp;location</span>

                </p>

            </td>

            <td>

                <p class="style1416807578">

                    <span class="style1080765180">Cell</span>

                </p>

            </td>

        </tr>

    </table>

</body>

</html>


We have modified your sample to demonstrate the same and mentioned the sample code snippet below.

Sample C# code:

string bodyStartTag = "<body class=\"style1\">";

string bodyEndTag = "<br><table class=\"style1\"> <tr><td>Data1</td><td>Data2</td></tr><tr><td>Data3</td><td>Data4</td></tr></table></body>";

string cssExample = "<head><style> .style1 { margin: 0; padding: 0; background: red; } </style></head>";


Regarding “styles for body not being applied”:
We are able to reproduce the mentioned issue with styles for <body> elements not preserved while loading Html into RichTextBoxAdv control. Currently we are investigating on this. We will update you with more details on January 19 2015.

Regaring “partial Html import”:
Currently our RichTextBoxAdv supports importing well formatted Html only and does not have support for importing partial Html.  

Please let us know if you have any other questions.

Regards,
Arumuga Perumal S.


Loader.
Live Chat Icon For mobile
Up arrow icon