locked
How to change font-size via TableCell object in C# RRS feed

  • Question

  • Hello, 

    Can anyone please tell me how to adjust the font size of a TableCell object? 

    using (TableRow tr = new TableRow())
    {
    	tr.Controls.Add(new TableCell()
    	{
    	    Text = cells.BlobName, 
    	    //Style = { new Style(),  },
    	    Width = new Unit("50%")//,
    	    //Style ={ HtmlTextWriterStyle.FontSize = new Unit("")  }
    	    //Font = { Size = "10px"}
    	});
    }

    I know how to force the style by embedding in the Text property, but wanted to do it via the TableCell object. 

    Thanks 

    *Update* - I'm using a C# console application to create an email with various HTML in it.  The TableRow 

    has six TableCell objects and this last one needs a smaller font.  



    Thursday, August 6, 2020 12:06 PM

Answers

  • Setting the Width of a TableCell isn't what you want. The width of the cell doesn't control the size of the text in it. It controls the width of the cell. But browsers are allowed to ignore that width. Ultimately during the rendering phase the browser will determine the width of the cell based upon a number of factors. The width doesn't impact the size of the font used inside. To change the font size of something within a cell you need to change the font size on the text. Normally we do this by wrapping the text in a span but you could apply it at the cell level if you want. 

    var cell = new TableCell() {... };
    cell.Font.Size = FontUnit.Smaller;

    Note that you have to use either a relative known size (like smaller) or em offset otherwise it won't work properly at different resolutions. The font itself cannot be changed inside an object initializer so you have to set it after the cell is created.

    Personally I think trying to run the ASP.NET web form controls in a console app just to generate HTML is overkill. That is a lot of overhead for something so simple. It also means that you're going to have a lot of extra stuff in your HTML that you don't need because the ASP.NET controls inject more than just the raw HTML that you need.

    I would strongly recommend that you take a look at a different option. The most basic approach is to just generate the HTML yourself. It really is quite trivial.

    //Making these helper methods and data up since I don't know what you have...
    writer.WriteStartElement("table");
    //Generate header if you want
    foreach (var row in myRowsToGenerateHtml)
    {
       writer.WriteStartElement("tr");
       foreach (var cell in row.Cells)
       {
          writer.WriteStartElement("td");
          writer.WriteEndElement("td");
       };
       writer.WriteEndElement("tr");
    }

    The problem with this approach is that the enumeration gets lost in the boilerplate text generation. Therefore a text generation tool would be better. In fact Razor is the approach we use to generate HTML emails. With Razor, which you can call from any app, you can create an HTML template to match what you want, add the data wrapper and then have Razor generate the HTML for you.

    //Raw template stored on disk, in a resource, whatever
    var template = LoadTemplate();
    
    //Set up the data you want to render
    var model = ...;
    
    //Either use Razor directly or use one of the convenient wrapper libraries that make this easier
    var razor = new RazorEngine(...);
    var html = razor.GenerateTemplate(template, model);
    
    //The HTML template stored elsewhere
    <!DOCTYPE>
    <html>
       ...
       <body>
          <h1>My Email</h1>
          <table>
             @foreach (var row in Model.Rows) {   
             <tr>
                @foreach (var cell in row.Cells) {
                   <td>@cell.Value</td>
                }
             </tr>
             }
          </table>
       </body>
    </html>


    Michael Taylor http://www.michaeltaylorp3.net

    Thursday, August 6, 2020 2:14 PM

All replies

  • Setting the Width of a TableCell isn't what you want. The width of the cell doesn't control the size of the text in it. It controls the width of the cell. But browsers are allowed to ignore that width. Ultimately during the rendering phase the browser will determine the width of the cell based upon a number of factors. The width doesn't impact the size of the font used inside. To change the font size of something within a cell you need to change the font size on the text. Normally we do this by wrapping the text in a span but you could apply it at the cell level if you want. 

    var cell = new TableCell() {... };
    cell.Font.Size = FontUnit.Smaller;

    Note that you have to use either a relative known size (like smaller) or em offset otherwise it won't work properly at different resolutions. The font itself cannot be changed inside an object initializer so you have to set it after the cell is created.

    Personally I think trying to run the ASP.NET web form controls in a console app just to generate HTML is overkill. That is a lot of overhead for something so simple. It also means that you're going to have a lot of extra stuff in your HTML that you don't need because the ASP.NET controls inject more than just the raw HTML that you need.

    I would strongly recommend that you take a look at a different option. The most basic approach is to just generate the HTML yourself. It really is quite trivial.

    //Making these helper methods and data up since I don't know what you have...
    writer.WriteStartElement("table");
    //Generate header if you want
    foreach (var row in myRowsToGenerateHtml)
    {
       writer.WriteStartElement("tr");
       foreach (var cell in row.Cells)
       {
          writer.WriteStartElement("td");
          writer.WriteEndElement("td");
       };
       writer.WriteEndElement("tr");
    }

    The problem with this approach is that the enumeration gets lost in the boilerplate text generation. Therefore a text generation tool would be better. In fact Razor is the approach we use to generate HTML emails. With Razor, which you can call from any app, you can create an HTML template to match what you want, add the data wrapper and then have Razor generate the HTML for you.

    //Raw template stored on disk, in a resource, whatever
    var template = LoadTemplate();
    
    //Set up the data you want to render
    var model = ...;
    
    //Either use Razor directly or use one of the convenient wrapper libraries that make this easier
    var razor = new RazorEngine(...);
    var html = razor.GenerateTemplate(template, model);
    
    //The HTML template stored elsewhere
    <!DOCTYPE>
    <html>
       ...
       <body>
          <h1>My Email</h1>
          <table>
             @foreach (var row in Model.Rows) {   
             <tr>
                @foreach (var cell in row.Cells) {
                   <td>@cell.Value</td>
                }
             </tr>
             }
          </table>
       </body>
    </html>


    Michael Taylor http://www.michaeltaylorp3.net

    Thursday, August 6, 2020 2:14 PM
  • Thanks for the info.  

    I know using the ASP.NET webform controls is overkill but it only takes milliseconds and there is no performance issues were this console app is to run.   I just don't like the look of raw HTML inside C# code.  

    I will look at the relative sizing as you suggest. 

    FontUnit.Smaller;

    Regards

    Dave

    Friday, August 7, 2020 6:43 AM
  • For anyone searching in future, this fixed my issue,

    tr.Controls.Add(new TableCell()
    {
       Text = cells.BlobName,
       Width = new Unit("57%"),
       Font = { Size = FontUnit.Small}
    });

    Friday, August 7, 2020 7:18 AM