This is a migrated thread and some comments may be shown as answers.

HTMLFormatProvider Replaces some font families with Arial

5 Answers 413 Views
RichTextBox
This is a migrated thread and some comments may be shown as answers.
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Bob asked on 03 Jan 2020, 04:00 AM

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.

5 Answers, 1 is accepted

Sort by
0
Accepted
Martin
Telerik team
answered on 06 Jan 2020, 01:24 PM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
answered on 06 Jan 2020, 03:59 PM

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

0
Martin
Telerik team
answered on 08 Jan 2020, 01:20 PM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
answered on 08 Jan 2020, 02:09 PM

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


0
Martin
Telerik team
answered on 09 Jan 2020, 04:24 PM

Hello Bob,

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

Regards,
Martin
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
RichTextBox
Asked by
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Answers by
Martin
Telerik team
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Share this question
or