Search code examples
c#htmlhtml-agility-pack

Change Font Family and Font Size using HtmlAgilitPack


I need to change font family and font size of the given HTML to a specific font family and size. (Ex: Times New Romen, size: 12) Do you know how it could be done using HtmlAgilityPack?

Font size can be defined in many ways in the given html. Ex: using <Font Size="" tag, <H3>, also Style tag. Therefore I need to change all to a specific font size.

Following is a Sample HTML Code:

    <html><H3 style="MARGIN: 0in 0in 0pt 0.5in"><SPAN style="mso-bidi-font-family: &#39;Tw Cen MT Condensed Extra Bold&#39;; mso-fareast-font-family: &#39;Tw Cen MT Condensed Extra Bold&#39;"><SPAN style="mso-list: Ignore"><FONT size="5" face="Tw Cen MT Condensed Extra Bold">1.1.1</FONT><SPAN style="FONT: 7pt &#39;Times New Roman&#39;">&nbsp;&nbsp; </SPAN></SPAN></SPAN><FONT size="5" face="Tw Cen MT Condensed Extra Bold">Sample text1: The following code iterates through all the items in the ListBox and addsPictureBoxes dynamically to a FlowLayoutPanel using the image sources retrieved in the previous step.</FONT></H3>
<P style="MARGIN: 0in 0in 0pt" class="MsoNormal"><?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" /?></P>
<H3 style="MARGIN: 0in 0in 0pt 0.5in"><SPAN style="mso-bidi-font-family: &#39;Tw Cen MT Condensed Extra Bold&#39;; mso-fareast-font-family: &#39;Tw Cen MT Condensed Extra Bold&#39;"><SPAN style="mso-list: Ignore"><FONT size="5" face="Tw Cen MT Condensed Extra Bold">1.1.2</FONT><SPAN style="FONT: 7pt &#39;Times New Roman&#39;">&nbsp;&nbsp; </SPAN></SPAN></SPAN><FONT size="5" face="Tw Cen MT Condensed Extra Bold">Sample text 2: The following code iterates through all the items in the ListBox and addsPictureBoxes dynamically to a FlowLayoutPanel using the image sources retrieved in the previous step.</FONT></H3>
<P style="TEXT-INDENT: -0.25in; MARGIN: 0in 0in 0pt 0.5in; mso-list: l0 level1 lfo2; tab-stops: list .5in" class="MsoNormal"><SPAN style="FONT-FAMILY: &#39;Bauhaus 93&#39;; FONT-SIZE: 20pt; mso-bidi-font-family: &#39;Bauhaus 93&#39;; mso-fareast-font-family: &#39;Bauhaus 93&#39;"><SPAN style="mso-list: Ignore">a.<SPAN style="FONT: 7pt &#39;Times New Roman&#39;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </SPAN></SPAN></SPAN><SPAN style="FONT-FAMILY: &#39;Bauhaus 93&#39;; FONT-SIZE: 20pt">Sample text 3: The following code iterates through all the items in the ListBox and addsPictureBoxes dynamically to a FlowLayoutPanel using the image sources retrieved in the previous step.</SPAN></P>
<P style="MARGIN: 0in 0in 0pt 0.25in" class="MsoNormal"><SPAN style="FONT-FAMILY: &#39;Bauhaus 93&#39;; FONT-SIZE: 20pt"></SPAN></P>
<P style="MARGIN: 0in 0in 0pt 0.5in" class="MsoNormal"><SPAN style="FONT-FAMILY: &#39;Bradley Hand ITC&#39;; FONT-SIZE: 18pt">Sample Text 4: The following code iterates through all the items in the ListBox and addsPictureBoxes dynamically to a FlowLayoutPanel using the image sources retrieved in the previous step.</SPAN></P></html>

Solution

  • I did this using HtmlAgilityPack. Following is the code I have developed.

    HtmlAgilityPack.HtmlDocument doc = new HtmlAgilityPack.HtmlDocument();
    doc.LoadHtml(inputHtml);
    var elementsWithStyleAttribute = doc.DocumentNode.SelectNodes(string.Concat("//", tagName));
    
    if (null == elementsWithStyleAttribute)
    {
        return inputHtml;
    }
    
    foreach (var element in elementsWithStyleAttribute)
    {
        var classElement = element.GetAttributeValue("class", null);
    
        if (!string.IsNullOrWhiteSpace(classElement))
        {
            // Remove class attribute.
            element.Attributes["class"].Remove();
        }
    
        var styles = element.GetAttributeValue("style", null);
    
        if (!string.IsNullOrWhiteSpace(styles)) //&& (styles.ToUpper().Contains("FONT-FAMILY:") || styles.ToUpper().Contains("FONT-SIZE:")))
        {
            element.Attributes["style"].Remove();
    
            string[] splitter = { ";" };
            string[] styleClasses = styles.Split(splitter, StringSplitOptions.None);
    
            StringBuilder sbStyles = new StringBuilder("font-family:Arial; font-size:10pt;");
    
            if (null != styleClasses && styleClasses.Length > 0)
            {
                foreach (var item in styleClasses)
                {
                    if (!string.IsNullOrWhiteSpace(item) && !item.ToUpper().Contains("FONT-FAMILY:")
                        && !item.ToUpper().Contains("FONT-SIZE:") && !item.ToUpper().Contains("FONT:"))
                    {
                        // Add existing styles except font size and font family styles.
                        sbStyles.Append(item.Trim());
                        sbStyles.Append(";");
                    }
                }
            }
    
            element.SetAttributeValue("style", sbStyles.ToString());
        }
        else
        {
            element.SetAttributeValue("style", "font-family:Arial; font-size:10pt;");
        }
    }
    
    return doc.DocumentNode.InnerHtml;