HTML table to IMAGE | Wrong output width

Kruzer · March 23, 2023, 12:50am

Hi support,
I using ASPOSE to convert HTML to image.
But after converting i receive wrong width for some reasons…

What i expacting ( input html ):
Screenshot_1.png (35.3 KB)

What i receiving:
Screenshot_2.png (123.1 KB)

Pay your attention to third column. It has wrong width after converting.

Attaching HTML, CSS and config of converter.

static TableConverter()
        {
            //activation license for ASPOSE.HTML library
            htmlLicense = ActivateLicense();

            //CSS for table transformation
            CSS = LoadCSS();

            //Save Options
            saveOptions = new ImageSaveOptions(ImageFormat.Png)
                {
                    BackgroundColor = Color.White,
                    Compression = Compression.None,
                    SmoothingMode = SmoothingMode.HighQuality,
                    HorizontalResolution = 101,
                    VerticalResolution = 101,
                };

            saveOptions.PageSetup.PageLayoutOptions = PageLayoutOptions.FitToContentHeight | PageLayoutOptions.FitToContentWidth;
            saveOptions.Css.MediaType = MediaType.Screen;
        }

HTML and CSS input:

    <style>pre { margin-left: 2em; white-space: pre-wrap; }h2 { margin: 3em 0 1em 0; }h3 { margin: 2.5em 0 1em 0; }h4 { margin: 2.5em 0 0.75em 0; }h5, h6 { margin: 2.5em 0 1em; }h1 + h2, h1 + h2 + h2, h1 + p, h1 + p + h2 { margin: 0.75em 0 0.75em; }h2 + h3, h3 + h4, h4 + h5, h5 + h6 { margin-top: 0.5em; }p { margin: 1em 0; }hr:not(.top) { display: block; background: none; border: none; padding: 0; margin: 2em 0; height: auto; }.element dd,  .element dl { margin-top: 0em; margin-bottom: 0.25em;}dt { margin-top: 0.75em; margin-bottom: 0.5em; clear: left; }.element dt { margin-top: 0.5em; margin-bottom: 0.5em;  }dt + dt { margin-top: 0; }dd dt { margin-top: 0.25em; margin-bottom: 0; }dd p { margin-top: 0; }dd dl + p { margin-top: 1em; }dd table + p { margin-top: 1em; }p + * > li, dd li { margin: 1em 0; }dt, dfn { font-weight: bold; font-style: normal; }i, em { font-style: italic; }dt dfn { font-style: italic; }pre, code { font-size: inherit; font-family: monospace; font-variant: normal; }pre strong { color: black; font: inherit; font-weight: bold; background: yellow; }pre em { font-weight: bolder; font-style: normal; }@media screen { code { color: #D93B00; } code a:link, code a:visited { color: inherit; } }var { background-color: #f9f9f9; border: 1px solid #eee; padding: 0 2px; }var sub { vertical-align: bottom; font-size: smaller; position: relative; top: 0.1em; }table { border-collapse: collapse; border-color:#000000; border-style: solid; }table thead, table tbody { border-bottom: solid; }table tbody th:first-child { border-left: solid; }table tbody th { text-align: left; }table td, table th { border-left: solid; border-right: solid; border-bottom: solid; vertical-align: top; padding: 0.2em; }h4 { position: relative; z-index: 3; }h4 + .element, h4 + div + .element { margin-top: -2.5em; padding-top: 2em; }.element {  background: #F4F4FA;  color: black;  margin: 0 0 1em 0.15em;  padding: 0 1em 0.25em 0.75em;  border-left: solid #9999FF 0.25em;  position: relative;  z-index: 1;}.element:before {  position: absolute;  z-index: 2;  top: 0;  left: -2.05em;  height: 2em;  width: 1.8em;  background: #F4F4FA;  content: ' ';  border-style: none none solid solid;  border-color: #9999FF;  border-width: 0.25em;}svg{max-width: 100%;height: auto;}svg a:link, svg a:visited {  cursor: pointer;}svg a text,svg text a {  fill: blue; /* Even for text, SVG uses fill over color */  text-decoration: underline;}svg a:hover, svg a:active {  outline: dotted 1px blue;}/******************************************************************************//*                                   Body                                     *//******************************************************************************/body {counter-reset: example figure issue;/* Layout */margin: 0 auto;/* Typography */line-height: 1;font-family: Calibri light;font-size: 8pt;widows: 2;orphans: 2;word-wrap: break-word;overflow-wrap: break-word;hyphens: auto;/* Colors */color: black;}@media screen {html, body, .front-page, .main-content {width: 100%;}nav {height: 100%;}.front-page{height: 100vh;}.main-content{}}/** ToC Sidebar *************************************************************/@media screen {html, body {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}body #toc {position: fixed;top: 0; bottom: 0;left: 0;width: 90mm;text-decoration: none;overflow: auto;scrollbar-width: thin;padding: 0 0 0 3mm;background-color: #5e5b5b;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;z-index: 100;}body #toc a {text-decoration: none;color: #000;display: flex;flex-direction: row;}body #toc a span:first-child {flex: 0 0 auto;padding-right: 5px;}body #toc a span:last-child {word-wrap: break-word;}body #toc ol {padding: 0;list-style: none;}body #toc li.chapter-title{margin-top: 6mm;}body #toc li.chapter-title>a{/*color: #fdc300;*/color: #e8e8e6;font-family: Calibri light;font-size: 12pt;font-weight: bold;word-wrap: break-word;display: block;text-indent: -3mm;margin-left: 1mm;}body #toc li.section-title>a{margin-top: 6mm;padding-left: 3mm;color: #e8e8e6;font-family: Calibri light;font-size: 12pt;word-wrap: break-word;display: block;text-indent: -6mm;margin-left: 2mm;}body #toc li.topic-title>a{margin-top: 6mm;padding-left: 3mm;color: #e8e8e6;font-family: Calibri light;font-size: 10pt;word-wrap: break-word;display: block;text-indent: -8mm;margin-left: 7mm;}#tocShowBtn{position: absolute;top: 49.7%;height: 5mm;width: 5mm;background-color: #787474;cursor: pointer;}#tocHideBtn{position: absolute;top: 52%;height: 5mm;width: 5mm;background-color: #787474;cursor: pointer;}#tocNavBtnsBar {position: fixed;width: 5mm;height: 100%;left: 0mm;margin-left: 90mm;background-color: #5e5b5b;z-index: 150;}body main {}.activeHeaderTitle > a {font-weight: bold;color: #fdc300 !important;}/***** front-page *****/.front-page>div {margin-left: 95mm;}.front-page>div.title1 {position: absolute;left: 3mm;top: 6mm;font-family: Calibri light;font-size: 14pt;color: #000;z-index: 10;}.front-page>div.title2 {position: absolute;left: 0;top: 8mm;right: 0;text-align:center;font-family: Calibri light;font-size: 20pt;font-weight: bold;color: #e8e8e6;z-index: 10;}.front-page>div.product-image {position: absolute;left: 0;top: 27mm;right: 0;bottom: 0;text-align:center;overflow: hidden;z-index: 5;}.front-page>div.version-block {position: absolute;left: 3mm;bottom: 6mm;z-index: 10;}.front-page>div.copyright {position: absolute;left: 0;bottom: 6mm;right: 0;text-align:center;z-index: 10;}.front-page>div.footer-image {position: absolute;bottom: 0;right: 0;}.main-content section {left:0;top: 9mm;right:0;bottom: 0;margin-left: 95mm;}/***** header of main content *****/.main-content header, .static-top-header {height: 9mm !important;margin-left: 95mm;border-bottom: 1pt solid #fdc300;z-index: 10;}.static-top-header {position: fixed;height: 9mm;width: calc(100% - 95mm);box-sizing: border-box;z-index: 50;/*border: 2px solid pink;*/line-height: 9mm;background-color: white;}.main-content header img {height: 7mm;float: right;}.main-content header nav, .static-top-header {height: 100%;display: inline-block;vertical-align: middle;font-family: Calibri light;font-size: 14pt;color: #000000;padding-left: 4mm;}.main-content header nav ul {padding: 0;margin: 0;line-height: 9mm;}.main-content header nav li {display: inline-block;}.main-content header nav li a {display: block;text-decoration: none;}/***** content elements *****/.section_container{margin-left: 3mm;padding-top: 30px;margin-top: -30px;}.section_title {margin-left: 2mm;margin-top: 2.4722222222mm /*6mm-10pt*/;font-family: Calibri light;font-size: 14pt;color: #000;}.topic_title {margin-left: 2mm;margin-top: 4.4722222222mm /*8mm-10pt*/;font-family: Calibri light;font-size: 12pt;color: #000;}.topic_container {padding-top: 30px;margin-top: -30px;}.topic_container .body {margin-top: 3.47222mm /*7mm-10pt*/;font-family: Calibri light;font-size: 10pt;color: #000;}.topic_container .body a {font-family: Calibri light;font-size: 8pt;font-weight: bold;color:#e57002;}.topic_container .body  img.image{margin-top: 4mm;max-width: 100%;height: auto !important;}.topic_container .body  table.table{margin-top: 4mm;max-width: 161mm;font-family: Calibri light;font-size: 10pt;color: #000;}.topic_container .body .entry_header_attributes {font-family: Calibri light;font-size: 10pt;font-weight: bold;color: #000;background-color: #FFC000;}/** Note *************************************************************/table.icons_wrap {border: 0.5pt solid rgb(255, 191, 0);width: 100%;}table.icons_wrap td, table.icons_wrap th { border: none; }table.icons_wrap thead, table.icons_wrap tbody { border: none; }}</style><div class='topic_container'><div class='body'><div><div><table class="table" style="table-layout:fixed; "><colgroup><col width="125*"><col width="50*"><col width="200*"><!--thead--></colgroup><thead><!--row--><tr><!--entry--><td style="vertical-align: middle; text-align: center; " class="entry entry_header_attributes "><div>Signal fra lystårn og sirene
                                            <!--image--><img class="image" src="http://doccenter.sanovogroup.com/ImageHandler.aspx?url=http://doccenter.sanovogroup.com/MDBImages//Sirene_^xZELUnUcOACOVuAasrVgKdtJAkg_^_.jpg&amp;w=6.69mm&amp;h=7.0mm&amp;ro=0&amp;mode=xhtmlGen&amp;max_width=&amp;max_height=&amp;dpi=&amp;reportId=" original_width="6.69mm" original_height="7.0mm" style="width: 6.69mm; height: 7.0mm"></div></td><!--entry--><td style="vertical-align: middle; text-align: center; " class="entry entry_header_attributes "><div>Farve/lys/blink</div></td><!--entry--><td style="vertical-align: middle; text-align: center; " class="entry entry_header_attributes "><div>Betydning</div></td></tr></thead><!--tbody--><tbody><!--row--><tr><!--entry--><td style="vertical-align: top; " class="entry "><div>
                      <!--p--><div style="">
                        <!--b--><b class="bold">Rød lampe - konstant lys.</b>
                      </div>
                      <!--p--><div style="">Gul lampe slukket.</div>
                      <!--p--><div style="">
                        <!--b--><b class="bold">Grøn lampe - langsomt blink.</b>
                      </div> Sirene slukket.</div></td><!--entry--><td style="" class="entry "><div>
                      <!--image--><img class="image" src="http://doccenter.sanovogroup.com/ImageHandler.aspx?url=http://doccenter.sanovogroup.com/MDBImages//Red_green%20light%20with%20flash_^2__wz9Mst69jctY7J_aVbYlnPX4_^_.jpg&amp;w=7.75mm&amp;h=20.0mm&amp;ro=0&amp;mode=xhtmlGen&amp;max_width=&amp;max_height=&amp;dpi=&amp;reportId=" original_width="7.75mm" original_height="20.0mm" style="width: 7.75mm; height: 20.0mm">
                    </div></td><!--entry--><td style="vertical-align: top; text-align: right; " class="entry "><div>
                      <!--p--><div style="">Standby</div>
                      <!--p--><div style="">Maskinen er stoppet og klar til start.</div>
                    </div></td></tr><!--row--><tr><!--entry--><td style="vertical-align: top; " class="entry "><div>
                      <!--p--><div style=""> Rød slukket. </div>
                      <!--p--><div style=""> Gul slukket. </div>
                      <!--p--><div style=""> Grøn slukket. </div>
                      <!--image--><img class="image" src="http://doccenter.sanovogroup.com/ImageHandler.aspx?url=http://doccenter.sanovogroup.com/MDBImages//Sirene_^xZELUnUcOACOVuAasrVgKdtJAkg_^_.jpg&amp;w=6.69mm&amp;h=7.0mm&amp;ro=0&amp;mode=xhtmlGen&amp;max_width=&amp;max_height=&amp;dpi=&amp;reportId=" original_width="6.69mm" original_height="7.0mm" style="width: 6.69mm; height: 7.0mm">
                      <!--b--><b class="bold">Sirene giver lyd i 3 sekunder. </b>
                    </div></td><!--entry--><td style="" class="entry "><div>
                      <!--image--><img class="image" src="http://doccenter.sanovogroup.com/ImageHandler.aspx?url=http://doccenter.sanovogroup.com/MDBImages//Turned_off_^BYxzRDR5SdRnTfhlg_A7YiPjGEo_^_.jpg&amp;w=7.76mm&amp;h=20mm&amp;ro=0&amp;mode=xhtmlGen&amp;max_width=&amp;max_height=&amp;dpi=&amp;reportId=" original_width="7.76mm" original_height="20mm" style="width: 7.76mm; height: 20mm">
                    </div></td><!--entry--><td style="vertical-align: top; " class="entry "><div>
                      <!--p--><div style="">Der er trykket på startknappen.</div> Sirenen giver lyd i 3
                                        sekunder for at signalere at centrifugen startes.</div></td></tr><!--row--><tr><!--entry--><td style="vertical-align: top; " class="entry "><div>
                      <!--p--><div style="">Rød lampe slukket.</div>
                      <!--p--><div style="">Gul lampe slukket.</div>
                      <!--p--><div style="">
                        <!--b--><b class="bold">Grøn lampe blinker - hurtigt blink.</b>
                      </div> Sirene slukket.</div></td><!--entry--><td style="" class="entry "><div>
                      <!--image--><img class="image" src="http://doccenter.sanovogroup.com/ImageHandler.aspx?url=http://doccenter.sanovogroup.com/MDBImages//Green%20light%20with%20flash%20light_^LJw7edJ8r687sK_manFkT65GK3c_^_.jpg&amp;w=7.4mm&amp;h=20mm&amp;ro=0&amp;mode=xhtmlGen&amp;max_width=&amp;max_height=&amp;dpi=&amp;reportId=" original_width="7.4mm" original_height="20mm" style="width: 7.4mm; height: 20mm">
                    </div></td><!--entry--><td style="vertical-align: top; " class="entry "><div>
                      <!--p--><div style="">Når sirenen stopper, blinker den grønne lampe hurtigt. </div>
                                        Hvis start knappen aktiveres indenfor 5 sek., vil maskinen
                                        igangsættes, ellers går maskinen i standby igen.</div></td></tr><!--row--><tr><!--entry--><td style="vertical-align: top; " class="entry "><div>
                      <!--p--><div style="">Rød slukket.</div>
                      <!--p--><div style="">Gul slukket.</div>
                      <!--p--><div style="">
                        <!--b--><b class="bold">Grøn lampe – konstant lys.</b>
                      </div> Sirene slukket.</div></td><!--entry--><td style="" class="entry "><div>
                      <!--image--><img class="image" src="http://doccenter.sanovogroup.com/ImageHandler.aspx?url=http://doccenter.sanovogroup.com/MDBImages//Green%20light_^gTk9JUwSNKmfnKyZvxVIslO58dA_^_.jpg&amp;w=7.4mm&amp;h=20mm&amp;ro=0&amp;mode=xhtmlGen&amp;max_width=&amp;max_height=&amp;dpi=&amp;reportId=" original_width="7.4mm" original_height="20mm" style="width: 7.4mm; height: 20mm">
                    </div></td><!--entry--><td style="vertical-align: top; " class="entry "><div>Maskinen kører produktion.</div></td></tr><!--row--><tr><!--entry--><td style="vertical-align: top; " class="entry "><div>
                      <!--p--><div style="">Rød slukket.</div>
                      <!--p--><div style="">
                        <!--b--><b class="bold">Gul lampe – konstant lys.</b>
                      </div>
                      <!--p--><div style="">Grøn lampe - slukket</div> Sirene slukket.</div></td><!--entry--><td style="" class="entry "><div>
                      <!--image--><img class="image" src="http://doccenter.sanovogroup.com/ImageHandler.aspx?url=http://doccenter.sanovogroup.com/MDBImages//Yellow%20light_^KS5LE8MJLK7ZTLHpYJlnfTQ5WZ4_^_.jpg&amp;w=7.76mm&amp;h=20mm&amp;ro=0&amp;mode=xhtmlGen&amp;max_width=&amp;max_height=&amp;dpi=&amp;reportId=" original_width="7.76mm" original_height="20mm" style="width: 7.76mm; height: 20mm">
                    </div></td><!--entry--><td style="vertical-align: top; " class="entry "><div>Maskinen kører i CIP mode.</div></td></tr><!--row--><tr><!--entry--><td style="vertical-align: top; " class="entry "><div>
                      <!--p--><div style="">
                        <!--b--><b class="bold">Rødt lys blinker.</b>
                      </div>
                      <!--p--><div style="">Gul slukket.</div>
                      <!--p--><div style="">Grøn slukket.</div>
                      <!--p (empty)--><div class="emptyParagraph" style="height: 12pt;"></div>
                    </div></td><!--entry--><td style="" class="entry "><div>
                      <!--image--><img class="image" src="http://doccenter.sanovogroup.com/ImageHandler.aspx?url=http://doccenter.sanovogroup.com/MDBImages//Red%20light%20with%20flash_^CJzVdZAITVStgazlPk0afGS09sg_^_.jpg&amp;w=7.76mm&amp;h=20mm&amp;ro=0&amp;mode=xhtmlGen&amp;max_width=&amp;max_height=&amp;dpi=&amp;reportId=" original_width="7.76mm" original_height="20mm" style="width: 7.76mm; height: 20mm">
                    </div></td><!--entry--><td style="vertical-align: top; " class="entry "><div>
                      <!--p--><div style="">Maskinen kører ikke og der er en fejl i systemet.</div> Blinker
                                        ved alarm.</div></td></tr></tbody></table></div></div></div class='body'></div class='topic_container'>

asad.ali · March 23, 2023, 12:25pm

@Kruzer

We are checking it and will get back to you shortly.

Kruzer · March 26, 2023, 9:11pm

Hi @asad.ali
Can i get update about this problem?
thank you!

asad.ali · March 26, 2023, 10:10pm

@Kruzer

We tried to generate the image in our environment and noticed that no CSS style was applied to it. Can you please share the complete code snippet that you used to generate the image shared above? We will again test the scenario in our environment and address it accordingly.

Kruzer · March 26, 2023, 10:56pm

@asad.ali
Attaching .zip file with my Converter. It contain “WrapTable” function, that wrap table into html tags to apply CSS.
Tables.zip (4.1 KB)

asad.ali · March 27, 2023, 12:42pm

@Kruzer

We have opened the following new ticket(s) in our internal issue tracking system and will deliver their fixes according to the terms mentioned in Free Support Policies.

Issue ID(s): HTMLNET-4428

You can obtain Paid Support Services if you need support on a priority basis, along with the direct access to our Paid Support management team.

Kruzer · May 22, 2023, 12:32pm

Hi @asad.ali
Any update on this issue?
Thanks,

asad.ali · May 22, 2023, 6:26pm

@Kruzer

We are afraid that the ticket has not been yet resolved due to other pending issues in the queue. Nevertheless, we will surely let you know as soon as we make some progress towards ticket resolution. Please be patient and spare us some time.

We are sorry for the inconvenience.