Inline Styles for HTML tags

9 posts, 1 answers
  1. Deepthi
    Deepthi avatar
    11 posts
    Member since:
    Jan 2011

    Posted 04 Jan 2011 Link to this post

    I have an application in which I am using RadRichTextBox, everything works fine but I am trying to convert the text entered in this textbox to HTML format. For this I am using HtmlFormatProvider. But the output is not like I want it to be.
    for eg. Suppose I enter text "hello" and convert it, it gives me the following output.

    "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"\">
    <html xmlns=\"\"><head><meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" /><title>Untitled</title><style type=\"text/css\">\r\n.s_D8D99854 { font-family: 'Verdana';font-style: Normal; } \r\n</style></head><body><p ><span class=\"s_D8D99854\">&nbsp;hello</span></p></body></html>"

    But we are expecting  in the following format
    <p ><span style=\"font-family: 'Verdana';font-style: Normal;\">&nbsp;hello</span></p>

    Is there any option in RichTextBox to get  the output in the above format?


  2. Answer
    Iva Toteva
    Iva Toteva avatar
    1319 posts

    Posted 06 Jan 2011 Link to this post

    Hello Deepthi,

    HtmlFormatProvider exports valid HTML documents by default. The good news is that we have provided some options to control the Html output which might be just what you need.

    HtmlFormatProvider has HtmlExportSettings (accessible through the ExportSettings property) with two options:

    DocumentExportLevel - this controls if the the whole Html "Document" will be exported (by default) or just the "Fragment" representing the document body - this option is what you need. 

    Another option - StylesExportMode controls how styles should be exported. If you specify "Classes" (the default value) html will contain Stylesheet blocks and html elements will be assigned class names. The "Inline" option (what you need) will make HtmlFormatProvider to export styles inline for each html element.

    You can set this options in code like this:

    HtmlExportSettings exportSettings = new HtmlExportSettings();
    exportSettings.DocumentExportLevel = DocumentExportLevel.Fragment;
    exportSettings.StyleExportMode = StylesExportMode.Inline;
    HtmlFormatProvider formatProvider = new HtmlFormatProvider();
    formatProvider.ExportSettings = exportSettings;
    .. formatProvider.Export(document); ...

    I hope this will help.If you have any other questions, do not hesitate to contact us again.

    All the best,
    the Telerik team
    Browse the videos here>> to help you get started with RadControls for Silverlight
  3. Daniel Morgenthaler
    Daniel Morgenthaler avatar
    3 posts
    Member since:
    Jul 2004

    Posted 03 Aug 2011 Link to this post

    This could be the solution for me. I have a WCF RIA Service and I use the HtmlDataProvider to bind the RichTextBox to the Model. How can I use the HtmlFormatProvider with the HtmlDataProvider?

    Thanks and have a nice day!

    Update: I found the solution!
    <telerikHtml:HtmlDataProvider Name="htmlDataProvider" RichTextBox="{Binding ElementName=richTextBox}" Html="{Binding Protokolleintrag, Mode=TwoWay, NotifyOnValidationError=true, TargetNullValue='', ValidatesOnExceptions=true}">
                                <telerikHtmlMain:HtmlExportSettings DocumentExportLevel="Fragment" StylesExportMode="Inline" />
    Found the hint in a WPF track: HTML Format
  4. Matthew
    Matthew avatar
    7 posts
    Member since:
    Mar 2009

    Posted 14 Sep 2011 Link to this post

    Daniel, I've been looking for a way to do this for about 3 hours now. Thanks so much for posting this!! Exactly what I was looking for.
  5. Mel
    Mel avatar
    4 posts
    Member since:
    May 2011

    Posted 06 Dec 2012 Link to this post

    Hi Iva,

    I tried to do the same thing as Deepthy so I tried the solution you provided.
    It didn't work for me exactly as you said. 
    I also had to set 

    htmlFormatProvider.ExportSettings.StyleRepositoryExportMode = StyleRepositoryExportMode.DontExportStyles;

    This was weird because from what I read in the documentation for the HtmlFormatProvider that should be the default setting.

    If this has change, maybe the documentation needs to be updated also,

    It's good that it's working, thank you!

  6. Petya
    Petya avatar
    989 posts

    Posted 11 Dec 2012 Link to this post

    Hi Adrian,

    Thank you for your feedback!

    Indeed, the StyleRepositoryExportMode property was not yet a part of the export settings when Iva's previous post was made. However, the documentation on the matter is rather accurate:
    StyleRepositoryExportMode – specifies if the styles of the document kept in the StyleRepository of the document should be serialized. The options are ExportStylesAsCssClasses - the default value, and DontExportStyles.

    Though I can see how it may be a bit misleading. We are currently in the process of updating this exact article, so we will make sure to change this sentence as well.

    If you have other feedback regarding our online documentation feel free to share it with us at

    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  7. Michael MSTG
    Michael MSTG avatar
    46 posts
    Member since:
    Aug 2012

    Posted 04 Aug 2014 in reply to Iva Toteva Link to this post

    It has been quite some time since this post however I used this as a guide to add the HTML format provide to my code.

    I have it as so:
    Dim provider As New HtmlFormatProvider()
            Dim settings As New HtmlExportSettings()
            With settings
                .DocumentExportLevel = DocumentExportLevel.Fragment
                .StylesExportMode = StylesExportMode.Inline
                .ExportBoldAsStrong = True
                .ExportItalicAsEm = True
            End With
            provider.ExportSettings = settings
            dataProviderPricingDescription.FormatProvider = provider
            rtbPricingDescription.Document.History.IsEnabled = False

    However this always produces the following HTML:
    <style type="text/css">  p { margin-top: 0px;margin-bottom: 12px;line-height: 1.15; }   body { font-family: 'Verdana';font-size: 16px; }   .Normal { telerik-style-type: paragraph;telerik-style-name: Normal;border-collapse: collapse; }   .TableNormal { telerik-style-type: table;telerik-style-name: TableNormal;border-collapse: collapse; } </style><p class="Normal "><span style="font-family: 'Arial';">test</span></p>

    Am I missing something?  Should it have not produced the CSS style block?  I thought that is what setting the StyleExportMode was support to prevent.

    I don't want that 'body' CSS tag as the HTML is injected into a non-Silverlight web site and that tag jacks up all other fonts.
  8. Michael MSTG
    Michael MSTG avatar
    46 posts
    Member since:
    Aug 2012

    Posted 04 Aug 2014 in reply to Michael MSTG Link to this post

    The XAML is as so:
    <telerikDocumentsHtml:HtmlDataProvider x:Name="dataProviderPricingDescription"
                                           RichTextBox="{Binding ElementName=rtbPricingDescription}"
                                           Html="{Binding PricingDescription, Mode=TwoWay, NotifyOnValidationError=True, ValidatesOnExceptions=True}" />
    <telerik:RadRichTextBox x:Name="rtbPricingDescription"
                            Grid.Row="0" />
  9. Mihail
    Mihail avatar
    265 posts

    Posted 07 Aug 2014 Link to this post

    Hello Michael,

    With the StylesExportMode you can control how the local styling of the elements will be exported. As inlines styling or as classes.

    The styles which are still exported in your case are the styles from the style repository of RadDocument. You can control how those styles will be exported with the StyleRepositoryExportMode in the HtmlExportSettings. The available options are ExportStylesAsCssClasses and DontExportStyles.

    Here is example on how to do it for your case:
    settings.StylesExportMode = StylesExportMode.Inline;
    settings.StyleRepositoryExportMode = StyleRepositoryExportMode.DontExportStyles;

    If you have further questions do not hesitate to contact us again.

    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
Back to Top