Images are incorrect size

Dec 9, 2013 at 5:06 PM
I love the potential of your solution. My solution generates the HTML and images on the fly so your api is great. The problem is that I am getting an index out of range error on pages with lots of images and the images are not the correct size. I will try to create a good repro for you, but since it is all generated at run time it is more involved. Let me know if you have any thoughts of where I should start looking.

Thanks
Dec 9, 2013 at 5:23 PM
I fixed the index out of range error. There is a simple bug on line 266 of CssLayoutEngineTable.cs. Unless I am reading something wrong the line should be:

for (int j = 0; j < rows[i].Boxes.Count; j++)
not
for (int j = 0; j <= rows[i].Boxes.Count; j++)
Dec 10, 2013 at 1:23 AM
The issue seems to be that your solution does not grow divs with their content. My HTML does not specify size at every level.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head> <title>action URL</title> <META http-equiv="Content-Type" content="text/html; charset=utf-8"/> <META http-equiv="Content-Style-Type" content="text/css"/> <META http-equiv="Content-Script-Type" content="text/javascript"/> <META http-equiv="X-UA-Compatible" content="IE=5"/> <META HTTP-EQUIV="Location" CONTENT="http://demo.forerunnersw.com/ReportServer?%2FNorthwind%20Test%20Reports%2Faction%20URL"/> <META HTTP-EQUIV="Uri" CONTENT="http://demo.forerunnersw.com/ReportServer?%2FNorthwind%20Test%20Reports%2Faction%20URL"/> <META HTTP-EQUIV="Last-Modified" CONTENT="12/10/2013 00:48:40"> <META NAME="Generator" CONTENT="Microsoft Report 8.0 "/> <META NAME="Originator" CONTENT="Microsoft Report 8.0 "/> <style type="text/css">.ap{background-color:Transparent;border:1pt none Black;}.a16xB{border:1pt none Black;background-color:Transparent;}.a4{word-wrap:break-word;white-space:pre-wrap;padding-left:2pt;padding-top:2pt;padding-right:2pt;padding-bottom:2pt;border:1pt none Black;background-color:Transparent;font-style:normal;font-family:Arial;font-size:10pt;font-weight:400;text-decoration:none;unicode-bidi:normal;color:Black;direction:ltr;layout-flow:horizontal;writing-mode:lr-tb;vertical-align:top;text-align:left;}.a9{border:1pt solid #d3d3d3;background-color:White;}.a14{border:1pt solid #d3d3d3;background-color:White;}.r1{HEIGHT:100%;WIDTH:100%}.r2{HEIGHT:100%;WIDTH:100%;overflow:hidden}.r3{HEIGHT:100%}.r4{border-style:none}.r5{border-left-style:none}.r6{border-right-style:none}.r7{border-top-style:none}.r8{border-bottom-style:none}.r10{border-collapse:collapse}.r9{border-collapse:collapse;table-layout:fixed}.r11{WIDTH:100%;overflow-x:hidden}.r12{position:absolute;display:none;background-color:white;border:1px solid black;}.r13{text-decoration:none;color:black;cursor:pointer;}.r14{font-size:0pt}.r15{direction:RTL;unicode-bidi:embed}.r16{margin-top:0pt;margin-bottom:0pt}.r17{HEIGHT:100%;WIDTH:100%;display:inline-table}.r18{HEIGHT:100%;display:inline-table} * { -webkit-box-sizing: border-box; box-sizing: border-box }</style> </head> <body style="BORDER: 0px; MARGIN: 0px; PADDING: 0px">
  <DIV dir="LTR" style="direction:ltr" ID="oReportDiv">
     <DIV style="WIDTH:100%;" class="ap">
        <TABLE CELLSPACING="0" CELLPADDING="0">
           <TR>
              <TD ID="oReportCell">
                 <TABLE CELLSPACING="0" CELLPADDING="0" BORDER="0" class="a16xB">
                    <TR>
                       <TD style="vertical-align:top">
                          <TABLE CELLSPACING="0" CELLPADDING="0" BORDER="0" COLS="6" LANG="en-US" class="r10" style="WIDTH:175.1543mm">
                             <TR>
                                <TD style="HEIGHT:9.49mm;WIDTH:0.00mm"></TD>
                                <TD style="WIDTH:6.05mm;min-width: 6.05mm;"></TD>
                                <TD style="WIDTH:147.37mm;min-width: 147.37mm;"></TD>
                                <TD style="WIDTH:9.00mm;min-width: 9.00mm;"></TD>
                                <TD style="WIDTH:8.20mm;min-width: 8.20mm;"></TD>
                                <TD style="WIDTH:4.53mm;min-width: 4.53mm;"></TD>
                             </TR>
                             <TR VALIGN="top">
                                <TD style="HEIGHT:6.35mm;WIDTH:0.00mm"></TD>
                                <TD></TD>
                                <TD>
                                   <TABLE CELLSPACING="0" CELLPADDING="0" LANG="en-US" style="">
                                      <TR>
                                         <TD style="WIDTH:147.37mm;min-width: 145.96mm;HEIGHT:6.35mm;" class="a4">
                                            <DIV style="WIDTH:145.96mm;">Action go to URL</DIV>
                                         </TD>
                                      </TR>
                                   </TABLE>
                                </TD>
                                <TD ROWSPAN="2" COLSPAN="3"></TD>
                             </TR>
                             <TR>
                                <TD style="HEIGHT:6.09mm;WIDTH:0.00mm"></TD>
                                <TD COLSPAN="2"></TD>
                             </TR>
                             <TR VALIGN="top">
                                <TD style="HEIGHT:89.16mm;WIDTH:0.00mm"></TD>
                                <TD></TD>
                                <TD COLSPAN="2">
                                   <DIV>
                                      <IMG BORDER="0" style="HEIGHT:89.16mm;WIDTH:156.37mm;min-width: 156.37mm;" class="a9" SRC="http://demo.forerunnersw.com/ReportServer?%2FNorthwind%20Test%20Reports%2Faction%20URL&rs%3ASessionID=tg54tn45wcrea0innb0l1n55&rs%3AFormat=HTML4.0&rs%3AImageID=C_7iT0_1"/>
                                   </DIV>
                                </TD>
                                <TD ROWSPAN="2" COLSPAN="2"></TD>
                             </TR>
                             <TR>
                                <TD style="HEIGHT:7.94mm;WIDTH:0.00mm"></TD>
                                <TD COLSPAN="3"></TD>
                             </TR>
                             <TR VALIGN="top">
                                <TD style="HEIGHT:53.71mm;WIDTH:0.00mm"></TD>
                                <TD></TD>
                                <TD COLSPAN="3">
                                   <DIV>
                                      <IMG BORDER="0" style="HEIGHT:53.71mm;WIDTH:164.57mm;min-width: 164.57mm;" class="a14" SRC="http://demo.forerunnersw.com/ReportServer?%2FNorthwind%20Test%20Reports%2Faction%20URL&rs%3ASessionID=tg54tn45wcrea0innb0l1n55&rs%3AFormat=HTML4.0&rs%3AImageID=C_16iT1_1"/>

                                   </DIV>
                                </TD>
                                <TD></TD>
                             </TR>
                          </TABLE>
                       </TD>
                    </TR>
                 </TABLE>
              </TD>
              <TD WIDTH="100%" HEIGHT="0"></TD>
           </TR>
           <TR>
              <TD WIDTH="0" HEIGHT="100%"></TD>
           </TR>
        </TABLE>
     </DIV>
  </DIV>
  <div style="page-break-after:always">
     <hr/>
  </div>
  <DIV dir="LTR" style="WIDTH:100%;direction:ltr">
     <DIV style="WIDTH:100%;" class="ap">
        <TABLE CELLSPACING="0" CELLPADDING="0">
           <TR>
              <TD>
                 <TABLE CELLSPACING="0" CELLPADDING="0" BORDER="0" style="WIDTH:175.15mm;min-width: 175.15mm;HEIGHT:3.41mm;" class="a16xB">
                    <TR>
                       <TD style="HEIGHT:3.41mm;WIDTH:175.15mm;min-width: 175.15mm;font-size:1pt">&nbsp;</TD>
                    </TR>
                 </TABLE>
              </TD>
              <TD WIDTH="100%" HEIGHT="0"></TD>
           </TR>
           <TR>
              <TD WIDTH="0" HEIGHT="100%"></TD>
           </TR>
        </TABLE>
     </DIV>
  </DIV>
</body>
</html>
Developer
Dec 11, 2013 at 4:07 PM
thx for finding the index out of range bug, I will add it to the next minor release.

your html does specify size in each and every element, sometimes even twice :)
it also uses a lot of table layout that HtmlRenderer doesn't handle well right now, I'm working to fix all the different layouts seen in your example.
Dec 11, 2013 at 6:51 PM
Thank you. I have found several other issues you may want to look as I was trying to get this to work.

Detailed below:
CSSLayEngine line 268:
Images appear to have words and are not handled correctly. I added a check FlowBox if an image.

In general this code does not handle other measurement units very well. I made a couple of changes more are necessary. I think it is good to normalize on pixels as you have started to do.

In CSSLengeth I added, this would need to be completed for other units
public int GetLengthInPX()
    {
        switch (_unit)
        {
            case CssUnit.Milimeters:
                return (int)(_number*3.78f);
        }
        return 0;
    }
This is used in CssLayoutEngineTable on line354:
If it is not a percentage use the normalized pixel size. This type of change probably needs to be applied in other areas.

CssValueParser I modified IsValidLength to handle non int as needed for other units:
line 47 and 48:
float stub;
return float.TryParse(number, out stub);

also modified line 152 mm to pixel is 3.78 factor
factor = 3.78f; //3.78 pixels per millimeter