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

Font of Merged Fields

5 Answers 97 Views

RichTextBox

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

This question is locked. New answers and comments are not allowed.

Eric asked on 26 Mar 2013, 02:57 PM

Editor.jpg

GeneratedHtml.jpg

HtmlOutput.jpg

Hello,
I am having an issue regarding setting the font of a merged field when exporting to HTML. In my application, the RichTextBox sets its default font to Verdana 12pt. I change it to Arial 11pt. All the fonts in my document appear to be Arial 11 (See editor.jpg).

This document is then exported to HTML. When I inspect the generated html code, the merge field is never set to Arial 11, it stays as Verdana (see generatedhtml.jpg). As a result, the HTML file does not look correct (see htmloutput.jpg).

How can I get the merged field text to respect the font change?

Thank you.

5 Answers, 1 is accepted

answered on 22 Apr 2013, 08:58 AM

Hello,
I finally had an opportunity to upgrade all of our controls to the latest version, and am still experiencing this issue. When the control first loads, the font is Verdana. I change it to Arial and then type out all of the text inserting required merged fields as I go along. I am then exporting the document as HTML and sending in an email.

When I receive the email all of my added text is in Arial, however the merged fields are still in Verdana. Below is the html I receive. In here you can see the embedded styles for both Verdana and for Arial. I do not know why the Verdana one is there at all.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"[]>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled</title>

<style type="text/css">

p { margin-top: 0px;margin-bottom: 10px;line-height: 1.14999997615814; }

body { font-family: 'Verdana';font-size: 16px; }

.p_AD45AF3A { margin-top: 0px;margin-bottom: 10px;line-height: 1.14999997615814; }

.s_903713FB { font-family: 'Arial';font-size: 16px; }

.s_D3FCB7B8 { font-family: 'Verdana';font-size: 16px; } </style>

</head>

<body>

<p class="p_AD45AF3A">

<span class="s_903713FB">Testing font in merged fields. Everything should be Arial in here.</span>

</p>

<p class="p_AD45AF3A">

<span class="s_903713FB">Dear </span>

<span class="s_D3FCB7B8">Rory</span>

<span class="s_903713FB"></span>

<span class="s_D3FCB7B8">McTory</span>

<span class="s_903713FB"> ,</span>

</p>

<p class="p_AD45AF3A">

<span class="s_903713FB">This should all be Arial.</span>

</p>

<p class="p_AD45AF3A">

<span class="s_903713FB"> </span>

</p>

<p class="p_AD45AF3A">

<span class="s_903713FB"> </span>

</p>

</body>

</html><DIV id=cbftr align=center><BR><TABLE border=0 cellSpacing=0 cellPadding=0><TBODY><TR><TD align = "center" ><SPAN style="FONT-FAMILY: Arial; COLOR: #000000; FONT-SIZE: 10px">This email was sent to / Ce courriel a été envoyé à </SPAN><SPAN style="FONT-FAMILY: Arial; COLOR: #000000; FONT-SIZE: 10px">seanriedel@conservative.ca</SPAN><SPAN style="FONT-FAMILY: Arial; COLOR: #000000; FONT-SIZE: 10px">.</SPAN></TD></TR><TR><TD align = "center"><SPAN style="FONT-FAMILY: Arial; COLOR: #000000; FONT-SIZE: 10px"> </SPAN></TD></TR><TR><TD align = "center" ><SPAN style="FONT-FAMILY: Arial; COLOR: #000000; FONT-SIZE: 10px">Email communications from / Communications électroniques de la part de:</SPAN></TD></TR><TR><TD align = "center" ><SPAN style="FONT-FAMILY: Arial; COLOR: #000000; FONT-SIZE: 10px">Conservative Party of Canada, #1204 - 130 Albert Street, Ottawa, ON, Canada, K1P 5G4, <BR>Parti conservateur du Canada - 130 rue Albert, bureau 1204, Ottawa, Ontario, Canada, K1P 5G4.</SPAN></TD></TR><TR><TD align = "center"><SPAN style="FONT-FAMILY: Arial; COLOR: #000000; FONT-SIZE: 10px"> </SPAN></TD></TR><TR><TD align = "center" ><SPAN style="FONT-FAMILY: Arial; COLOR: #000000; FONT-SIZE: 10px">Click for immediate removal with / Veuillez cliquer afin d'être supprimé</SPAN></TD></TR><TR><TD align = "center" ><SPAN style="FONT-FAMILY: Arial; COLOR: #000000; FONT-SIZE: 10px">immédiatement de notre liste à l'aide de </SPAN><A href=

"http://software.clickback.com/external_pages/opt_out.aspx?lwjtoknmninvojnqnmnlnmntlhnknwnvoknmojonniolnqonnmjvnknijtkqkikpkkkojtkhjtkikhkqkqkqknjtkjkjkjkpkijtkkkikhkikhkokkkojtkjjtkkkikhkikhkokkkojtkqkikpkkko"

><SPAN style="FONT-FAMILY: Arial; COLOR: #000000; FONT-SIZE: 10px">Safe<IMG border=0 src="http://software.clickback.com/images/letter.gif">Remove</SPAN></A><SPAN style="FONT-FAMILY: Arial; COLOR: #000000; FONT-SIZE: 10px">.</SPAN></TD></TR></TBODY></TABLE></DIV><br /><div align=center><br><br><table width='600' cellpadding=0 cellspacing=0 border=0><tr><td align = "center" rowspan=5 colspan=2 valign=bottom><span style='font-size:10pt;font-family:Arial;color:black;'></span></td></tr>

</table><img height=1 width=1 src=

'http://software.clickback.com/external_pages/logo.aspx?mnjtoknmninvojnqnmnlnmntlhnknwnvoknmojonniolnqonnmjvnknijtkqkikpkkkojtkhjtkikhkqkqkqknjtkjkjkjkpkijtkkkikhkikhkokkkojtkjjtkkkikhkikhkokkkojtkqkikpkkko'

></div>

And here is the code we use to export the document to html:

private void UploadDocument()

{

int count = 0;

string imageFileName = initiativeRunId.ToString() + "_{0}.{1}";

string newFileName = string.Empty;

exportFileName = initiativeRunId.ToString() + ".html";

HtmlFormatProvider exporter = new HtmlFormatProvider();

HtmlExportSettings settings = new HtmlExportSettings()

{

ImageExportMode = ImageExportMode.ImageExportingEvent

};

settings.ImageExporting += (s, e) =>

{

count++;

newFileName = string.Format(imageFileName, count.ToString(), e.Image.Extension);

newFileNames.Add(newFileName, e.Image.RawData);

e.Src = newFileName;

e.Alt = "image";

};

settings.StylesExportMode = StylesExportMode.Classes;

settings.ExportFontStylesAsTags = true;

settings.DocumentExportLevel = DocumentExportLevel.Document;

settings.StyleRepositoryExportMode = StyleRepositoryExportMode.DontExportStyles;

exporter.ExportSettings = settings;

using (MemoryStream stream = new MemoryStream())

{

string exported = exporter.Export(radDocument);

content = AddCustomPropertyToHyperlink(exported);

}

UploadImages();

}

Please let me know if you require any more information.

Thanks.

answered on 25 Apr 2013, 02:06 PM

Hello Eric,

I made some tests with your code and I am still unable to reproduce the described behavior. The result is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled</title>

<style type="text/css">

p {

margin-top: 0px;

margin-bottom: 12px;

line-height: 1.15;

}

body {

font-family: 'Verdana';

font-size: 16px;

}

.p_6AAD5060 {

margin-top: 0px;

margin-bottom: 12px;

line-height: 1.15;

}

.s_903713FB {

font-family: 'Arial';

font-size: 16px;

}

</style>

</head>

<body>

<p class="p_6AAD5060">

<span class="s_903713FB">Dear </span>

<span class="s_903713FB">Andrew</span>

<span class="s_903713FB"></span>

</p>

</body>

</html>

Can you please prepare a simple working demo solution reproducing the problem and attach it to a support ticket so we can investigate the problem further. Please notice that you can attach archives only to tickets and not to forum threads.

All the best,
Mihail
the Telerik team

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.