Table with values to fit container and adjust fonts to max possible size

**Nikel** · February 12th, 2016, 02:23 PM

Hi, I'm looking for a way to present results to the user so that they take all the available room in a splitContainerPanel, so that when it resizes fonts will change to maximize its fonts size. My first approach was to use a label and CreateGraphics and measure the rendered text width and iterate to get close to, but under, the container width. It works nice, but a label will not allow much organization. Tabulation, multiple font sizes, colors, etc are not an option. My second approach was HTML, using a Table and setting it's width and height to 100% and font-size to 100vmin, but the WinForms WebBrowser doesn't seem to work well with CSS. Adding that I'm not very good with HTML and CSS.

This is what I have for that option. It kinda works, but font sizes are not adjusted automatically and no height restriction is applied. It only adjusts width.

Code:

// http://bitsofco.de/css-font-sizing/
string _docType = "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">";
string _base = "<html xmlns=\"http://www.w3.org/1999/xhtml\">";
string _meta = "<meta http-equiv=\"X-UA-Compatible\" content=\"text/html;charset=ISO-8859-1;IE=9\"></meta>";
// Header
System.Text.StringBuilder HTML = new System.Text.StringBuilder();
HTML.Append(_docType + Environment.NewLine);
HTML.Append(_base + Environment.NewLine);
HTML.Append("<head>" + Environment.NewLine);
HTML.Append(_meta + Environment.NewLine);
HTML.Append("<title>Results report</title>" + Environment.NewLine);
HTML.Append("<style type=\"text/css\">" + Environment.NewLine);
HTML.Append("html { " +
"    font-size:100%; " + 
"}" + Environment.NewLine);
HTML.Append("body {    " +
"    font-size:2em; " +
"    width:100%;" +
"    height:100%;" + 
"}" + Environment.NewLine);
HTML.Append("p { " +
"font-size:1em; " +
"}" + Environment.NewLine);
HTML.Append(".tp {" +
"    border-collapse:collapse;" +
"    border-spacing:0;" +
"    border-color:#bbb;" +
"    width:100%;" +
"    height:100%;" +
"    margin: 0px auto;" +
"} " +
".tp th {" +
"    font-size:10vw;" +
"    font-family:Arial,sans-serif;" +
"    font-weight:normal;" +
"    padding:10px 5px;" +
"    border-style:solid;" +
"    border-width:1px;" +
"    overflow:hidden;" +
"    word-break:normal;" +
"    border-color:#bbb;" +
"    color:#493F3F;" +
"    background-color:#9ECCA9;" +
"} ");
HTML.Append(".tg {" +
"    border-collapse:collapse;" +
"    border-spacing:0;" +
"    border-color:#bbb;" +
"    width:100%;" +
"    height:100%;" +
"    margin: 0px auto;" +
"} " +
".tg td {" +
"    font-family:Arial,sans-serif;" +
"    font-size:2em;" +
"    padding:10px 5px;" +
"    border-style:solid;" +
"    border-width:1px;" +
"    overflow:hidden;" +
"    word-break:normal;" +
"    border-color:#bbb;" +
"    color:#594F4F;" +
"    background-color:#E0FFEB;" +
"} " +
".tg th {" +
"    font-family:Arial,sans-serif;" +
"    font-weight:normal;" +
"    padding:10px 5px;" +
"    border-style:solid;" +
"    border-width:1px;" +
"    overflow:hidden;" +
"    word-break:normal;" +
"    border-color:#bbb;" +
"    color:#493F3F;" +
"    background-color:#9DE0AD;" +
"} " +
".tg.tg-cons-title {" +
//"    font-size:14px;" +
"    font-weight:bold;" +
"    font-family:serif;" +
"    text-align:left;" +
"    vertical-align:top" +
"} " +
".tg.tg-rslt-title { " +
//"    font-size:14px;" +
"    font-weight:bold;" +
"    font-family:serif;" +
"    text-align:right;" +
"    vertical-align:top" +
"}" +
".tg.tg-cons-value { " +
"    text-align:left;" +
"    vertical-align:top" +
"} " +
".tg.tg-rslt-value { " +
"    text-align:right;" +
"    vertical-align:top" +
"}" + Environment.NewLine);
HTML.Append("</style>" + Environment.NewLine);
HTML.Append("</head>" + Environment.NewLine);
// Body
HTML.Append("<body id=\"body\">" + Environment.NewLine);
HTML.Append("<div>" + Environment.NewLine);
HTML.Append("    <table class=\"tp\">");
HTML.Append("    <tr><th>" + Cropper.Producto.Nombre + "</th></tr>");

HTML.Append("    </table>");

HTML.Append("    <table class=\"tg\">");
HTML.Append("    <tr>" +
"        <th class=\"tg-cons-title\">" + rs.GetString(language_id + "_Report_Title_Constituent") + " </td>" +
"        <th class=\"tg-rslt-title\">" + rs.GetString(language_id + "_Report_Title_Result") + "</td>" +
"    </tr>");
foreach (KeyValuePair<string, double> result in e.Data)
{
    HTML.Append("    <tr>" +
"        <td class=\"tg-cons-value\">" + result.Key + "</td>" +
"        <td class=\"tg-rslt-value\">" + result.Value.ToString("0.00") + "</td>" +

"    </tr>");
}
HTML.Append("    </table>");
HTML.Append("</div>" + Environment.NewLine);
HTML.Append("</body>" + Environment.NewLine + "</html>");
this.webBrowserResults.DocumentText = HTML.ToString();

My next approach would be to use a DataGridView and dinamically change rows and columns (amount of rows could change), but I'm not sure about the auto font size resizing.

Any ideas? Thank you for your help!

**HanneSThEGreaT** · February 19th, 2016, 03:55 PM

This might hopefully help a bit:

https://msdn.microsoft.com/en-us/lib...or=-2147217396

Thread: Table with values to fit container and adjust fonts to max possible size

Thread Tools

Display

Table with values to fit container and adjust fonts to max possible size

Re: Table with values to fit container and adjust fonts to max possible size

Posting Permissions