HTMLFormatProvider Replaces some font families with Arial

[Bob]

I am importing some HTML to RadRichTextBox using HTMLFormatProvider Import.  Some of the font-family values are changing to Arial when viewing the export of HTML or XAML.

This is the import code, where editor is a RadRichTextBox:

private void ImportHtml(string HTML)
{
    HtmlFormatProvider _provider = new HtmlFormatProvider();
    HtmlImportSettings settings = new HtmlImportSettings();

    _provider.ImportSettings = settings;
    settings.UseDefaultStylesheetForFontProperties = true;
   editor.Document = _provider.Import(HTML);
}

 

This is the HTML being imported:

<p>
  <span style="font-family:Arial;">ABCDEFGHIJKLMNOPQRSTUVWXYZ</span>
</p>
<p>
  <span style="font-family:Helvetica;">ABCDEFGHIJKLMNOPQRSTUVWXYZ</span>
</p>
<p>
  <span style="font-family:TimesNewRoman;">ABCDEFGHIJKLMNOPQRSTUVWXYZ</span>
</p>
<p>
  <span style="font-family:Verdana;">ABCDEFGHIJKLMNOPQRSTUVWXYZ</span>
</p>

 

This is the HTML after import (exported using HTMLFormatProvider).  Notice that Verdana remains the same, but Helvetica and Times New Romans are changed to Arial in the class s_51202CB4:

"<style type=\"text/css\">\r\np { margin-top: 0px;margin-bottom: 0px;line-height: 1.15; } \r\nbody { font-family: 'Verdana'; } \r\n.Normal { telerik-style-type: paragraph;telerik-style-name: Normal;border-collapse: collapse; } \r\n.TableNormal { telerik-style-type: table;telerik-style-name: TableNormal;font-family: 'Verdana';margin-top: 0px;margin-right: 0px;margin-bottom: 0px;margin-left: 0px;text-indent: 0px;line-height: 1.15;text-align: left;border-left: 0px none #000000;border-top: 0px none #000000;border-right: 0px none #000000;border-bottom: 0px none #000000;border-collapse: collapse; } \r\n.NormalWeb { telerik-style-type: paragraph;telerik-style-name: NormalWeb;margin-top: 0px;margin-bottom: 0px;border-collapse: collapse; } \r\n.s_51202CB4 { telerik-style-type: local;font-family: 'Arial'; } \r\n.s_DF7D34AD { telerik-style-type: local;font-family: 'Verdana'; } </style><p class=\"NormalWeb \"><span class=\"s_51202CB4\">ABCDEFGHIJKLMNOPQRSTUVWXYZ</span></p><p class=\"NormalWeb \"><span class=\"s_51202CB4\">ABCDEFGHIJKLMNOPQRSTUVWXYZ</span></p><p class=\"NormalWeb \"><span class=\"s_51202CB4\">ABCDEFGHIJKLMNOPQRSTUVWXYZ</span></p><p class=\"NormalWeb \"><span class=\"s_DF7D34AD\">ABCDEFGHIJKLMNOPQRSTUVWXYZ</span></p>"

 

This is the XAML:

"<t:RadDocument xmlns=\"http://schemas.microsoft.com/winfx/2006/xaml/presentation\" xmlns:t=\"clr-namespace:Telerik.Windows.Documents.Model;assembly=Telerik.Windows.Documents\" xmlns:s=\"clr-namespace:Telerik.Windows.Documents.Model.Styles;assembly=Telerik.Windows.Documents\" xmlns:r=\"clr-namespace:Telerik.Windows.Documents.Model.Revisions;assembly=Telerik.Windows.Documents\" xmlns:n=\"clr-namespace:Telerik.Windows.Documents.Model.Notes;assembly=Telerik.Windows.Documents\" xmlns:th=\"clr-namespace:Telerik.Windows.Documents.Model.Themes;assembly=Telerik.Windows.Documents\" version=\"1.4\" LayoutMode=\"Flow\" LineSpacing=\"1.15\" LineSpacingType=\"Auto\" ParagraphDefaultSpacingAfter=\"0\" ParagraphDefaultSpacingBefore=\"0\" StyleName=\"defaultDocumentStyle\">\r\n  <t:RadDocument.Captions>\r\n    <t:CaptionDefinition IsDefault=\"True\" IsLinkedToHeading=\"False\" Label=\"Figure\" LinkedHeadingLevel=\"0\" NumberingFormat=\"Arabic\" SeparatorType=\"Hyphen\" />\r\n    <t:CaptionDefinition IsDefault=\"True\" IsLinkedToHeading=\"False\" Label=\"Table\" LinkedHeadingLevel=\"0\" NumberingFormat=\"Arabic\" SeparatorType=\"Hyphen\" />\r\n  </t:RadDocument.Captions>\r\n  <t:RadDocument.ProtectionSettings>\r\n    <t:DocumentProtectionSettings EnableDocumentProtection=\"False\" Enforce=\"False\" HashingAlgorithm=\"None\" HashingSpinCount=\"0\" ProtectionMode=\"ReadOnly\" />\r\n  </t:RadDocument.ProtectionSettings>\r\n  <t:RadDocument.Styles>\r\n    <s:StyleDefinition DisplayName=\"defaultDocumentStyle\" IsCustom=\"False\" IsDefault=\"False\" IsPrimary=\"True\" Name=\"defaultDocumentStyle\" Type=\"Default\">\r\n      <s:StyleDefinition.ParagraphStyle>\r\n        <s:ParagraphProperties LineSpacing=\"1.15\" />\r\n      </s:StyleDefinition.ParagraphStyle>\r\n      <s:StyleDefinition.SpanStyle>\r\n        <s:SpanProperties FontFamily=\"Verdana\" FontSize=\"16\" FontStyle=\"Normal\" FontWeight=\"Normal\" ForeColor=\"#FF000000\" />\r\n      </s:StyleDefinition.SpanStyle>\r\n    </s:StyleDefinition>\r\n    <s:StyleDefinition DisplayName=\"Normal\" IsCustom=\"False\" IsDefault=\"True\" IsPrimary=\"True\" Name=\"Normal\" Type=\"Paragraph\" UIPriority=\"0\" />\r\n    <s:StyleDefinition DisplayName=\"Normal (Web)\" IsCustom=\"False\" IsDefault=\"False\" IsPrimary=\"False\" Name=\"NormalWeb\" Type=\"Paragraph\" UIPriority=\"99\">\r\n      <s:StyleDefinition.ParagraphStyle>\r\n        <s:ParagraphProperties AutomaticSpacingAfter=\"True\" AutomaticSpacingBefore=\"True\" SpacingAfter=\"0\" SpacingBefore=\"0\" />\r\n      </s:StyleDefinition.ParagraphStyle>\r\n    </s:StyleDefinition>\r\n    <s:StyleDefinition DisplayName=\"Table Normal\" IsCustom=\"False\" IsDefault=\"True\" IsPrimary=\"False\" Name=\"TableNormal\" Type=\"Table\" UIPriority=\"59\" />\r\n  </t:RadDocument.Styles>\r\n  <t:Section>\r\n    <t:Paragraph StyleName=\"NormalWeb\">\r\n      <t:Span FontFamily=\"Arial\" Text=\"ABCDEFGHIJKLMNOPQRSTUVWXYZ\" />\r\n    </t:Paragraph>\r\n    <t:Paragraph StyleName=\"NormalWeb\">\r\n      <t:Span FontFamily=\"Arial\" Text=\"ABCDEFGHIJKLMNOPQRSTUVWXYZ\" />\r\n    </t:Paragraph>\r\n    <t:Paragraph StyleName=\"NormalWeb\">\r\n      <t:Span FontFamily=\"Arial\" Text=\"ABCDEFGHIJKLMNOPQRSTUVWXYZ\" />\r\n    </t:Paragraph>\r\n    <t:Paragraph StyleName=\"NormalWeb\">\r\n      <t:Span FontFamily=\"Verdana\" Text=\"ABCDEFGHIJKLMNOPQRSTUVWXYZ\" />\r\n    </t:Paragraph>\r\n  </t:Section>\r\n</t:RadDocument>"

 

Please let me know if I am missing something here to maintain the correct font families.

[Martin]

Hello Bob,

After having examined the provided information, I found the following obstacles:

1. Helvetica is not one of the registered font families in the RadRichTextBox, so in order to be successfully imported/exported, you'll need to register it. Check the following code snippet:

   FontManager.RegisterFont(new FontFamily("Helvetica"));

2. I notice that in the imported HTML the Times New Roman font-family is written without spaces between the words (TimesNewRoman), and this should be the reason the FontManager doesn't recognize it. In order to prevent this, please, make sure you are writing the correct font-family names. Check the following code snippet:

   <p>
     <span style="font-family:Times New Roman;">ABCDEFGHIJKLMNOPQRSTUVWXYZ</span>
   </p>

I hope this helps.

Regards,
Martin
Progress Telerik

[Bob]

Hi Martin,

Thanks for your help, I have this working now.

Please note that the HTML output of your Kendo editor creates the font-family "TimesNewRoman" without spaces.  This appears to be an inconsistency between your products.

Bob

[Martin]

Hi Bob,

I am happy to hear this is a solution to your case and thank you for the provided feedback.

As for the case with the Kendo Editor, could I ask you to send us a Dojo demonstrating the described behavior or step-by-step description of how to reproduce it? I tried setting the Times New Roman font to some text but couldn’t observe the stripping of the space characters.

Regards,
Martin
Progress Telerik

[Bob]

Hi Martin,
I investigated further and found that the "TimesNewRoman" setting is our fault.  When the fonts were added to the Kendo editor, the spaces were removed as follows:

.FontName(fonts => fonts
            .Add("Arial", "Arial")
            .Add("Helvetica", "Helvetica")
            .Add("Times New Roman", "TimesNewRoman")
            .Add("Verdana", "Verdana")
         )

 

Sorry for the misinformation, and thanks again for the help.

Bob

[Martin]

Hello Bob,

No problem. I am happy to hear that everything is clear now and working as expected. 

Regards,
Martin
Progress Telerik